React - A Beginner's Cheatsheet

This a collection of cheatsheets for beginners in React. It is based on React JS Documentation. Keep it handy for when you want quickly to refer on how to do React stuff.

Find Github project with examples here…

Contents:

Starting a Project

Minimal HTML Page

Dowanlod the following page and start building:
Single File Example

It is for tests only. Not for production environment.

Rendering components

single-file-example.html

In HTML:

1
2
3
<body>
<div id="react-root"></div>
</body>

In JSX file:

1
2
3
4
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root');
);

Defining Components

Functional Components

functional-components.html:

Define a component as a function:

props is the properties passed to our component.

1
2
3
4
5
6
7
8
function Welcome(props) {
return <h1>Hello, {props.name}</h1>
}

ReactDOM.render(
<Welcome name="John Doe" />,
document.getElementById('root')
);

Class components

class-components.html:

1
2
3
4
5
class Goodbye extends React.Component {
render() {
return <h1>Goodbye, {this.props.name}</h1>
}
}

Assignable to variables

assignables.html:

1
2
3
4
5
6
const welcomeSirComponent = <Welcome name="Sir" />;

ReactDOM.render(
welcomeSirComponent,
document.getElementById('root')
);

Local State

states.html

Defining state

State can be initialized in constructor:

1
2
3
4
5
6
7
8
class TimeCounter extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
date: new Date()
};
...

Reading State

1
2
3
4
<div>
<h1>Counting: {this.state.counter}</h1>
<p>{this.state.date.toLocaleTimeString()}</p>
</div>

Updating state

Use setState:

1
2
3
this.setState({
date: new Date()
});

Relying on previous state to update state

In this case do not rely directly to this.state object. Use the setState with arrow function parameter:

1
2
3
this.setState(
(prevState, props) => ({counter: prevState.counter + props.incValue})
);

Event Handling

event-handling.html

Simple Case

Use preventDefault and not return false to prevent bubbling up the event.

You attach an event handler function and not a string in the onClick and the other event handler properties.

1
2
3
4
5
6
7
8
9
10
11
function ALink() {
function handleClick(e) {
e.preventDefault();
alert ('You clicked button: A');
console.log('Event', e);
}

return (
<a href="#" onClick={handleClick}>Link A</a>
);
}

Event Handling in Class / bind method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class BLink extends React.Component {

constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}

handleClick(e) {
e.preventDefault();
alert('You clicked button: B');
console.log(e);
console.log(this);
}

render(){
return (
<a href="#" onClick={this.handleClick}>Link B</a>
);
}

}

Event Handling / Arrow functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class CLink extends React.Component {

//Arrow function as event handler
handleClick = (e) => {
e.preventDefault();
alert('You clicked button: C');
console.log(e);
console.log(this);
};

render(){
return (
<a href="#" onClick={this.handleClick}>Link C</a>
);
}

}

Event Handling / Arrow Callbacks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class DLink extends React.Component {

handleClick = (e) => {
e.preventDefault();
alert('You clicked button: D');
console.log(e);
console.log(this);
};

//Directly Arrow function in callback statement
render(){
return (
<a href="#" onClick={(e) => this.handleClick(e)}>Link D</a>
);
}
}

Passing Arguments with Arrow Callbacks

Event argument has to be passed to the event handler, along with other custom parameters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class DLink extends React.Component {

handleClick = (e, name) => {
e.preventDefault();
alert(`You clicked button: D and the name is ${name}`);
console.log(e);
console.log(this);
};

render(){
return (
<a href="#" onClick={(e) => this.handleClick(e, 'John Doe')}>Link D</a>
);
}
}

Passing Arguments with Callback binding

The Event argument will be automatically be passed after any custom parameters in the .bind operation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class ELink extends React.Component {

handleClick (name, e) {
alert(`You clicked button: E and the name is ${name}`);
console.log(e);
console.log(this);
};

render(){
return (
<a href="#" onClick={this.handleClick.bind(this, "Jane Doe")}>Link E</a>
);
}
}

Passing Up State

pass-up-events.html

You can pass up state from children components to parent. The parent component passes an even handler in props and the child component calls it up.

Parent passes event handler to child

1
<NameInput onChange={ (name)=> {this.setState({name})} } />

Child calls the parent handler on state changes

1
<input type="text" onChange={(e) => {this.props.onChange(e.target.value)}}></input>

Children Components

children-props.html

A component can handle children components by having direct access to their JSX via the props.children property.

A component can have ‘content’:

1
2
3
4
<Bordered>
<p>Dear John</p>
<p>I wish you Happy Birthday!!</p>
</Bordered>

And the Bordered component can access and manipulate the content:

1
2
3
4
5
6
7
8
9
10
11
12
class Bordered extends React.Component {
render(){
return (
<div>
Letter:
<div className="fancy-border content">
{this.props.children}
</div>
</div>
);
}
}

Multiple Children Components

You can pass them as custom JSX props.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class NewsPaperPage extends React.Component {
render() {

const columnLeft = (...);
const columnMiddle = (...);
const columnRight = ();

return (
<PaperPage
columnLeft={columnLeft}
columnMiddle={columnMiddle}
columnRight={columnRight}
/>
);

}
}

And the PaperPage Component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class PaperPage extends React.Component {
render(){
return (
<div className="paper-page">
<div className="column column-left">
{this.props.columnLeft}
</div>
<div className="column column-middle">
{this.props.columnMiddle}
</div>
<div className="column column-right">
{this.props.columnRight}
</div>
</div>
);
}
}