A bit of research on React scaffolding

React is a front-end framework developed by Facebook (MVC framework: focuses on view layer operations), which is widely used in the industry. In order to make the framework more lightweight, the designers defined it as “progressive” framework, which means:

The core of the body is in the react/react-DOM framework. If we want to use routes, we need to install the React-Router. If we want to use Redux for unified state management, we need to install redux/React-Redux. We can also continue to install middleware/Axious etc… The design concept of “progressive” is to install different components according to the user’s needs (vUE is also designed in this way).

React’s JSX syntax can’t be directly parsed by the browser. Es6 / LESS and other components used in react programming need to be compiled.

At this time, we are looking forward to an automated deployment tool, which can help us to automatically complete these compilation operations. Webpack is a very common automated deployment platform in the current project, and we need to configure WebPack before building the project.

There are a lot of similar operations, so complex project engineering configuration, module installation, etc., become a big pain for developers, some people joke, is there a “front-end configuration engineer” in the future;

To address these issues, there are a number of react project development scaffolding:

generator-z-react-cli
create-react-app
.

With these scaffolds, we were able to quickly build a complete react engineering structure, avoiding manual configuration.

create-react-app

FaceBook official issued a furnished without scaffolding tools, used to quickly build the development environment: https://github.com/facebook/create-react-app

Install create-react-app globally based on NPM

$ npm install -g create-react-app

2. Create a React project in the specified directory

$ create-react-app my-app

My-app is a self-set project name (following the requirements of the NPM module when published, such as: no capital letters or Chinese characters or special characters in the name)

3. Enter the specified project file and start the project

$ cd my-app

$NPM run start or $YARN start (if yarn is installed globally)

Generated structure directory

My - app | - build / / build directory, follow the release system specification | | -- index. / / static HTML pages | | - static / / resource file | | - node_modules / / component folder of the project: All of the components installed in the | | - SRC / / source directory | | - index. The js / / entry documents (also generates the other file, but not do, We can directly deleted) | | - public / / static page directory | | - index. The HTML / / main page (also generates the other file, but no dice, we can directly deleted) | | -. Gitignore / / git commits to ignore the file, We also need to manually add the idea (through webStorm editing tools for development, the generated files) | -- package. Json / / project dependencies, and basic information | -- the README. Md / / project description | -...Copy the code

The generated package. Json

