React learning route

1. What is the React?

React JAVASCRIPT is used to build a library user interface.
React mainly used to build the UI, many people think React is in MVC V (view).
React internal project originated in Facebook, and Instagram to set up a website and open in May 2013.
React has a high performance, code logic is very simple, more and more people have started to pay attention and use it.

2, React features:

       1. Declare design -React declarative paradigm, you can easily describe the application.
       2. Efficient -React the DOM by simulation, to minimize interaction with the DOM.
       3. Flexible -React can work well with known library or framework.
       4.JSX - JSX is an extension of JavaScript syntax. React development does not necessarily use the JSX, but we recommend using it.
       The assembly - through React building element, such that the code easier to reuse obtained can be well applied in the development of large projects.
       6. The one-way data flow response - React achieve a unidirectional response data stream, thereby reducing code duplication, which is why it is simpler than the traditional data binding.

3, React components:

We can use the function defines a component:

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

ES6 class may also be used to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

4, React three attributes:

4.1.1, props property

react said unidirectional data flow value is said props, according to this characteristic it also has a role: communications between components. props itself is immutable, but there is a situation that looks like a variable, that is the parent component of the state as props subassembly, when state change parent component, sub-assembly of props also followed the change, in fact, it still follows this a law of: props can not be changed.

4.1.2, props property features:

1. Each component object will have props (properties shorthand) properties

2. The component tag all the attributes are stored in the props

3. Internal read a property value: this.props.propertyName

4. Role: outward transfer of data from the module assembly by tag attributes (read only read only)

The property value of the props and the need to limit the type of restriction

Code Example:

Use the function components:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    //使用函数组件
    function User(props){
        //在组件中获取props属性值
    	return <div>{props.name}，{props.age}</div>
    }
    
    //定义数据
    const person ={
        name:'张三',
        age:20,
        sex:'男'
    }
    
    ReactDOM.render(
        <User {...person}></User>
    , document.getElementById('root'));

Use class components:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    //使用class组件
    class User extends React.Component{
        render(){
            return (
        <div>{this.props.name}--{this.props.age}</div>
            );
        }
    }
    
    //数据
    const person ={
        name:'张三',
        age:20,
        sex:'男'
    }
    
    ReactDOM.render(
        <User {...person}></User>
    , document.getElementById('root'));

4.2, state property

React the assembly as a state machine (State Machines). By interacting with the user, to achieve different states, then render the UI, so that the user interface and data consistency.
React years, simply update the state assembly, then re-render the user interface based on the new state (not to operate DOM).

Code Example:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Person extends React.Component{
    	//构造方法
        constructor(){
            super();
            this.state = {
                name: 'tom'
            }
        }
    
        render(){
            //state属性是可修改的
            this.state.name = 'jack';
            return (
            <h1>{this.state.name}</h1>
            );
        }
    }
    
    ReactDOM.render(<Person />, document.getElementById('root'));

Set status: setState

setState(object nextState[, function callback])

This.state internal components can not be modified by state, because the state replaces the setState call () after.

setState () does not change this.state immediately, but will soon create a state treatment. setState () is not necessarily synchronized, in order to enhance performance would React batch execution state and DOM rendering.

setState () always triggers a redraw assembly, achieved unless a number of conditions rendering logic in shouldComponentUpdate () in

4.3 difference, props and state property

Data props in the outside world are passed over;
The state data are private component; (to get data back through Ajax, are generally private data)
Data props are read-only and can not be reassigned;
The state data are readable and writable;
Subassembly can communicate data The props;

4.4, refs property

React in the data stream, the only way of communicating by props attribute Sons assembly; If you want to modify the sub-assembly, by modifying the properties of the parent component, the updated value reaches subassembly props attribute, updated component to a re-rendering of the view. However, some scenes a real need to get a DOM element to interact, such as the focus of the text box, triggering mandatory animation

DOM elements are added to the property ref
Component added to the class attribute ref

Code Example:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Person extends React.Component{
    
        constructor(){
            super();
            this.handleClick = this.handleClick.bind(this);
        }
    
        //点击事件
        handleClick(){
            // 使用原生的 DOM API 获取焦点
            this.refs.myInput.focus();
        }
    
        render(){
            return (
                <div>
                    <input type="text" ref="myInput" />
                    <input
                        type="button"
                        value="点我输入框获取焦点"
                        onClick={this.handleClick}/>
                </div>
            );    
        }
    }
    
    ReactDOM.render(<Person />, document.getElementById('root'));

5, React route:

5.1, the installation react-router-dom

In the project the command line, execute
cnpm install react-router-dom -S
downloaded to rely on the production environment.

In the assembly to acquire the react-router-dom way of built-in module by deconstructing the object, in the assembly, the internal components introduced on demand, be used in the page:

HashRouter represents a root container route, all routes related to the future of things, must be wrapped in HashRouter inside, and a Web site, only need to use once HashRouter like;
Route represents a routing rule on the Route, there are two more important attributes, path, component
Link represents a linking route

import {HashRouter,Route,Link} from ‘react-router-dom’

Code Example:

    render(){
            return (
                <HashRouter>
                    <div>
                        <h1>这是网站的根目录</h1>
                        <hr />
                        <Link to="/home">首页</Link>&nbsp;&nbsp;
                        <Link to="/movie/">电影</Link>&nbsp;&nbsp;
                        <Link to="/about">关于</Link>
                        <hr />
                        <Route path="/home" component={Home} ></Route><hr/>
                        <Route path="/movie" component={Movie} exact></Route><hr/>
                        <Route path="/about" component={About}></Route><hr/>
                    </div>
                </HashRouter>
            );
        }

When using HashRouter wrapped up the root component elements of APP, the site has enabled routing, and in a HashRouter, you can only have only one root element. In a Web site, only you need to use the only time on the trip.

Route label creation, that is, routing rules, which represents the path to be matched routing, component represents the component to show. Route has two identities: 1 It is a route matching rule; 2 it is a placeholder to indicate future assembly to be put into this matching position.

Needs attention

Route address is the path component / beginning, configure component properties, is a component of the display, this property may not be capitalized
Route tag assembly may be used single or double, / single-label at the end need not be written ditag among other things
Address Link to the property is / beginning, Link in page rendering is a label

6、React UI：

6.1, React Material-UI Introduction

React component for faster and easier web development. You can also create your own design system, or start from the Material Design.

Material-UI is a license to use MIT open source projects. Because these may be totally awesome backers, the project continued in the development

6.2, React-Bootstrap Introduction

React-Bootstrap front end is reusable component library. Style component depends on bootstrap. Twitter Bootstrap with a consistent look and feel, but more refreshing code obtained by React.js Facebook framework

6.3, ant-design Introduction

Ants Ant Design Framework (ant design)
antd are React UI component library based on Ant Design system design, mainly for research and development enterprise in the background Product
Features: Out of the box React high quality components.

7、Redux：

7.1 concept:

redux do unified management of data components to achieve transfer value problem when multi-component development method

7.2, implementation steps

7.2.1, the installation Redux

npm install redux

7.2.2, the introduction of related components

1, action of the components to pass the value store dispatch (parameter)

2、store const store = createStore(reducer)

Method dispatch () action parameters passed to the reducer
Subscribe () listen for changes in the data store
getState () Gets the value of the current state of the object store

3、reducer (state,action)=>{ return state }

yiyiyiyi_

Released seven original articles · won praise 11 · views 443

Private letter concerns