React CheatSheets
Tags: react, reactnative, javascript, beginners
Published: 2021-08-02 19:42:24

####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)_
```javascript
npx create-react-app my-app
cd my-app
npm start
```
###JSX Expression
_scr folder and click App.js_
```javascript
function App(){
const name= 'Buddhadeb'
return(
<div className ="Container">
<h1> Hello World </h1>
<h2> Hi {name}</h2>
</div>
)
}
```
###React Components
####1.Stateless component📌
```javascript
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📌
```javascript
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📌
```javascript
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📌
```javascript
import React from 'react'
class YourComponent extends 
React.Component {
 render() {
 return <div>Buddhadeb Chhetri</div>
 }
}
export default YourComponent
```


####5.Properties in class component📌
```javascript
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📌
```javascript
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📌
```javascript
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📌
```javascript
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>
 )
}
```