写在前面的话：

最近在做从vue=>react的迁移性学习，然后找到了阮一峰老师在15年写的《React入门实例教程》，讲的内容丝丝入扣，里面所透露的思想也让我收获颇多。

但是毕竟15年的文章，所用的语法在我看来有点打眼，所以做了一个小小的语法迁移，希望能对大家有帮助

安装

考虑到一些跟我一样刚开始学习react的朋友，所以还是写一下如何快速启动一个项目进行练习

关于react的安装不再多表，因为想快速的开始练习。我用的是create-react-APP这个脚手架帮助安装

npm install -g create-react-app 安装脚手架
create-react-APP ryf-react 创建项目
cd ../ 进入项目上一层
yarn start 启动项目

因为是根据阮一峰老师的项目做基础的，所以取名ryf-react

开始

进入app.js文件

react能将模板里面的东西转成html，并插入指定的 DOM 节点。就是可以用jsx（它允许 HTML 与 JavaScript 的混写）在js里面写html，在app.js的render(){return()}的return()就可以写jsx了。

这只是我的口语化表达方便理解，真正的内容还是请移步阮老师的文章。

当然业务不可能都在app.js里面实现但是这不妨碍我们在app.js里面做一些关于react迁移性学习的练手

在强调一遍，因为只是重构了语法，本质没有变，所以没有重新解释这些demo，想看里面的语法请移步阮老师的文章

1.render demo

class App extends Component {
  render() {
    const names = ['Alice','Emily','kate']
    return (
      <div className="App">
        <ul>
          {
            names.map((name,index)=>{
              return(
                <div key={index}>
                  hello,{name}
                </div>
              )
            })
          }
        </ul>
      </div>
    );
  }
}

2.组件demo

class HelloMessage extends Component {
  render () {
    return <h1>Hello {this.props.name}</h1>
  }
}
class App extends Component {
  render() {
    const arr = [
      <h1 key="1">Hello world</h1>,
      <h1 key="2">React is awesome</h1>,
    ]
    return (
      <div className="App">
      <HelloMessage name="john"></HelloMessage>
        <ul>
          {
            arr
          }
        </ul>
      </div>
    );
  }
}

3.children demo

在vue里面的slot在react里面就被叫children

class NoteList extends Component {
  render () {
    return(
      <ol>
        {this.props.children.map((child,index) => <li key={index}>{child}</li>) }
      </ol>
    )
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <NoteList>
          <span>hello</span>
          <span>world</span>
        </NoteList>
      </div>
    );
  }
}

4.检验参数 demo

react参数检测可以用一个包来解决，yarn add prop-types

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './App.css';


class MyTitle extends Component {
    render() {
        return <h1>{this.props.title}</h1>
    }
}

MyTitle.propTypes = {
    title: PropTypes.string
};
class App extends Component {
  render() {
    const data = 123
    return (
      <div className="App">
      <MyTitle title={data}/>
      </div>
    );
  }
}

5.react状态改变 demo

react拥有一个初始状态，通过事件触发可以改变状态

import './App.css';
class LikeButton extends Component{
  state = {
    liked: false
  }
  handleClick (){
    console.log(this)
  }
  render () {
    const text = this.state.Liked? 'like': 'don\'t like'
    return (
      <p onClick={() => {this.handleClick()}}>
        You { text } this click to toggle
      </p>
    )
  }
}
class App extends Component {
  handleClick(){
    this.refs.myTextInput.focus()
  }
  render() {
    return (
      <div className="App">
        <input type="text" ref="myTextInput"/>
        <input type="button" ref="focus the text input" onClick={this.handleClick.bind(this)}/>
      </div>
    );
  }
}

6.双向绑定 demo

react不拥有vue里面的v-model，但是可以手动实现

class App extends Component {
  state ={
    value:'Hello!'
  }
  handleChange(event) {
    this.setState({
      value:event.target.value
  });
}
  render() {
    const value = this.state.value
    return (
      <div className="App">
       <div>
         <input type="text" value={value} onChange={this.handleChange.bind(this)}/>
         <p>{value}</p>
       </div>
      </div>
    );
  }
}

7.生命周期 demo

class Hello extends Component {
    state = {
        opacity: 1.0
    }
    componentDidMount() {
        setInterval(() => {
            let opacity = this.state.opacity;
            opacity -= 0.05;
            if (opacity < 0.1) {
                opacity = 1;
            }
            this.setState({
                opacity
            })
        }, 100)
    }
    render() {
        return (
            <div style={{ opacity: this.state.opacity }}>
                Hello {this.props.name}
            </div>
        )
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <Hello name="world" />
            </div>
        );
    }
}

8.ajax 请求 demo

class UserGist extends Component {
    state = {
        username: '',
        lastGisUrl: ''
    }
    render () {
        return (
            <div>
                {this.state.username}'s last gist is <a href={this.state.lastGisUrl}>here</a>
            </div>
        )
    }
    componentDidMount() {
        fetch(this.props.source)
        .then(data => data.json())
        .then(data =>{
            const lastGist = data[0];
            this.setState({
                username: lastGist.owner.login,
                lastGisUrl: lastGist.html_url
            })
        })
    }
}

class App extends Component {
    render() {
        return (
            <div className="App">
                <UserGist source="https://api.github.com/users/octocat/gists" />
            </div>
        );
    }
}

总结

react的门槛比vue来得高，如何做好迁移性学习可能是简约时间的一个好方法。希望对大家react的学习有一点帮助，有错误的地方也欢迎大家告诉我，共同进步~

附源码地址

再附阮一峰老师文章地址

React-Demo 部分重构