4. Front-end based on react, backend based on. NET core2.0 Development Road (4) front-end packaging, compiling, routing, model, service

1. A Brief introduction

Learning react, the first thing to learn is JavaScript, then ES6, then jsx, usually if there is a JavaScript base, very fast, but really to build a front-end engineering project, there are many pits

Take care of the above, and get to know the virtual DOM so you can get to know react faster.

State management and routing are based on DVA (DVA based react-router,redux), so it is played according to the name and rules of DVA. It is advisable to study while practicing. Because DVA is very friendly to novices, it is recommended to use it to get started.

2. The Journey of the Mind (pit road history)

The first pit, basically very simple, is to install node, then initialize the project via NPM and then create your first project through dva-cli , which I started with when I initialized the project with DVA-CLI.

The second pit, I need to give up DVA comes with the Roadhog plugin, using webpack, this time configuration webpack is a deep pit

The third pit, this pit is Webpack brought, simply is a variety of loader, you will find that when you fill in the front of a pit, then there will be a pit for you to fill, right, is Babel! Css-loader,less-loader here is not to say, relatively simple.

We focus on Babel,babel presets and plugins, if it is react, you need to Babel compile es2015,react, and then usually need a few plugins packages, such as the ' ... ' syntax, you need a special package to compile him. Simply put, when you use the Webpack Command Packager, the problem comes up one by one, and then you need to solve him by querying the official documentation.

The fourth pit, the service side rendering pit, when you need to do this, you will find that you can check the article, and can not give you to solve the actual problem (article is too old), you need GitHub to find someone else's solution, you need to go to the official documents may exist in the corner of the official instance (or may not), When you solve this problem, you will find that your own React-router version is not up-to-date, and then you will find that the latest version of the direct rewrite! Not backwards compatible.

Then this pit will let you learn how to build node, how to use node's server framework such as Express, and then how node logs the session and so on.

Fifth pit, how to intercept requests at the node layer and handle them.

All right, we're going to go through all the knowledge points in series.

Dva-cli->dva->react->webpack->babel->node->express

3. Get a Todo, understand the routing, model, service

Build a project first through DVA-CLI

And then

CD LEARNREACTNPM Run start

Start successfully!

Let's take a look at the project composition

Entry file Index.js

Routing Entry Router.js

Routing folder routes

Model folder Models

Service Folder Services

Simply write the query data, OK, we start

If you do not need to do service-side rendering, then, Webpack,mock and the like do not add their own, directly with the Roadhog, created by the time you have been configured to use.

The first step is to create the service and refer to it in the model

Path: Services/home.js

Import request from '.. /utils/request 'function  gethomeinfo () {  return request ('/api/gethomeinfo ') );}

and change the request.js.

Path: Utils/request

default function request (URL, options) {  return  Fetch (URL, Options)    . Then (checkstatus)    . Then ( Parsejson)    = {      return   {data};    })    . Catch (Err = ({err}));}

Step two, build the Model (store) and inject it in

Path: Models/home.js

Import {Gethomeinfo} from '. /services/home '; exportdefault{namespace:' Home ', state: {homeinfo: []}, Subscriptions: {Setup ({dispatch, history}) {//Eslint-disable-line}, the effects: {*gethomeinfo ({payload}, {call, put}) {//Eslint-disable-lineConst RESULT =yield Call (gethomeinfo, payload); const {Data}=result; Yield put ({type:' Sethomeinfo ', payload:data.data}); },}, Reducers: {sethomeinfo (state, {payload}) {return{... state, homeinfo:payload}; },  },};

Then reference the model:

Path: Src/index.js

Import dva from ' DVA '; Import'./index.css '; import Home from‘.. /src/models/home ';//1. InitializeConst APP =dva ();//2. Plugins//app.use ({});//3. Model//App.model (Require ('./models/example '));App.model (home);//4. RouterApp.router (Require ('./router ')));//5. StartApp.start (' #root ');

Step three, create the route

Path: Routes/home.js

Import React, {Component} from ' React '; import {connect} from' DVA 'class Home extends Component {componentdidmount () {const {dispatch}= This. Props; dispatch ({type: ' Home/gethomeinfo ' }); } render () {const { homeinfo }= This. Props.home; return<div>{homeinfo.map (item, index)= {                return<div key={item.key}>{Item.name}</div>            })}        </div>}}exportdefaultConnect (({home}) = ({home})) (home);

Fourth, add mock intercept request

Path:. roadhogrc.mock.js

default {    ' get/api/gethomeinfo ': (req, res) = {        Res.json ({            success:true,            data: [                {key : 1, Name: ' Nick ', age:19},                {key:2, Name: ' Tony ', age:20},                {key:3, Name: ' Lili ', age:21},                {key: 4, Name: ' Lilei ', age:22   },            ],}        );    };

Finally run up to see:

OK, success, this is a simple query, query walk through, and other operations are stacked wood.

The direction of the data is clear.

Router->model (effects)->service->api->result->model (reducers)->router.

Again, some of the keywords that appear inside:

Class, extends, Export,import, Componentdidmount,render

The first 4 are ES6 syntax, class, extends base, export and import imports are modular things, componentdidmount is react life cycle, Render is rendered, All state changes trigger render, whether you are this.setstate () or dispatch modifies the state in the model.

Finally, pack

NPM Run Build

The Dist folder is a packaged file that can be deployed directly on IIS

This article is written so much bar ~.

4. Front-end based on react, backend based on. NET core2.0 Development Road (4) front-end packaging, compiling, routing, model, service