React JS Cheat Sheet
React JS history dates back to 2011 when it was first created by Jordan Walke, a software engineer working for Facebook. It was first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. React JS is a JavaScript library being used for building user interfaces, primarily for single-page applications. It is used for managing the view layer for mobile apps and the web. This library can be used in conjunction with other JavaScript frameworks such as AngularJS. It was created to enhance performance through speed, scalability and simplicity. As of date, React is powering Airbnb, Facebook, Instagram, and many other websites. The statistics for year end 2019 show that 659,358 websites have been developed with React JS.
Since its arrival, React JS has immensely affected the web development job market, making it one of the most in demand frameworks. A lot of budding developers are looking forward to learning and understanding everything about it to enhance their profiles. ReactJS training can be taken by the candidates through Front End Web Developer Bootcamp programs. The remaining of the post takes you through ReactJS Cheat Sheet, which will assist you to learn and write codes.
React JS Cheat Sheet
How to get started?
To use React in production, you should have NPM and Node.js installed. The fastest way of learning React is to write directly in your HTML files. Create the environment by creating a React application and by installing the “create-react-app”. A new browser window will soon show up with a newly created React App.
React Render HTML
React's objective is to render HTML in a web page. React will render HTML in your web page by using a function called ReactDOM.render().
The Render Function
The ReactDOM.render() function mainly takes two arguments, HTML code & an HTML element. The purpose of this function is to display the particular HTML code inside the HTML element.
Example
Show a paragraph in the code i.e. in the "root" element:
ReactDOM.render(<p>Hi</p>, document.getElementById('root'));
The result is shown in the <div id="root"> element:
<body>
<div id="root"></div>
</body>
React JS components
ReactJS components are independent & reusable bits of code. They serve the same meaning as JavaScript functions, but it works in isolation and returns HTML through a render function.
A component has two types:
- Class components
- Function components
Class Component
While working with a React component, ensure that the component's name starts with an uppercase letter. If the component contains “extends React.Component'' statement; this characteristic will associate an inheritance in the code to React.Component, & it gives component access to React.Component's functions. The component also needs a render () method, this method returns HTML.
Create a Class component named Bus
class Bus extends React.Component {
render() {
return <h2>Hi, Bus!</h2>;
}}
Now your React application has a component called Bus, which returns a <h2> element.
Example
Display the Bus component in the "root" element:
ReactDOM.render(<Bus />, document.getElementById('root'));
Start your 7-day FREE TRIAL with QuickStart and get access to 900+ courses including certification training and exam preps for top IT certifications, self-paced courses, personalized learning and certification paths, learning analytics, expert community access and much more.
Function Component
A Function component also returns HTML and behaves in the same way as a Class component, but Class components have some extra additions. Once again your React application has a Bus component given in the below example
Example
Display the Bus component in the "root" element:
ReactDOM.render(<Bus />, document.getElementById('root'));
Component Constructor
If there is a constructor () function in your defined component, this function in the code will be called when the component gets initiated. The constructor function is basically where you initiate the component's properties. In React, component properties should be kept in an object termed “state”.
The constructor function is where you honor the inheritance of the parent component by including the super () statement, it executes the parent component's constructor function, and your component in the code has access to most of the functions of the parent component (React.Component).
Example
Create a constructor function in the Bus component. Let’s also add a color property:
class Bus extends React.Component {
constructor() {
super();
this.state = {color: "blue"};
}
render() {
return <h2>Bus!</h2>;
}}
React Props
Props are arguments and they are passed into React components. Props are passed to components through HTML attributes. React Props are the same as function arguments in JavaScript & attributes in HTML. To send props into a component, you should use the same syntax as HTML attributes:
Example
Add a "brand" attribute to the Bus element:
const myelement = <Bus brand="Ford" />;
The component receives the argument as props object:
Example
Use the brand attribute in the component:
class Bus extends React.Component {
render()
{ return <h2>I am {this.props.brand}! </h1>;
}}
Pass Data
Props are primarily how you pass data from one component to another, as parameters.
React State
React components have a built-in state object. The state object is where you keep property values that belong to the component. When the state object alters, the component re-renders.
You can also try out our LITE Subscription to take a taste of our platform and get access to FREE IT courses. The subscription is best suitable for beginners in the field of information technology.
Creating the state Object
The state object in the code is initialized in the constructor:
Example:
Specify the state object while writing a constructor method:
class Bus extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Bus</h1>
</div>
);}}
React Lifecycle
Lifecycle of Components
Each component in React JS has a lifecycle. They can be monitored & manipulated through three main phases. The three phases are: Mounting, Updating, and Unmounting.
Mounting
Mounting is about putting elements into the DOM. React have four built-in methods that get called, in this same order, when you mount a component:
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
Updating
The next phase in React JS life cycle is when a component is updated. A component is modified whenever there is alteration in the component's state or props. React has five built-in methods and they will be called, in this same order, when a component is modified:
- getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
UnMounting
The next phase in the life cycle begins when the component is removed from the DOM. React has one built-in method that is called when a component is unmounted:
- componentWillUnmount()
React Events
Just like HTML, React JS can perform actions which are based on user events. React has the same events as HTML: click, mouseover, change, etc.
React Forms
Just like in HTML, it uses forms to permit users to interact with the web page.
Adding Forms in React
You can add a form with React like any other element:
Example:
Add a form that permits users to enter their name:
class MyForm extends React.Component {
render() {
return (
<form>
<h1>Hello</h1>
<p> Enter name:</p>
<input
type="text"
/>
</form>
);}}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Handling Forms
Handling forms is about how you handle the data when the value gets changed or gets submitted. In HTML, form data is generally handled by the DOM. In React, form data is generally handled by the components.
Want to know more? talk to our experts