Initialize the project with official scaffolding

npx react-create-app project-name
cd project-name
npm start
Copy the code

For details, see the react-cteate-app documentation so that you can run a react demo locally

Customize the configuration of the project

If you need to configure webpack yourself, you need to run the NPM run eject command. This command is not reversible and cannot be restored once run

One major challenge developers might face with eject is not been able to enjoy the future features of CRA . Another challenge with eject would be ineffecient synchronised setup across React developers working in team

The official documentation points out that this method of customization will not benefit from future CRA updates, so the official recommendation is to use react-script to define your own template. If you are interested, you can first research automatic CRA

After running package.json, there are a lot of dependencies that we don’t need to worry about for now.

The webpack.config.js file is the configuration file that we can modify to make some custom configurations

Configure the CSS preprocessing less/ SASS

Install the loader

NPM install less less-loader -d or yarn add less less-loaderCopy the code

Then modify the configuration

If you want to use SCSS, CRA has already set it up for you. You just need to install Node-sass to use it in your project

npm install node-sass -D
Copy the code

Install and configure the React -router

I’m using the react-router-dom here because it is based on the react-router, adding some of the features that are different in the browser environment. See this article for the difference between the react-router and the react-router-dom installation

npm install react-router-dom -S
Copy the code

Install status management Redux

Updated as soon as possible…

Mock data blocks

If you don’t have an existing backend, you might need to use a dummy data module, and the React project often uses Koa

npm install koa koa-router koa-body -D
Copy the code

Once the installation is complete, create a mock folder (optionally named) in the root directory of your project and create a new server.js file under that folder

//server.js
var Koa = require('koa')
var Router = require('koa-router') var app = new Koa() var router = new router ()'/api/test'.function (ctx,next){
    ctx.body = "this is a test api!"}) var homeAdData = require('./home/ad.js')
router.get('/api/homead'.function(ctx,next) { ctx.body = homeAdData }); // Start service and generate route const port = 3101 app.use(router.routes()).use(router.allowedMethods()); app.listen(port); console.log(`the server is runningin http://localhost:${port}`)
Copy the code

. Then under the root directory, we run the node/mock/server. Js can start data module, visit http://localhost:3101/api/test (port configuration)

//.home/ad.js
module.exports = [
    {
        title: '50% off summer vacation',
        img: '/static/imgs/home/Carousel/138012-20161016191639092-2000037796.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: 'Special offer abroad',
        img: '/static/imgs/home/Carousel/138012-20161016191648124-298129318.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: 'Shine the car',
        img: '/static/imgs/home/Carousel/138012-20161016191653983-1962772127.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: 'Learn the piano',
        img: '/static/imgs/home/Carousel/138012-20161016191700420-1584459466.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: 'movie',
        img: '/static/imgs/home/Carousel/138012-20161016191706733-367929553.png',
        link: 'http://www.imooc.com/wap/index'
    },
    {
        title: 'Travel Hotline',
        img: '/static/imgs/home/Carousel/138012-20161016191713186-495002222.png',
        link: 'http://www.imooc.com/wap/index'}]Copy the code

This interface is invoked through the/API /homead defined above

Set the agent

The fake data module is ready, but restricted to the same origin policy of the browser, accessing data from different ports involves cross-domain issues, which are resolved by setting up a proxy. There are many ways to set up proxies. One of the most effective ways to set up proxies is through HTTP-proxy-middleware, which is officially recommended by RECAT. You do this by downloading http-proxy-Middleware to your development dependency first

npm istall http-proxy-middleware -S
Copy the code

Then add a setupproxy.js file in the SRC directory

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:3101/' }));
  // If the project is already wired, target will fill in the address of the background interface on the line
};
Copy the code