何千何万と言っても、直接手を出したほうがいいです.reactの公式文書を読むことを勉強するために悩んでいますか.私と一緒に手を出して、実践から理論を悟りましょう.ps:このシリーズの文章は初心者にしか向いていません(しかしjsの基礎がない特にthisが問題を指しているのは向いていません.これははっきりしていません.基本的にはできません).本文はシリーズの文章のために私のブログに先発しました.https://www.fakin.cn
Reactのインストール
これは言わないで、簡単すぎます.

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

JSX
ReactはJavaScriptの代わりにJSXを使用します.XMLのJavaScript構文拡張に似ているように見えます.

const fakin = <h1>fakin</h1>

どうせ覚えておいてください.JSXはReactの中であちこちにあります(もちろんJSXも使わないし、ES 6を使わなくてもいいですが、JSXとES 6のほうが便利です).
コンポーネント
3つのフレームワークのコンポーネントは重要です.ReactとVueは異なり、Vueには.vueファイルがあります.Reactは関数またはクラスによってコンポーネントを定義します.以下に示します.

function Fakin(props) {
  return <h1>fakin</h1>
}

または

class Fakin extends React.Component {
  render() {
    return 
fakin
  }
}

State
ステータスは、this.stateで定義します(実は個人的にはデータと呼んだほうがいいと思います)

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        }
    }
    //xxxx
}

やあ、つらいですね.this.stateでrenderレンダリングのデータを修正することができます.この时、renderに何を聞いたのか、よく聞いたかもしれません.

render() {
	return return (<div id="box"></div>)
}

単純todoList
もしあなたが一定のjs基礎を持っていたり、他のmvmフレームワークの基礎を持っていたりしたら、これらのものは簡単です.では、簡単なtodoListを実現しましょう.

import React, {Component} from 'react';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            inputValue: ''
        }
    }
    handleBtnClick() {
        if (!this.state.inputValue) {
            return
        }
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }
    handleChange(event) {
        this.setState({
            inputValue: event.target.value
        })
    }
    handleItemClick(index) {
        let list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list
        })
    }
    render() {
        return (
            <div id="box">
                <input onChange={this.handleChange.bind(this)} value={this.state.inputValue} className="input"/>
                <button onClick={this.handleBtnClick.bind(this)} className="btn">add</button>
                <ul>
                    {
                        this.state.list.map((item, index) => {
                            return <li key={index}>{item}
                                <button onClick={this.handleItemClick.bind(this, index)} className="btnDel">X</button>
                            </li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default App;

第1章はこれで終わりますが、reactの上手さは簡単です.次の章ではreactのコンポーネントのライフサイクルについてお話しします.