react 入门教程~

1.安装

1.1 创建一个全新的应用

//全局安装
npm install -g create-react-app
//创建新应用 my-app是文件夹名称
create-react-app my-app

cd my-app
npm start

1.2 加入到存入的项目中

yarn

yarn init
yarn add react react-dom

npm

npm init
npm install --save react react-dom

1.3 使用cdn

<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

2.'hello world' domo

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('app')
);

3.介绍jsx

import React from "react";
import ReactDOM from "react-dom";

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('app')
);

3.1 上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

Hello, Harper Perez!

3.2 JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

4.Rendering

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

5.组件和属性（Components and Props）

5.1.定义一个组件最简单的方式是使用JavaScript函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

你也可以使用 ES6 class 来定义一个组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

1.我们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
2.React将{name: 'Sara'}作为props传入并调用Welcome组件。
3.Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4.React DOM将DOM更新为<h1>Hello, Sara</h1>。

5.2 所有的React组件必须像纯函数那样使用它们的props

6.State & 生命周期

6.1 state改变视图跟着改变

6.2 将生命周期方法添加到类中

Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  //挂载前
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  //挂载后
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('app')
);

6.3 state使用注意：

1.不要直接更新状态
2.状态更新可能是异步的
3.状态更新合并

7.事件

1.我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

this.handleClick = this.handleClick.bind(this);

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('app')
);

8.条件判断

1.元素变量
2.与运算符 &&
3.三目运算符
4.阻止组件渲染

8.1 像在 JavaScript 中一样，你可以根据团队的习惯选择更易读的方式。还要记住如果条件变得过于复杂，可能就是提取组件的好时机了。

9.列表 & Keys

9.1 渲染多样的组件 vs 基础列表组件(加上key)key唯一

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

10.表单

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '543543',
      address : '543534',
      select : 'lime'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleChangeAddress = this.handleChangeAddress.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSelect(event){
    this.setState({select: event.target.value});
  }

  handleChangeAddress(event){
    this.setState({address: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value + ',address: ' + this.state.address);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
          address：
          <textarea value={this.state.address} onChange={this.handleChangeAddress} />
          select: 
          <select value={this.state.select} onChange={this.handleSelect}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm  />,
  document.getElementById('app')
);

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '543543',
      address : '543534',
      select : 'lime'
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  //多个一起
  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
    
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value + ',address: ' + this.state.address);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={this.state.name} onChange={this.handleChange} />
          address：
          <textarea name="address" value={this.state.address} onChange={this.handleChange} />
          select: 
          <select name="select" value={this.state.select} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm  />,
  document.getElementById('app')
);