React基本语法

理解基本语法

1.The Basic workflow

• How
  • cnpm npm --> dependency management
  • webpack --> use bundler
  • Babel --> Use Compiler
  • Development Server

2. Use Create React App

nmp添加淘宝源的方法:

npm config set registry https://registry.npm.taobao.org

create-react-app github: ?

• steps

cnpm install -g create-react-app
create-react-app superset
cd superset 
npm start
# starting a server 

3. Understand the folder structure

• index.html
• index.js
• index.css
• ./src

4. understand the component basic

所有内容放在app Component里面, 必须有一个render方法，
并且返回一个div(jsx, looks like html, but it is not html)

use the practice before, not the React.createElement()

import React, {Component} from 'react';

class App extends Component{
    render(){
        return (
            <div className="App">
            <h1> hi, this is a react app</h1>
</div>
        )
}
}

export default App;

5. JSX Restrictions

• class --> className
• wrap everything into one root div

<div> ... </div>

6. Create a functional Component

大多数情况下，是一个方法，returns 一些html， jsx

import React from 'react';


// ES6 语法，不要使用以前的语法

// return some jsx
const person = () => {
    return <p>i am a person</p>
};


export default person;

import React, { Component } from 'react';
import './App.css';

import Person from './Person'

class App extends Component {
  render() {
    return (
      <div className="App" >
        <h1>Cleaver Brooks</h1>
        <p>this is the client</p>
        <Person/>
      </div>
    );
  }
}

export default App;

实现代码的复用，并且可以传入参数，实现差异化动态生成

7. Outputting Dynamic Content

const person = () => {
    return <p>i am a person, and i'm {Math.floor(Math.random()*30)} years old</p>
};

通过调用的时候传参，实现动态生成

8. Working with Props

能够动态生成不同的内容。通过传参的方式props

import React from 'react';


// ES6 语法，不要使用以前的语法

// return some jsx
const person = (props) => {
    return <p>i am {props.name}, and i'm {props.age} years old</p>
};


export default person;

class App extends Component {
  render() {
    return (
      <div className="App" >
        <h1>Cleaver Brooks</h1>
        <p>this is the client</p>
        <Person name="Max" age="28"/>
        <Person name="Zoe" age="27"/>
        <Person name="Tao" age="25"/>
        <Person name="Zhou" age="26"/>
      </div>
    );
  }
}

export default App;

9. Understanding the Children Property

children 可以是任何内容，包括react component

anything between the

// return some jsx
const person = (props) => {
    return (
    <div>
        <p>i am {props.name}, and i'm {props.age} years old</p>
        <p>{props.children}</p>
    </div>
    );
};


export default person;

10. understand using state

内部参数

import React from 'react';


// ES6 语法，不要使用以前的语法

// return some jsx
const person = (props) => {

    state = {
        persons: [
            {name: 'Zhou', age: Math.floor(Math.random() * 30)},
            {name: 'Zoe', age: Math.floor(Math.random() * 30)},
            {name: 'Tao', age: Math.floor(Math.random() * 30)},
        ]
    }
    

    return (
        <div>
            <p>i am {this.state.persons[0].name}, and i'm {this.state.persons[0].age} years old</p>
            <p>i am {this.state.persons[1].name}, and i'm {this.state.persons[1].age} years old</p>
            <p>i am {this.state.persons[2].name}, and i'm {this.state.persons[2].age} years old</p>
        </div>
    );
};


export default person;

尽量使用function来return一些小的div片段

这种function只有一个目的，就是动态生成div to the dom.

11. function components vs class components

尽可能使用function components, 因为这种模式are very clear about what they will do .
this kind of component should only render something. is not allowed to change the state
of some component.

state只能由几个类型，比如containers来改变。比如app container.

大多数的function只是传入参数，然后生成一个div而已，不能改变state.

12. Passing method reference between components.

可以通过props传入mother的一个方法索引，到一个小的components中，实现

• 推荐使用这个

this.onclick.bind(this, 'data')

• 不推荐使用这个，因为可能会有性能问题

onclick = () =>this.swithNameHandler('newName')

13. Adding two ways binding

需求，根据输入的内容改名称

14. Adding styling with stylesheet

By adding a css stylesheet file

.person{
    width: 60%;
    margin: 16px auto;
    border: 1px solid #eee;
    box-shadow:0 2px 3px #ccc;
    padding: 16px;
    text-align: center;

}

15. Inline styling

add styles directly in the jsx

const style={
    backgroundColor: 'white',
    font: 'inherit',
    border: '1px solid blue',
    padding: '8px',
    cursor:'pointer'
}

style={style}