Introduction to React
Create React App - Folder Structure
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.
Props and States
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.
Component Lifecycle Phases
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.
Refs in React
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.
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
Error handling in React
Deploying React Apps
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.