All the fundamental React.js Core Concepts that you should know as a React Developer

1.React JSX

JSX stands for JavaScript XML.JSX allows us to write HTML in React JSX makes it easier to write and add HTML in React.

You are not required to use JSX, but JSX makes it easier to write React applications.

Let us demonstrate with two examples, the first uses JSX and the second does not:

JSX:

const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

Without JSX:

const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

2.React Components

React components are javascript functions.It is reusable bits of code. We can say the component is a blueprint or template. Components are two types. Class & functional components.

3.Class Component

As we know that in react components are two type one is class and another is functional. Let’s discuss on class components. In react js component’s name’s first letter must be upper case. To make a class component we must extend React. Component. Let’s see an example of react class components.

class Bus extends React.Component {
  render() {
    return <h3> I am a Bus </h3>;
  }
}// To display componentsReactDOM.render(<Bus />, document.getElementById('root'));

4.Function Component

We write class components in object oriented style(Class based) but in functional component we make component using function. Just like class components function name’s first letter must be upper case. Let’s see an example of react functional components.

function Bus() {
  return <h5> I am a Bus!</h5>;
}// To display componentReactDOM.render(<Bus />, document.getElementById('root'));

5.Component Lifecycle

React component has a lifecycle. We can control react components during its three main lifecycles.

They are Mounting, Updating, and Unmounting.

• Mount: Create of component
  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
• Update: update of component
  1.static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate()
  5. componentDidUpdate()
• Unmount: Remove or delete of component
  1. component will unmount()

6.React Props

React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes:

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

7.Hooks

It is a new feature introduced in the React 16.8 version. It will help you to write state and other react feature in functional components. Hooks are nothing but a special function. We can’t use hooks in class components, hooks are for functional components only.

Normal Hooks : useState, useEffect, useContext

Other Hooks :useReducer , useCallback, useMemo, useRef, useImperativeHandle , useLayoutEffect, useDebugValue

8. Rules of Hooks

When using Hooks we should follow the rules given below

1. Don’t call hooks from inside a loop, condition, or nested function
2. Call hooks at the top
3. Call hooks only in functional components
4. Don’t call a hook from a regular function

10.Virtual Dom

The virtual dom works in three phases

1. When we change in react app then the full UI is re-rendered in virtual dom

11.React State

React components has a built-in state object.

The state object is where you store property values that belong to the component.

When the state object changes, the component re-renders.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

12.React Events

Just like HTML, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover, etc.

class Football extends React.Component {
  shoot = (a) => {
    alert(a);
  }
  render() {
    return (
      <button onClick={() => this.shoot("Goal")}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));