Cheat Sheet: Developing Front-End Apps
with React
Estimated reading time: 19 minutes
Package/Method Description Code Example
Arrow
functions allow
hello = () =>
you to write {
Arrow function
shorter return "Hello World!";
}
function
syntax.
function car(name,year)
Class is a {
this.name = name
template or
this.year = year
class blueprint for return this;
}
creating an
let car = car("Ford", 2014)
object. console.log(car)
console.log(car.name)
console.log(car.year)
Functions
called hooks
importReact,{useState}from 'react';
enable
function CntApp() {
"hooking into" const[count,setCount]=useState(0);
return(Youclicked{count}many times
Hooks features of the
<buttononClick={()=>setCount(count+1)}>Clickme<
React state and /button>
);}
lifecycle from
export default CntApp;
function
components.
Package/Method Description Code Example
class Square extends Rectangle
{
constructor(height,width)
A class created {
if(height === width)
with a class {
inheritance super(height,width)
Inheritance }
inherits all the else
methods from {
super(width,width)
another class. }
}
}
let mySquare = new Square(5,5)
let allows you
to restrict the
scope of {
variables within let a = 10
console.log(a)
the block
a = 15
where they are console.log(a)
}
let and const declared. const
console.log(a)
allows you to const num = 5
console.log(num)
declare
num = 8
constants console.log(num)
whose values
cannot be
changed.
When a
class Header extends React.Component {
component constructor(props) {
instance is super(props);
Mounting console.log("Inside the constructor")
created and }
added to the componentDidMount =()=> {
console.log("Inside component did mount")
DOM, these }
Package/Method Description Code Example
methods are render() {
console.log("Inside render method")
invoked in the return (
following The component is rendered
)
order: }
constructor(), }
export default App
getDerivedStat
eFromProps(),
render(),
componentDid
Mount().
When an event
function changeColor() {
fires, event const shoot = () => {
handlers alert("Color Changed!");
}
decide what
return (
should happen <button onClick={change}>Change the Color!
</button>
onClick next. This could
);
involve }
const root =
pressing a
ReactDOM.createRoot(document.getElementById('ro
button or ot'));
root.render(<changeColor />);
altering a text
entry.
The Promise
let promiseArgument = (resolve, reject) =>
object setTimeout (() => {
represents the let currTime = new Date().getTime();
if(currTime % 2 === 0){
eventual resolve("Success")
Promises
completion (or }else{
reject("Failed!!!")}
failure) of an },2000)
asynchronous let myPromise = new Promise(promiseArgument);
operation and
Package/Method Description Code Example
its resulting
value.
Props is short class TestComponentextendsReact.component{
render() {
for properties, return
and it is used Hi {this.props.name}}}
Props //passing the props as examples to the test
to pass data component
between React TestComponentname='John'
TestComponentname='Jill'
components.
import React from "react";
class App extends React.Component {
React class constructor(props) {
component super(props);
this.state={change: true };
contains- }
React class Props: set from render() {
return(
Component outside the <button Click={()=>{this.setState({change:
class, State: !this.state.change});}}>Click Here!</button>
{this.state.change?(Hello!!):(Welcome to the
internal to the React Course)}
class );}}
export default App;
Components
are reusable import React from 'react';
import {Text} from 'react-native';
segments of const Helloworld= ()=>
code that come {
React components return
under the class (Hello, World!);
and functional }
export default Helloworld;
component
types.
React makes import React, {Component} from "react";
React Forms export default functionApp() {
use of forms to const [email, setEmail] = React.useState("");
Package/Method Description Code Example
enable user const [password, setPassword] =
React.useState("");
interaction with const handleSubmit = (event) => {
the website. console.log(`Email: ${email}Password:
${password}`);
event.preventDefault();
}
return ( < formonSubmit = {
handleSubmit
} >
< h1 > Registration < /h1>
<label> Email:< input name="email" type="email"
value={email}
onChange={e => setEmail(e.target.value)}
required/ > < /label>
<label>Password:<input name="password"
type="password" value={password}
onChange={e =>
setPassword(e.target.value)}required/></label>
<button>Submit</button>
</form>);}
class TestComponentextendsReact.component{
The state constructor() {
this.state= {
object is where id: 1,
you keep the name: “John”
React state age: 28
component's };}
property render() {
return ({this.state.name}{this.state.age}
values. )}}
Redux is a state
management
library that is
$ npm install redux react-redux --save
Redux often used with
React to
handle the
state of your
Package/Method Description Code Example
application. An
application
state is like a
global object
that holds
information
that you use
for various
purposes later
in the app.
import React from 'react';
class ComponentOne extends React.Component {
componentWillUnmount() {
console.log('The component is going to be
unmounted');
When a }
component is render() {
return Inner component;
removed or
}
unmounted }
class App extends React.Component {
from the DOM,
state = { innerComponent:<AppInner/>};
Unmounting the componentDidMount() {
setTimerout(()=>{
componentWill
this.setState({ innerComponent:unmounted});
Unmount() },5000)
}
method
render() {
enables us to console.log("Inside render")
run React code. return (
{this.state.innerComponent});
}
}
export default App;
Package/Method Description Code Example
class App extends React.Component{
state = {counter: "0"};
incrementCounter = () =>
this.setState({counter:parseInt(this.state.coun
ter)+1})
shouldComponentUpdate(){
console.log("Inside shouldComponent update")
When a
return true;
component is
}
updated, five
getSnapshotBeforeUpdate(prevProps,prevState){
methods are
console.log("Inside getSnapshotBeforeUpdate")
called in the
console.log("Prev counter is"
same order:
+prevState.counter);
getDerivedStat
console.log("New counter is"
Updating eFromProps(),
+this.state.counter);
shouldCompon
return prevState
entUpdate(),
}
render(),
componentDidUpdate(){
getSnapshotBe
console.log("Inside componentDidUpdate")
foreUpdate(),
}
componentDid
render(){
Update()
console.log("Inside render")
return(<button
onClick={this.incrementCounter}>Click
Me!</button>{this.state.counter}
)
}}
export default App;
