10 Important Things About React

React

1. What is React?

Some people thought that react is a framework. But actually it’s a library. You will often need to incorporate more libraries with React to form any solution. React doesn’t assume anything about how the other components work together.

The more you learn, the more you have a framework that the knowledge fits into. -Bill Gates

2. JSX

When looking at React examples, you have probably seen the plain JS syntax. However, you can also use JSX in plain React code.

const rootElement =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘React is a library’),
   React.createElement(‘p’, {}, 
     ‘I love React’)
 )
ReactDOM.render(rootElement, document.getElementById(‘app’))

We can refactor this JS code to JSX like this:

const RootElement = (
  <div>
    <h1 style={{color: red}}>React is a library</h1>
    <p>I love React</p>
  </div>
)
ReactDOM.render(RootElement, document.getElementById('app'))

3. defaultProps

The defaultProps property can be defined as a property on the component class itself. This property is used for undefined props, but not for null props.

class CustomDiv extends React.Component {
  // ...
}
CustomDiv.defaultProps = {
  color: 'green'
};
//If props.color is set to null, it will remain null:
 render() {
    return <CustomDiv color={null} /> ; 
    // props.color will remain null
  }
//If props.color is not provided, it will be set by default to 'green'
render() {
    return <CustomDiv /> ; 
    // props.color will be set to green
  }

4. ReactDOM

DOM-specific methods are available in the react-dom package for using at the top level of your application and as a way to get outside of the React model if need be. Most of your components should not need to use this package.

If React is loaded from a <script> tag, these top-level APIs are available on the ReactDOM global. In ES6 with npm, you can write import ReactDOM from ‘react-dom’. In ES5 with npm, you can write var ReactDOM = require(‘react-dom’).

Some DOM-specific methods:

• render()
• hydrate()
• unmountComponentAtNode()
• findDOMNode()
• createPortal()

5. React Router:

By using React Router you can root from one component to another easily. Structure of a router has given below:

You can use it by using this command “npm install react-router-dom” in your react app

export default function App() {
  return (
    <Router>
       <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
       </Switch>
   </Router>
  );
}

6. React Hook:

Hooks in React are known as use functions. They essentially are a call to service functions and objects that are not defined elsewhere. Hooks can be used to provide a component with state (like useState) or to manage side effects (like useEffect) or to cache/memoize functions and objects (like useCallback).

Only function components in React allow hook functions. You can’t use them in class components.

An example of useState has given below:

const Button = () => {
  const [count, setCount] = useState(0);  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
};
ReactDOM.render(<Button />, mountNode);

7. React Hook Form:

This is react version of form. This form makes the works easy for the developers. One can easily get data, error message, design it.

You can use it by using this command “npm install react-hook-form” in your react app

Form is look like this:

<form onSubmit={handleSubmit(onSubmit)}>       
{/* register your input into the hook by invoking the "register" function */}       
<input defaultValue="test" {...register("example")} />              {/* include validation with required or other standard HTML validation rules */}       
<input {...register("exampleRequired", { required: true })} />       {/* errors will return when field validation fails  */}       {errors.exampleRequired && <span>This field is required</span>}              <input type="submit" />     
</form>

8. React Bootstrap:

You can easily use bootstrap in your react app by using React Bootstrap. All bootstrap functionyou can access by using it.

You can use it by using this command “npm install react-hook-form” in your react app

import { Button } from 'react-bootstrap';
export default function App() {
  return (
    <Button>Submit</Button>
}

9. React Reveal:

React Reveal is an excellent high performance animation library for React. It’s MIT licensed, lightweight, and specifically created for React in ES6. It can be used to create a wide variety of cool reveal on scroll effects. Scroll down to see how it works.

import React from 'react';
import Roll from 'react-reveal/Roll';

class RollExample extends React.Component {
  render() {
    return (
      <div>
        <Roll>
          <h1>React Reveal</h1>
        </Roll>
      </div>
    );
  }
}

export default RollExample;

10. Optimizing Performance:

There are several ways to speed up your React application if you are using React. React uses several clever techniques internally to minimize the number of expensive DOM operations it needs to execute to update the UI image. This makes many React applications simple and fast.

Install React Developer Tools for Chrome if you’re not sure if your build process is set up correctly so you can test it.

React Developer Tools

If you visit a site with React in production mode, the icon will have a dark background

If you visit a site with React in development mode, the icon will have a red background: