Getting Started with React JS…😍😍

The major features of React are:

• It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
• Supports server-side rendering.
• Follows Unidirectional data flow or data binding.
• Uses reusable/composable UI components to develop the view.

What is Component:

Components are the core building block of any react component. Combining numbers of components a react app is built. React components are of two categories:

1. Class Component
2. Funtion Component

What is State in react app?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.

Before react hook was launched it was very tough to manage state but now react has a built in hook called UseState to manage the state..

Props in react:

Props are the input of any react component. Usually parents component passes object to the child component as props. Child component takes props as input and use it as needed

Difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

Difference between HTML and React event handling:

1. In HTML events are declared generally in lowercase convention whereas react uses camelCase convention.
2. In HTML, you can return false to prevent default behavior, Whereas in React you must call preventDefault() explicitly:

What is JSX????

JSX looks like a regular HTML in most cases. We already used it in the Environment Setup chapter. Look at the code from App.jsx where we are returning div.

React uses JSX instead of regular JavaScript. We use framework because the frameworks make the coding style and management much more easier. We can call more components in the main div component which we are returning

In the main div we can add custom css any css framework or any kind of styling we want.

Optimize React Project Performance:

1. Use build production before launching
2. Single File build
3. For more efficient brunch production build
4. Install plugins to most efficient browserify production build
5. Install plugins for most efficient roll up production.

Virtual Dom:

DOM manipulation is said to be the heart of modern interactive Web. But this makes the website a bit slower. In React every DOM is corresponding to Virtual DOM Object. It is a representation of DOM object in lightweight way.

When we render a JSX the Virtual DOM gets updated every single time. May be it sounds like it will make the process more slow. But Virtual DOM renders more fast than regular DOM. It is efficient as well

Default Props:

As we all know react components take inputs as props. It is passed by parent component to child components. The parent components can pass all the values or some values to the child components through props.