Introduction to React
React is an open-source, front end, declarative, efficient, and flexible JavaScript library for building user interfaces or UI components. It lets to compose complex UIs from small and isolated pieces of code called “components”.
Framework or Library?
Framework is a set of resources and tools for software developers to build and manage web applications, web services and websites. Library is a collection of precompiled routines that a program can use. A framework inverts the control of the program. It tells the developer what they need. But a programmer calls the library where and when they need it. React is a library not a framework. Because React is concerned only with rendering the UI. It is not a complete solution and we will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.
Virtual DOM
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.
How to install React
To install react app first of all we have to select the folder where we want to intall react app. Then we need to run “npx create-react-app appName/ yarn create react-app appName” in the command panel. It will take couple of time to install react app in the device. Then if we run “npm start/ yarn start” we will see rotating react logo in the browser.
NPM
npm is package manager for JavaScript. It is default package manger for JavaScript manager. Whenever we want to install any dependency we have to run “npm install dependancyName”. For example if we want to add router in our application we have to run “npm install react-router-dom”. Basically npm puts modules in a place where node can find them easily and manage them.
JSX
JSX means JavaScript XML. It is syntax extension of JavaScript. Using JSX we can write HTML in React.
Example : <p> Welcome to React world </p>
Component
If we want to build an UI using react, we have to break down the UI into small pieces named “component”. It is building blocks of React app. It is like JavaScript class or function. There are two types of component, class component and function component.
useState
State is an object that holds some data that can be changed. It describes the status of the entire program or an individual object. The value of state may be text, a number, a boolean, or another data type.
Example:
useEffect
It is one kind of React hook. It is a special type of hook for encapsulating code. Using useEffect we do something after rendering. It lets to perform side effects in function components. We can also fetch data using useEffect.
Example:
Props
Props is a special keyword which means properties. It is used for passing data from one component to another. Props data can only be read. Which means a data coming from the parent can not be changed by child component.
Example:
Error boundaries
Error boundaries are one kind of React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. It catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.