DEV Community

Cover image for React CheatSheets
Buddhadeb Chhetri
Buddhadeb Chhetri

Posted on • Updated on

React CheatSheets

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
Enter fullscreen mode Exit fullscreen mode

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>
)
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

4.Class component📌

import React from 'react'
class YourComponent extends 
React.Component {
 render() {
 return <div>Buddhadeb Chhetri</div>
 }
}
export default YourComponent
Enter fullscreen mode Exit fullscreen mode

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>
 )
 }
}
Enter fullscreen mode Exit fullscreen mode

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>
 )
 }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
 )
}
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
ngthuongdoan profile image
Doan Ngoc Thuong • Edited

hey can you use the

console.log('Code Block');
Enter fullscreen mode Exit fullscreen mode


for code, very hard too see it

Collapse
foggyreads profile image
noire.munich

Hum, or better yet, buff up the debugging skills: developer.chrome.com/docs/devtools... and learn how to watch a value and use breakpoints.

Collapse
ahsanihsan profile image
Ahsan Ihsan • Edited

Also you can recommend the following extension.

marketplace.visualstudio.com/items...

as there are plenty of snippets that will help them code faster and have a better understanding of the code snippets.

Collapse
actionanand profile image
Anand raja

For the beginner, this will be helpful.