{" name ":" my - app ", "version" : "0.1.0 from", "private" : true, "dependencies" : {/ / = > production dependencies "react" : "^ 16.2.0", "the react - dom" : "^ 16.2.0 react -", "scripts" : "1.1.0"}, "scripts" : {/ / = > executable scripts "start" : "the react - scripts start", "build" : "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "React-scripts eject"}} /* * Executable script comments: * * $NPM run start = $NPM run start = $NPM run start = $NPM run start = $NPM run start * * $NPM run test uses Jest as a test run. * * $NPM run ejectCopy the code

Through analysis, we find that create-React-app has the following characteristics:

The react/react-dom component is not installed in the react/react-dom component. It is not installed in the react/react-dom component. $yarn add redux react-redux react-router-dom prop-types etc
After the project is built, scaffolding hides all webPack-related configuration files for “elegance”. If you look in the myApp folder directory, you will find no WebPack configuration files. This makes it difficult to install your own loder or plugin in webPack.
Create-react-app automatically generates webpack with: Eslint (code detection), URL-loader (image BASE64) [images less than 10000KB]), babel-loader (ES6 and JSX syntax parsing), style-loader, CSS-loader (CSS code parsing), HtmlWebpackPlugin (output HTML plug-in) and other contents
.

npm run eject

As mentioned above, scaffolding hides all webPack-related configuration files for the sake of “elegance”, and if we want to add something of our own based on the original, we first need to find these hidden files and modify them.

Some developers simply go to node_modules and search for webpack.config… We wait for the file, then modify it, and it works, but when we modify it, we install some other project modules, and when we recompile, we go back to the original configuration information.

After creating a project based on create-react-app, the eject command ($yarn eject) is provided. With this command, the hidden Webpack file can be displayed for secondary configuration.

$YARN eject or NPM run eject

The execution of this command is irreversible (use caution)

After executing, we can see some changes to the original structure directory (two new folders, along with the contents of package.json)

Structural changes

My - app | - config / / webpack configuration files are here | | - jest | | | -- cssTransform. Js | | | -- fileTransform. Js | | -- env. Js | | - paths.js | |-- polyfills.js | |-- webpack.config.dev.js | |-- webpack.config.prod.js | |-- webpackDevServer.config.js | | - scripts | | - build. Js | | -- start. Js | | -- test. Js later if you want to modify the configuration information, modify the webpack. Config. Dev. Js, webpack. Config. Prod. Js. Of course, others can also be modified (the premise is to understand the operation principle)Copy the code

Changes in package.json

{" name ":" my - app2 ", "version" : "0.1.0 from", "private" : true, "dependencies" : {//=> Dependencies show previously hidden (installed) modules, many of which are required to configure Webpack: "autoprefixer": "7.1.6", "babel-core": "6.26.0", "babel-eslint": 7.2.3 ""," Babel - jest ":" 20.0.3 ", "Babel - loader" : "7.1.2", "Babel - preset - react - app" : "^ 3.1.1 track", "Babel - runtime" : "6.26.0", "case - sensitive - paths - webpack - plugin" : "2.1.1", "chalk" : "1.1.3", "CSS - loader" : "0.28.7", "dotenv" : "4.0.0", "dotenv - expand" : "4.0.1", "eslint" : "4.10.0", "eslint - config - react - app" : "^ 2.1.0", "eslint - loader" : "1.9.0", "eslint-plugin-flowType ": "2.39.1", "eslint-plugin-import": "2.8.0"," eslint-plugin-jsX-a11Y ": "5.1.1," "eslint plugin - react" : "7.4.0", "extract - text - webpack - plugin" : "3.0.2", "file - loader" : "1.1.5", "the fs - extra" : "3.0.1", "HTML - webpack - plugin" : "2.29.0", "jest" : "20.0.4", "object - the assign" : "4.4.1", "postcss - flexbugs - fixes" : "3.2.0," "postcss - loader" : "mid-atlantic moved", "promise" : "8.0.1," "raf" : "3.4.0" and "react" : "^ 16.2.0", "the react - dev - utils" : "^ 5.0.0", "the react - dom" : "^ 16.2.0", "story" : "^ 3.7.2", "style - loader" : "0.19.0", "sw - precache - webpack - plugin" : "0.11.4", "url - loader" : "0.6.2," "webpack" : "3.8.1", "webpack - dev - server" : "2.9.4", "webpack - manifest - plugin" : "1.3.2", "whatwG-fetch ": "2.0.3"}, "scripts": {//=> remove the eject command (this command is irreversible, after the first execution, remove the command) "start": "node scripts/start.js", "build": "node scripts/build.js", "test": "node scripts/test.js --env=jsdom" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx,mjs}" ], "setupFiles": [ "<rootDir>/config/polyfills.js" ], "testMatch": [ "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}", "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}" ], "testEnvironment": "node", "testURL": "http://localhost", "transform": { "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest", "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js", "^(? ! .*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$" ], "moduleNameMapper": { "^react-native$": "react-native-web" }, "moduleFileExtensions": [ "web.js", "mjs", "js", "json", "web.jsx", "jsx", "node" ] }, "babel": { "presets": [ "react-app" ] }, "eslintConfig": { "extends": "react-app" } }Copy the code

If you are familiar with webpack configuration, then you can expand WebPack yourself…

generator-z-react-cli

Yeoman Generator-based scaffolding: http://yeoman.io/

First, install Yeoman globally based on NPM

$ npm install -g yo

2, secondly, under the global installation of scaffolding

$ npm install -g generator-z-react-cli

3. Finally generate the project

$ yo z-react-cli

Directory structure

My - app | -- index. HTML / / start page (home page) | - build / / build directory, Follow the release system specification | | -- index. / / static HTML pages | | - static / / resource files released to CDN, or published to the server | | - SRC / / source directory | | - component / / component | | | - common / / common components | | | | - temp / / parent component | - Config/method/tools | | - Image / / picture resources | | - story / / react - Redux data state management | | | -- action. JSX / / data provided by the action | | | -- reducer. JSX / / used to handle the action of reducer | | | -- store. The JSX / / data manager | | - the Router / / routing | | - | Style / / Style | - the template / / compiled HTML templates | | - App. The JSX / / js entry file | | -- webpack. Config) hot / / local thermal compile | -- webpack. Config. | - buildt/issued/compile testing environment Webpack. Config. | - available online / / compile online environment for server js | -- server_hot. Js / / local server startup file. | - babelrc / / ES6 language parsing set | -- package. Json / / project dependencies | -...Copy the code

Executable command

# install dependencies
npm install

# Provide hot reloading on localhost (port 8088) : enter http://localhost:8088 to access projects under development
npm run hot

# The whole project is compiled and deployed for the test environment
npm run buildt

# The whole project is compiled and deployed for the online environment
npm run online
Copy the code

features

JSX syntax can be parsed
You can parse new ES6 syntax features
Supports LESS and SCSS preprocessors
Automatically open the browser after compiling
Separate the CSS style files separately
Support file MD5 stamp, solve the file cache problem
Support image, icon font and other resources compiled
Support browser source debugging
Implement component-level hot updates
Achieve hot replacement code, browser real-time refresh to see the effect
Separating development and production environments Separates business function code from common dependency code
.

Part preview of package. Josn file

{" name ":" my - app ", / / = > project name "version" : "1.0.0", / / = > project version "description" : "..." , / / = > project description "main" : "index. Js", / / = > project entry documents "scripts" : {/ / = > executable scripts "dev" : "node server. Js," / / "hot" = > to start the service: "Node server_hot.js", //=> project local preview "buildt": "Webpack --config webpack.config.buildt.js --progress --colors --watch -p", // "Webpack --config webpack.config.online.js --progress --colors --watch -p" //=> "Dependencies" : {/ / = > module production dependent on "Babel - polyfill" : "^ 6.23.0", "body - parser" : "^ 1.17.1", "deep - the extend" : "^ 0.4.1", "making - markdown - CSS" : "^ 2.4.0", the "immutable" : "^ 3.8.1", "isomorphic - fetch" : "^ 2.2.1", "normalize. CSS" : "^ 4.4.1," "pure render - decorator" : "^ 1.2.1", "react" : "^ 15.5.4", "the react - dom" : "^ 15.3.2", "the react - redux" : "^ 4.4.5 react", "- the router" : "^ 4.4.1", "the react - the router - dom" : "^ 4.4.1", "story" : "^ 3.6.0", "the story - immutablejs" : "^ 0.0.8 redux", "- the promise", "^ 0.5.3", "the story - thunk" : "^ 2.1.0", "sass - loader" : "^ 4.4.1"}, "devDependencies" : {/ / = > development depend on the module "autoprefixer - loader" : "^ 3.2.0", "Babel - core" : "^ 6.23.1", "Babel - loader" : "^6.2.8", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preth-ES2015 ": "^6.6.0"," babel-preth-react ": "^ 6.5.0", "Babel - preset - react - hmre" : "^ 1.1.1", "Babel - preset - stage - zero" : "^ 6.16.0", "body - parser" : "^ 1.15.1 browser - sync" ", ":" ^ 2.18.8 ", "the clean - webpack - plugin" : "^ 0.1.16", "CSS - loader" : "^ 0.23.1", "express" : "^ 4.14.0 extract -", "text - webpack - plugin" : "^" 1.0.1, file - "loader" : "^ 0.8.5", "HTML - webpack - plugin" : "^ 2.22.0 HTTP proxy -", "middleware" : "^ 0.17.3", "JSX - loader" : "^ 0.13.2", "less" : "^ 2.6.1", "less - loader" : "^ 2.2.3", "node - sass" : "^ 3.11.3", "the react - hot - loader" : "^ 1.3.1", "the react - transform - catch - errors" : "^ 1.0.2," "the react - transform - HMR" : "^ 1.0.4", "redbox - react" : "^ 1.3.3", "sass" : "^ 0.5.0", "sass - loader" : "^ 4.0.2 style -", "loader" : "^ 0.13.1", "url - loader" : "^ 0.5.7", "webpack" : "^ 1.13.0", "webpack - dev - middleware" : "^ 1.8.4 webpack - dev -", "server" : "1.14.1", "webpack - hot - middleware" : "^ 2.13.2"}}Copy the code

The scaffolding provides a lot more functionality than create-React-app, and you can choose from it as you like.

Between you (#^.^#)

To learn more front knowledge, free download some essence of front-end video (about ES6 / Vue/React, etc.), you can visit: http://www.zhufengpeixun.cn/videoCourse/index.html

A bit of research on React scaffolding

Related Posts

Dart needs a solid foundation to fly high

Record the process of exporting Excel from VUE2.0 Element EL-Table (multi-level table header, complex table format)

When the micro sidebar meets the micro front end