React is one of the mainstream frameworks on the front end. It started as an internal project at Facebook and was opened in May 2013. It is still the most widely used and ecological front-end framework in the world.
I’ve been using the VUE framework since I started front-end development, and the two are often compared by developers. In fact, both frameworks have their own advantages and there is no objective “best” distinction.
Recently, due to the expansion of the company’s technology stack, REACT is also needed, so I invested in the study of react family barrel. In the future, the learning content will be updated irregularly in the form of article notes, notes and project demo source will be updated to GitHub. If you want to learn react or are interested in learning React, please join us!
React scaffolding ===create-react-app
React scaffolding there are many types of react scaffolding, and this is one of the official ones. There are two installation modes:
1. Install create-react-app globally
npm install -g create-react-app
The create – react – app project name
2. Install using NPX
This is also the installation described in the official documentation, but the local Node and NPM versions are required. Node >= 8.10 and NPM >= 5.6
NPX create-react-app Project name
The installation process will be slow, taking about five minutes, because NPX calls NPM by default.
npm config set registry https://registry.npm.taobao.org
After this change, NPM and CNPM will be the same. There is no big problem for new projects, but for some projects with a lower version using CNPM will depend on the version upgrade, resulting in unexpected bugs, so people should take their time to install.
Once installed, the project structure looks like this:
Project Directory Introduction
React has a very similar project structure to the vue-CLI directory, but the react design concept is all in JS, there are no similar. Vue files.
Package. json and package-lock.json are the same as in Vue, with project execution commands, dependency information, and so on
Index.html is the final page mounted by the project, which contains a DOM with the id root
App.js is a global component entry file, similar to app.vue for vue
Index.js is a global JS entry file, similar to vue’s main.js
Two test file is to do code automation test, generally not, can be deleted.
Here comes fresh knowledge:
Serverwork. js file can be used or not according to the situation, mainly for mobile applications, the target is native APP.
There’s a new concept involved: PWA, which stands for Progressive Web App and translates as incremental enhancement of Web applications.
It is used for tasks such as offline caching, and in this case registers a service worker for the React project. That way, if you are online and you visit the site once, you will be able to access it later even without the network (using previously cached resources). Only available in production (process.env.node_env === ‘production’)
In the project’s public directory, there is a manifest.json file where you can do some configuration (icon, name, etc.). When a user generates a shortcut to a web page. It will feel like a native APP.
Use two pictures online: (source: https://segmentfault.com/a/1190000016853646)
Seeing this, I think of the trembling mobile adaptation problem……
The project on PC is not needed at present and can be deleted.
Assets, static and components should be created manually:
The above.
