Important topics on react:

What is React?

React is a powerful and flexible JavaScript library for building user interfaces.It compose complex UIs from small and isolated pieces of code called “components”.

Important features of ReactJS:

1. JSX:

JSX stands for JavaScript XML. It is a JavaScript syntax extension.React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code.

2. Components :

Components are like JavaScript functions.A Component is considered as the core building blocks of a React application.

In ReactJS, there are two types of components.

1. Functional Components

2. Class Components

3. Props:

Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component as arguments passed in a function.

Props are immutable so we cannot change the props from inside the component. If you want to pass data from parent to child component you need to use props.

4. State:

The state is used to contain data or information about the component. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components.

A state should be kept as simple as possible. It can be set by using the setState() method.To set an initial state ,we need to use the getInitialState() method.

5. Handling Events:

React has its own event handling system similar to handling events on DOM elements. The react event handling system is known as Synthetic Events.

Handling events with react have some differences from handling events on DOM. These are:

1. React events are named as camelCase instead of lowercase.

2. With JSX, a function is passed as the event handler instead of a string.

6. Conditional React:

Conditional rendering in React works the same way conditions work in JavaScript.

There are many ways to do conditional rendering in React:

• if
• ternary operator
• logical && operator
• switch case operator
• Conditional Rendering with enums

7) React DOM:

The react-dom package provides DOM-specific methods that can be used at the top level of app.

• render(): Render a React element into the DOM in the supplied container and return a reference to the component.
• hydrate(): Same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDomServer.
• unmountComponentAtNode(): Remove a mounted React component from the DOM and clean up its event handlers and state.
• findDomNode(): This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
• createPortal(): Creates a portal. Portals provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.

8)React Component Life-Cycle:

In ReactJS, every component creation process involves various lifecycle methods. These lifecycle methods are termed as component’s lifecycle. The lifecycle of the component is divided into four phases. They are:

1. Mounting Phase
2. Updating Phase
3. Unmounting Phase
4. Error Handling

9)React Hooks:

Hooks are the functions which “hook into” React state and lifecycle features from function components. It does not work inside classes.

All hooks functions begin with the word “use”. Some of them can be used to provide a function component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache functions and objects (like useCallback).

10) Optimizing Performance:

React uses several techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways to speed up React application.

~Using Immutable Data Structures

~In React, function components and PureComponent provide two different ways of optimizing React apps at the component level.

~When considering optimizing the application bundle size, it’s worth checking how much code you are actually utilizing from dependencies.

~Use React.Fragments to Avoid Additional HTML Element Wrappers

~Avoid Inline Function Definition in the Render Function.

~Avoid using Index as Key for map

~Avoiding Props in Initial States

~Spreading props on DOM elements