React CheatSheets

#react #reactnative #javascript #beginners

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>
 )
}