Implementation of React single page application method _javascript skills

First, before you learn this framework, you need to know something about the following:

1. Native JS base

2.CSS Foundation

3.NPM Package Management Basics

4.webpack Build Project Foundation

5.ES6 specification

The above five knowledge points are also the predecessors that are required to learn about other front-end frameworks.

JS and CSS is not much to say, NPM is currently the most advocated and dominant package management tools, but also with Bower or other tools of the children's shoes can be considered. And Webpack as a new generation of packaging tools, has been in the front-end packaging tools, and browserify compared to have a great advantage. As for the ES6 specification, although now the mainstream browser is not compatible, but can use Babel converter to convert.

In combination with some of the other mainstream front-end frameworks, I personally think there are three basic things about building a single page application: components, routing, and state management . Then I will introduce react based on these three, of course, it will be interspersed with some additional knowledge points.

Component

React's component authoring and invocation relies primarily on ES6 modularity and JSX syntax, as follows is an example:

Main.js
import react from ' react '
import {render} from ' React-dom '
import mycomponent from './COMPONENT.J S '
import './main.css '


///main assembly
class Mydemo extends React.component {
  render () {return
    (
      < div classname= "box" >
        <mycomponent/>
      </div>
    )
  }

render (
  <mydemo/>
), document.getElementById (' app ')


//component.js/

subassembly
import react from ' React '

export default class MyComponent extends React.component {
  render () {return
    (
      <div>< C25/><p> this is a component! </p>
      </div>
    )
  }


//main.css
. Box {
  width:100%
}

Compared to the Vue.js framework, I personally think that the react component is not easy to write the Vue to the comfort of the component CSS style or out of the external components, maintenance is not very convenient.

From this example we can see the features of React's virtual dom and JSX. Compared to other frameworks, the react virtual DOM not only improves the performance of the page, but also prevents XSS attacks. The specific principles of virtual Dom are not introduced here

As for the JSX syntax is a JS syntax sugar, we can use this syntactic sugar to facilitate the implementation of a number of functions, where jsx the syntax of the class XML into pure javascript,xml elements, attributes and child nodes are converted to react.createelement parameters. Similar to the JS grammar sugar and typescript and so on.

Routing

The front-end routing mechanism is one of the most important part of building a single page application (SPA) at present. Through the front-end routing we can optimize the user experience, do not need every time from the server to get all the data, so as to quickly show the page to the user.

React routing relies on the react Router. react Router keeps the UI synchronized with the URL. It has a simple API with powerful features such as code buffer loading, dynamic routing matching, and establishing the correct location transition process.

The following is an example of a react route:

import React, {Component} from 'react'
import {render} from 'react-dom'
import {Router, Route, IndexRoute, Link, browserHistory} from 'react-router'

const ACTIVE = {color: 'red'}

class App extends Component {
   render () {
     return (
       <div>
         <h1> My routing </ h1>
         <ul>
           <li> <Link to = "/" activeStyle = {ACTIVE}> Home </ Link> </ li>
           <li> <Link to = "/ users" activeStyle = {ACTIVE}> User page </ Link> </ li>
         </ ul>
         {this.props.children}
       </ div>
     )
   }
}

class Index extends React.Component {
   render () {
     return (
       <div>
         <h2> Index! </ h2>
       </ div>
     )
   }
}

class Users extends React.Component {
   render () {
     return (
       <div>
         <h2> Users </ h2>
       </ div>
     )
   }
}

render ((
   <Router history = {browserHistory}>
     <Route path = "/" component = {App}>
       <IndexRoute component = {Index} />
       <Route path = "users" component = {Users}> </ Route>
     </ Route>
   </ Router>
), document.getElementById ('app')) 

Only one of the react routing notation is listed here. The syntax for react routing is more straightforward than other frameworks.

State management

State management is not a single page application necessary, it can help us to manage the changes of each state, so that the whole project process is clear and maintainable. React implementation of state management can use the official recommended redux.

Redux uses a strict one-way data stream. The whole state of the application is stored in an object tree, and the object tree exists only in the single store.

Project instance

Here I wrote a single page website with react, the page is as follows:

Fetch

Because I used the fetch for AJAX interaction in the above example, here's a quick introduction to the fetch.
We can use the fetch as the next-generation Ajax technology, which employs the current popular Promise approach.

With the fetch we can write Ajax for data interaction:

Get Data method
  FETCHFN = () => {
    fetch ('.. /.. /data.json ')
      . Then (res) => {console.log (res.status); return Res.json ()})
      . Then ((data) => { This.setstate ({lists:data.listData})})
      . catch ((E) => {console.log (e.message)})
  }

Summarize

Learning a framework the most important thing is not to learn its technology, but to learn the solution to the problem. By react this framework of learning, you can explore a new mode of thinking from its unique new features. Only when the thinking level has been expanded can you soar freely in the sea of the front end. I hope this article will help you to learn react.