ブログ
9102年ですが、まだReactができない場合は、この文書でReactを迅速に理解してほしいです.jsの基礎知識.
プロジェクトの作成
create-react-appツールを使用して、React SPAをすばやく作成します.

#     
yarn create react-app my-app

cd my-app

#          
yarn start

プロジェクトの初期構造:

my-app/
  README.md
  node_modules/
  package.json
  public/  #          
    index.html #        
    favicon.ico #      
    mainifest.json #        
  src/ #    
    App.css
    App.js
    App.test.js
    index.css
    index.js #     
    logo.svg

Hello React

// src/index.js     
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//         id   root   dom  
ReactDOM.render(, document.getElementById('root'));

// src/app.js    
import React, { Component } from 'react';
//      
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: 'Hello React'
    }
  }
  render() {
    // JSX   
    return (
      

        
{ this.state.msg }
      
    );
  }
}
export default App;

最終的にこのルートコンポーネントは、ページにHello Reactのh 1タイトルが表示されます.
JSX
前例でルートコンポーネントを書く場合、render関数ではJSXに言及していますが、簡単に見るとjsにhtmlを書くことができ、React.createElementでDomを作成することを簡略化し、BabelはJSXを翻訳します.
JSXでは以下の点に注意してください.

<>はhtml解析{}としてjs解析とする.

classはclassNameに置き換えられ、forはhtmlForに置き換えられます.

コンポーネントには、最外層のルート要素が包まれていなければならない.ルート要素が欲しくなければを使用することができ、import { Fragment } from 'react'を導入する必要がある.

ToDoListアプリケーションを書く
書く前にToDoListのニーズを明確にします.

入力ボックス入力すること;

追加ボタン追加入力ボックスのイベントをリストに追加する.

現在追加されているイベントを示すリスト.

リストのイベントをクリックして完了を示すと、対応するイベントが削除される.

Todoコンポーネント
まずTodoという名前のコンポーネントを書き、Appルートコンポーネントで呼び出せばいいです.
App.jsでTodoコンポーネントを呼び出します.

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

class App extends Component {
  render() { 
    return ( 
      
    );
  }
}
 
export default App;

カスタムコンポーネントを呼び出すときは、オリジナルhtmlコンポーネントのように<>を直接使用します.カスタムコンポーネントは大文字で始まる必要があります.

// Todo.js
import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      inputVal: '  ',
      list: ['   ', '    ']
    };
    this.inputChange = this.inputChange.bind(this);
    this.addItem = this.addItem.bind(this);
    this.delItem = this.delItem.bind(this);
  }
  render() {
    return (
      
        

          todo: 
           this.iptRef = iptRef}
            value={this.state.inputVal}
            onChange={this.inputChange}
          />
          +
        
        

          {
            this.state.list.map((item, idx) => {
              return (
                
              )
            })
          }
        
      
     );
  }
  inputChange() {
    this.setState({
      inputVal: this.iptRef.value
    })
  }
  addItem() {
    this.setState({
      list: [...this.state.list, this.state.inputVal]
    })
  }
  delItem(idx) {
    const list = this.state.list;
    list.splice(idx, 1);
    this.setState({
      list
    })
  }
}
 
export default Todo;

reactおよびreactは依然として導入する.コンポーネントを作成し、classを使用してコンポーネントを作成します.constructorではsuperによって親コンポーネントからのデータを継承し、stateによってコンポーネント内部のデータを定義します.render関数では{}でjsを使用してhtmlにデータとイベントを動的にバインドし、バインドされたイベントもclassで定義し、bindでthis指向を変更する必要があります.
ここでrefを使用して入力ボックスノードをthis.iptRefに取得して保存し、onchangeイベントでバインドされたデータinputValを変更する.ビューの更新を開始するには、setStateメソッドを呼び出す必要があります.
ulでjsのmapメソッドを直接使用してstate.listを巡回して展示リストを生成し、リストの各項目を新しいサブコンポーネントTodoItemとして抽出し、サブコンポーネントに必要なデータidx、content、およびメソッドdelItemを彼に渡す.注意が必要な場合は、生成されたコンポーネントを巡回してkeyプロパティを追加しないと警告されます.
TodoItemコンポーネント

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class TodoItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.handleItemClick = this.handleItemClick.bind(this);
  }
  render() {
    return (
      

        {`${this.props.idx + 1}. ${this.props.content}`}
      
     );
  }
  handleItemClick() {
    this.props.delItem && this.props.delItem(this.props.idx);
  }
}

TodoItem.propTypes = {
  idx: PropTypes.number.isRequired,
  content: PropTypes.string.isRequired,
  delItem: PropTypes.func
}
 
export default TodoItem;

サブコンポーネントがpropsを介して親コンポーネントから直接渡されるデータには、メソッドが含まれます.サブコンポーネントは、親コンポーネントから送信されたデータを直接変更することはできません.そのため、親コンポーネントを呼び出す方法を変更する必要があります.たとえば、ここでクリックして削除すると、親コンポーネントを呼び出すdelItemメソッドになります.
ここでは、prop-typesを導入して、サブコンポーネントがデータを送信するタイプチェックを支援し、isRequiredを追加して、データが送信されなければならないことを示すこともでき、この制限に従ってサブコンポーネントデータに送信されなければ、エラーメッセージが表示されます.
今、この需要は基本的に完成しました.
ライフサイクル
reactの各コンポーネントにはライフサイクル関数があり、コンポーネントがレンダリングを開始し、破棄に更新されるたびに、対応するライフサイクル関数が実行されます.
ライフサイクル関数スペクトル
上のリンクでは、vueのmountedに似た最も一般的なcomponentDidMountの実行順序が表示されます.ここでは、コンポーネントの更新前にブロックでき、return trueでrender関数が実行されるshouldComponentUpdateが特殊です.
前述のToDoListプログラムでは、サブコンポーネントのrender関数にconsoleを1つ追加する.logでは、入力ボックスの値が変化するたびにすべてのコンポーネントのレンダリングがトリガーされることがわかります.したがって、shouldComponentUpdateを使用してブロックできます.
TodoItemコンポーネントに追加:

shouldComponentUpdate(nextProps, nextState) {nextProps, nextState);
  return nextProps.content !== this.props.content;
}

contentが更新された場合にのみ次のrender関数が実行されることを示します.
まとめ
これまでreactについて基本的な理解がありました.