React Concept

1.React Component

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Class components.

2.Class Component

When creating a React component, the component’s name must start with an upper case letter. The component has to include the extends React.Component the statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.
The component also requires a render() the method, this method returns HTML.

Now your React application has a component called Name, which returns a <h1> element.

3.Function Component

Here is the same example as above, but created using a Function component instead.

A Function component also returns HTML and behaves pretty much the same way as a Class component, but Class components have some additions and will be preferred in this tutorial.

Once again your React application has a Name component

4. React JSX

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, however, the following are some pros that come with it.

• It is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• It makes it easier and faster to write templates if you are familiar with HTML.

5.Context API in React

React Context API is a way to essentially create global variables that can be passed around in a React app. This is the alternative to “prop drilling”, or passing props from grandparent to parent to child, and so on.

6.ReactDOM

The react-dom the package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
render(), hydrated(), unmountComponentAtNode(), findDOMNode(), createPortal()

7.Webpack

As its core, webpack is a static module bundler.In a particular project, webpack treats all files and assets as modules. Under the hood, it relies on a dependency graph.

8.React Hooks

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

9.React Router

React Router plays an important role to display multiple views in a single page application. Without React Router, it is not possible to display multiple views in React applications. Most of the social media websites like Facebook, Instagram uses React Router for rendering multiple views.