React Core Concepts

1. React is a JavaScript “library”. It is not exactly a “framework”. React (also known as React.js or ReactJS) is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook. React can be used as a base in the development of single-page or mobile applications.

Create a react app by this command npx create-react-app my-app

Major features of React:

1. VirtualDOM
2. Server-side rendering
3. components

2. VirtualDom: The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

3. Server-side rendering: Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

4. Components: Components are the life of React. Components are reusable, composable, and stateful.

There are two types of components:

1. Function Components: This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as the first parameter and return React elements:

function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}

2. Class Components: You can also use ES6 class to define a component. The above function component can be written as:

class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}

5. State in React: State of a component is an object that holds some information that may change over the lifetime of the component.

6. Props: Props are arguments passed into React components.

You can use an arrow function to wrap around an event handler and pass parameters:

7. Context: Context provides a way to pass data through the component tree without having to pass props down manually at every level.

8.React Comments: The comments in React/JSX are similar to JavaScript Multiline comments but are wrapped in curly braces.

9. Advantages of React: Below is the list of main advantages of React,

1.Increases the application’s performance with Virtual DOM.
2.JSX makes code easy to read and write.
3.It renders both on the client and server-side (SSR).
4.Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
5.Easy to write unit and integration tests with tools such as Jest.

10. Limitations of React: Apart from the advantages, there are few limitations of React too,

1. React is just a view library, not a full framework.
2. There is a learning curve for beginners who are new to web development.
3. Integrating React into a traditional MVC framework requires some additional configuration.
4. The code complexity increases with inline templating and JSX.
5. Too many smaller components leading to over-engineering or boilerplate.