ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library responsible only for the view layer of the application. React will handle efficiently updating and rendering just the right components in your application when your data changes. DOM updates which is one of the more expensive operations is handled gracefully in React. It was created by Jordan Walke, who was a software engineer at Facebook.

Starting a new React project is very complicated, with so many build tools. It uses many dependencies, configuration files, and other requirements such as Babel, Webpack, ESLint before writing a single line of React code. Create React App CLI tool removes all that complexities and makes React app simple. For this, you need to install the package using NPM, and then run a few simple commands to get a new React project. The create-react-app is an excellent tool for beginners, which allows you to create and run React project very quickly. It does not take any configuration manually. This tool is wrapping all of the required dependencies like Webpack, Babel for React project itself and then you need to focus on writing React code only. This tool sets up the development environment, provides an excellent developer experience, and optimizes the app for production.

JavaScript XML (JSX) is an extension to the JavaScript language syntax. JSX produces React “elements”. We will explore rendering them to the DOM.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return JSX. React elements describing what should appear on the screen.

React components can have a state object. The state object is where you store property values / data that belongs to the component. When the state object changes, the component re-renders / refreshes itself to show the new data. Props short for properties, is the optional input that your component can accept. Props are arguments passed into React components. It is passed to components via HTML attributes. It also allows the component content to be dynamic.

In React, we can create distinct components that encapsulate behavior we need. Then, we can render only some of them, depending on the state of the application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

Each component has several lifecycle phases that you can leverage to run code at particular times in the process. The three phases are: Mounting, Updating, and Unmounting. Mounting: Mounting is the phase of the component lifecycle when the initialization of the component is completed and the component is mounted on the DOM and rendered for the first time on the webpage. Updating: A component is updated whenever there is a change in the component's state or props. Unmounting: This is the final phase of the lifecycle of the component that is the phase of unmounting the component from the DOM.

A list is a collection of ordered or unordered items. Creating a list is a super common technique for displaying a list of data. In React, you can use the map() function of arrays to iterate over a list and render the data.

Refs is the shorthand used for references in React. It is similar to keys in React. It is an attribute which makes it possible to store a reference to particular DOM nodes or React elements. It provides a way to access React DOM nodes or React elements and how to interact with it. It is used when we want to change the value of a child component, without making the use of props.

Event handling essentially allows the user to interact with a webpage and do something specific when a certain event like a click or a hover happens. Handling events with React elements is very similar to handling events on DOM elements.

We learn the two ways we can create & handle a form in React - uncontrolled and controlled forms. We will also see the comparison between them.

A higher-order component (HOC) is an advanced technique in React for reusing component logic. A higher-order component is a function that takes a component and returns a new component.

In a typical web application, client makes a http request through browser and server sends html page in the response with data. But in a single page application (SPA), we have only one page and whenever client makes http request to server it generally responses with a json/xml formatted data. For making http request we have some of the options − Browser native Fetch API, Axios, Superagent, Got, etc. In this series we'll be focusing on Fetch API & Axios.js

React router helps you manage the flow of data through your apps, sending information where it needs to go.

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

Error boundaries are 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. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

useMemo - The Hook returns a memoized value. React.memo - Causes React to skip rendering a component if its props have not changed. useCallback - The Hook returns a memoized callback function.

Hooks are reusable functions. When you have component logic that needs to be used by multiple components, we can extract that logic to a custom hook.

Once you've successfully built and tested your React app, the final step is hosting and deploying it on a server. This makes your React app public, allowing other users to see your app using a URL. There are numerous hosting and deployment services available online that can run your React app from a remote server with a few simple steps. We will walk you through the entire process of deploying your React app on the web and running it from a remote server.