React JS -Fundamentals (Part-1)

Topics which is covered -

1. What is React and How it’s work?
2. JSX vs Pure React js.
3. React Component — Function and Class Component.
4. Function Component vs Class Component.
5. Interactive Component using States.
6. Iterating the list in React.

What is React?

React is a JavaScript library for building user interfaces. It is used to build single-page applications. React allows us to create reusable UI components.

React is a declarative, efficient, and flexible library for building dynamic user interfaces.

React creates a VIRTUAL DOM in memory. Instead of manipulating the browser’s DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React finds out what changes have been made, and changes only what needs to be changed.

JSX vs Pure React js

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

DOM elements can be created with JavaScript functions or with JSX. JSX is often preferred because it looks like HTML and is easier to visualize. When the application is built, the JSX code is transpired back into JavaScript functions so there isn’t any performance difference between these two methods.

JSX:

Without JSX:

React Component

React is all about Components and it lets you compose complex UIs from small and isolated pieces of code called “components”.

React has a few different kinds of components, but we’ll start with Class Component:

Component Constructor

If there is a constructor() function in your component, this function will be called when the component gets initiated.

The constructor function is where you initiate the component’s properties.

Props

Props are arguments passed into React components and passed to components via HTML attributes.

Function Component

Function component also returns HTML and behaves pretty much the same way as a Class component.

Function vs Class Components

React State

Remember Props are read-only objects so we have a state to make UI more interactive.

React components has a built-in state object. The state the object is where you store property values that belong to the component.

When the state object changes, the component re-renders and setStateto update the state of the objects.

Iterating the list in React

If you like the tutorials give a clap, soon I will publish part -2 of fundamental.