Building a React Project - React Vernacular Campaign 08

Preamble

The previous article introduced three terms, for example:What is Babel?What is Webpack?What is Npm?

This post will be a hands-on approach to building a React project, including:built Environment,create a React project,launching the project, how to use the React Extension Kit.

Built Environment

When building a React App there are all the tools you need to download from the internet first, which have been described in previous articles.

Node.js

Node.js has a built-in npm service that allows us to quickly download React packages and other packages.

Installing the React tool Create React App is the process of installing the JavaScript instructions on your computer.

Come here.Official WebsiteThe upper right corner of the screen allows you to select the language, and the interface supports traditional Chinese.

LTS: is a stable version, officially maintained for a long period of time, usually lasting more than 30 months.
Current：with the latest features, less stable

If you want to check whether the installation is successful, no matter Window, MacOS or Linux, you can open the terminal and input the following commands to know whether the installation is completed.

node -v

Creating a React project

Mode 1: Official CRA Instruction Setting

Once the Node environment is set up, it's time to build our first React project, and here I prefer to use theReact websiteThere are other ways to quickly build a project, although there are also other ways to build a project quickly.

Once Node.js has been successfully installed, enter the following command in the terminal to create a my-app folder with the corresponding files and folders in the corresponding location.

npx create-react-app my-app

Here is the folder structure, there are three folders and three files in my-app folder.

The node_modules folder is where all the packages will be placed, and the packages installed via npm install will also be placed in this folder.package.json will do some configuration for this project.

/my-app
	-/public
	-/node_modules      
	-/src
	-package.json    
	-README.md         
	-package-lock.json

Launching the project

How to start the project after building it?

It can be activated by the following two lines of command, the first line of command is to enter the my-app folder and the second line of command is to start the project.

cd my-app
npm start

If successfully implemented, theRunning this image means we've successfully built our first React project.

Method 2: Self-built environment

You can also use self-built environments, including the Webpack | Npm | Babel introduced in the previous article, and the whole process is to use the command method, add the required functions and build.

What is Webpack?

Webpack is a modular packaging tool whose main function is to integrate various files in a project, including JavaScript, CSS, LESS, SCSS, JSX, etc., into one or more final files. This modular packaging helps to improve development efficiency, especially in large projects, we can split the functionality modularly, and thus realize the convenience of code reuse and testing.

Webpack is more than just a packaging tool, it offers a number of powerful features such as Code Splitting, which allows code to be split into multiple blocks and loaded only when needed to speed up page loading. Meanwhile, Modulize, a core concept in Webpack, allows code to be structured in a way that is easy to maintain and test by splitting large features into smaller files and functions.

What is Npm?

Npm is the world's largest software registry. Open source developers from every continent use npm to share and borrow software packages, and many companies use npm to manage private development.

Npm is called Node Package Manager, and we can use the npm cli tool inside Node to install and manage packages.

For example, if you want to use the React suite, all you need to do is enter a command in the terminal, and npm will automatically find the react front-end framework in the Registry and download it to the node_modules folder.

What is Babel?

Babel is an indispensable tool. Its main function is to convert the latest versions of JavaScript syntax, especially ECMAScript 6 (ES6) syntax, into older versions of JavaScript that browsers can understand and run.

ES6 introduces many powerful features, such as arrow functions, template strings, and deconstructed values, but due to differences in browser support, we need to use Babel for compilation in order to ensure cross-browser compatibility.

Babel is also needed for compiling when developing React applications that use JSX, a JavaScript syntax extension that describes the structure of React components. It makes it possible to write HTML-like markup in JavaScript, but browsers can't run JSX directly, so Babel is needed to convert it to pure JavaScript.

React Build Supplement

Install React Developer Tools (Browser Extensions)

React Developer Tools is an extension for Google Chrome that connects with your browser to the React Developer ToolsThen install it (click "Add to CHROME" in the upper right corner), and finally make sure it's enabled in your browser.

This can be used to find error messages and to observe some of the logs of the React application's JavaScript execution on the web.

Installing and Configuring React Development Tools

The development tool used here is VS Code, which is a free editor that you can connect to the Visual Studio Code Download and install the appropriate version for your computer's operating system.

VS Code is not a full-featured tool once installed, it requires a number of additional extensions to be installed to develop React.

Conclusion

The React vernacular movement is almost ten years old, and it's only now that we're building and launching React projects.

The reason I'm doing this tutorial on the launch project so late is because there are a lot of concepts that are important to understand before you learn React, including npm, node.js, webpack, and babel, all of which are tools you'll likely use in the future.

Future articles will continue to cover React-related knowledge and technology.

Feel free to leave a comment if you have any suggestions or questions!

React Vernacular Campaign Series

Babel & Webpack & NPM - React Whitepaper Campaign 07

React JSX - React Vernacular Campaign 06

How React Works - The React Vernacular Campaign 05

JavaScript Higher-Order Function - React Vernacular Campaign 04

JavaScript Async Await - React Vernacular Campaign 03

JavaScript ES6 Object - React Vernacular Campaign 02

JavaScript ES6 – React Vernacular Campaign 01