This content originally appeared on DEV Community and was authored by Buddhadeb Chhetri
What is ReactJS?
?ReactJS is an open-source, component based front end library responsible only for the view layer of the application. It is maintained by Facebook.
ReactJS uses virtual DOM based mechanism to fill in data (views) in HTML DOM.
?The virtual DOM works fast owning to the fact that it only changes individual DOM elements instead of reloading complete DOM every time.
Create React App
?creat-react-app is a React app boilerplate generator created by Facebook. It provides a development environment configured for ease-of-use with minimal setup, including:
1.ES6 and JSX transpilation
2.Dev server with hot module reloading
3.Code linting
4.CSS auto-prefixing
5.Build script with JS, CSS and image bundling, and sourcemaps
6.Jest testing framework
Installation
First, install create-react-app with node package manager (npm)
npx create-react-app my-app
cd my-app
npm start
JSX Expression
scr folder and click App.js
function App(){
const name= 'Buddhadeb'
return(
<div className ="Container">
<h1> Hello World </h1>
<h2> Hi {name}</h2>
</div>
)
}
React Components
1.Stateless component?
import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
render() {
return (
<div>
Hello, I am Buddhadeb Chhetri.
</div>
);
}
}
export default FirstComponent
2.Stateless Functional Components?
import React from 'react';
import PropTypes from 'prop-types';
const FirstComponent = props => (
<div>
Hello, ! I am {props.name}.
</div>
);
FirstComponent.propTypes = {
name: "Buddhadeb Chhetri"
}
3.Properties in stateless component?
const YourComponent = ({ propExample1,
example2 }) => (
<div>
<h1>properties from parent
component:</h1>
<ul>
<li>{propExample1}</li>
<li>{example2}</li>
</ul>
</div>
)
<YourComponent propExample1="Buddhadeb"
example2="Chhetri" />
4.Class component?
import React from 'react'
class YourComponent extends
React.Component {
render() {
return <div>Buddhadeb Chhetri</div>
}
}
export default YourComponent
5.Properties in class component?
class YourComponent extends
React.Component {
render() {
return (
<div>
<h1>
properties from parent
component:
</h1>
<ul>
<li>{this.props.propExample1}</li>
<li>{this.props.example2}
</li>
</ul>
</div>
)
}
}
6.State?
class CountClicks extends React.Component {
state = {
clicks: 0
}
onButtonClick = () => {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}))
}
render() {
return (
<div>
<button
onClick={this.onButtonClick}>
Click me
</button>
<span>
The button clicked
{this.state.clicks} times.
</span>
</div>
)
}
}
7.React Router?
import {
BrowserRouter,
Route
} from 'react-router-dom'
const Hello = () => <h1>Hello world!</h1>
const App = () => (
<BrowserRouter>
<div>
<Route path="/hello"
component={Hello}/>
</div>
</BrowserRouter>
)
open: https:localhost:3000/hello
8.useState hook?
import React, { useState } from 'react'
function Example() {
const [count, setCount] = useState(0)
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() =>
setCount(count + 1)}>
Click here to increase the
counter.
</button>
</div>
)
}
This content originally appeared on DEV Community and was authored by Buddhadeb Chhetri
Buddhadeb Chhetri | Sciencx (2021-08-02T19:42:24+00:00) React CheatSheets. Retrieved from https://www.scien.cx/2021/08/02/react-cheatsheets/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.