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

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.

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:

  1. constructor()
  2. getDerivedStateFromProps()
  3. render()
  4. 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:

  1. getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. 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