First, Briefly
React development is now very popular, how to manage and maintain the project React, React ecosystem there has been a large number of available development tools, such as Browserify, Gulp, Grunt, webpack and so on. Wherein one of the main tool called webpack CommonJS module, a module of binder, has the advantages of the two modular and network performance, can convert different types of files into a single file, you may be all dependencies packaged into a single file. Of course, the use of webpack management React, developers need the command line to install webpack and Babel, then webpack configuration. Compared to the previous web development model, use webpack developers, developers did not have to be concerned about issues such as translation, peace of mind can develop more efficient. Constantly updated technology, tool after another, React team quickly launched a project can be automatically generated React command-line tool create-react-app, so that developers do not need to manually configure webpack, Babel, etc., you can quickly start React projects, React called scaffolding, the ultimate development of a really lazy. After the installation of scaffolding as shown:
Second, the installation
1, the installation package create-react-app, it has completed React environment to build
npm install -g create-react-app
2. Create React project in the specified directory
// enter the specified directory cd ./xxx/ xxx // create React project, reactProject project name // project is created, three dependencies: React / ReactDOM / react-script have been introduced into it, and, Babel, webpack tools such as the default installation has been completed, developers do not need to manually configure the create-react-app reactProject
3, run React project
// execute all test files in the project in interactive mode // npm the Test or the Test the Yarn // packed a bundle files ready on the line, after which the code has been translated and compressed // npm RUN Build or Build the Yarn // start the project, you can see the page opens: HTTP: // localhost: 3000 / npm Start or yarn start
Third, examples
1. Create a project react-demo
2, run into the directory project
3, page up and running successfully
Fourth, the structure
Use webStorm open the project, the project structure is very clear. In the generated project folder, file contains App.js src can see the folder, where the developer can edit the root component, and introducing the other component files for subsequent development.
