反応 - シンプルなプロジェクトの戦闘を

まず、プロジェクトを作成します

npx create-react-app myTest

作成したら、このプロジェクトは、次の主要持ちpublicとsrc前者が最も重要であり、静的リソースファイル、保存するために使用され、文書のindex.htmlすべてがのコードに反応格納するために使用された文書、
プロジェクトの実施に切り替えた後に良いを構築するプロジェクトをnpm startコマンドは、ローカルでできるlocalhost:3000プロジェクトウィンドウを開きます

第二に、app.jsを変更

実行が完了した後、我々は結果ページを見ることができる
ファイルindex.jsメインエントランスでindex.jsとapp.jsファイルを、持ってsrcフォルダを開き、、app.jsページ表示が推奨され、今のアプリに変更し、部品を反応させます。 JSのものは内部の書き込みHello React !、その後、確認するためにページを保存する
2つの形式で書くコードがJSXと非JSX文法を持っています
JSX

const h1 = <h1 class="app-title">Hello React !</h1>

無JSX

const h1 = React.createElement('h1', {className: 'app-title'}, 'Hello React !')

第三に、Table.jsを作成

今新しい作成しtable.js、ファイルをテーブルコンポーネントを設計するために、そしてこのコンポーネントを追加するapp.jsにはコンポーネント
の新しい組立注
1 Component実行する必要はありません、導入構成要素としてReact.Component
、要素がなければならない2、クラスの継承をrender()メソッド内で返さ
3、スタイル書き込みのクラス名はクラス名ではなくクラスである
4、コンポーネントにエクスポートしてくださいexport default componentName
5、コンポーネント名を反応大文字で開始する必要があります
それはrenturnラベルがに包まれなければならないと言うことです、2つのルート要素を返すことができない、唯一のルート要素を返すことができ、6 2つの同様のラベルすることはできませんルートタグ

import React, { Component } from 'react'

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <td>Name</td>
            <td>Job</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>李狗蛋</td>
            <td>程序猿</td>
          </tr>
          <tr>
            <td>王翠花</td>
            <td>攻城狮</td>
          </tr>
        </tbody>
      </table>
    )
  }
}
export default Table

組み立ておよび使用app.jsで導入されたアセンブリ、後に書かれました

import Table from './table.js'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <h4>Hello React !</h4>
        <Table />
      </header>
    </div>
  );
}

次に、ページを表示、保存

、テーブル、CSSファイルtable.jsページの後、導入についてとても美しく、いくつかのスタイルを書いて、いくつかの醜いのように見え、その後、table.cssファイルを作成します

import './table.css'

次に、ページビューを保存

第四に、簡単な組立

実際には、コンポーネントが複雑な部品を作成したクラスから呼び出すことができ、また、簡単なアセンブリを作成することができ、いわゆる単純なアセンブリは、実際には、同様の構成要素は、宣言的機能、今ヘッドと本体部分は以下のように分離されているの簡単な組立とテーブル別のウィジェット
1差成分との複合体の成分の簡単な組立必要はないが、置換要素について返す単純なレンダリング（）メソッドであり、要素は、直接バック反応します

// table.js
function TableHead(props) {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  )
}

function TableBody(props) {
  return (
    <tbody>
      <tr>
        <td>李狗蛋</td>
        <td>程序猿</td>
      </tr>
      <tr>
        <td>王翠花</td>
        <td>攻城狮</td>
      </tr>
    </tbody>
  )
}

コール

class Table extends Component {
  render() {
    return (
      <table>
        <TableHead />
        <TableBody />
      </table>
    )
  }
}

表示ページを保存し、ページが変更されない見つけ、それは同じである

ので、すべてのコンポーネントがすべて互いに入れ子にすることができ、また、簡単な部品や複雑なアセンブリがお互いに入れ子にすることができ、違いはありません

第五に、通信コンポーネントの小道具

ことを除いて、小道具を介して送信されたデータを受信することで、幾分同様の通信VUEの成分と反応：
1、データがオブジェクト内部グローバル小道具に格納され、オブジェクトは直接小道具取得呼び出すことができる
2は、データ転送は必要がないv-bindに接続しますセットのパラメータは、あなたが直接書き込むことができますが、使用するパラメータを渡す{}のではなく、パッケージの""
中にシンプルな機能で、3、小道具はそう直接props.keyを通じて、パラメータとして渡されますが、内部クラスでは、小道具を継承しますcompoentで、で必要とされるsuper()方法がによって呼び出されるthis.props.key
すべてのコンポーネントが内部app.jsでレンダリングされているので、過去に渡して、今あなたが内部app.jsでデータを作成したい、あなたは、レンダリング構成要素で作成する必要があります渡されるデータに注意を払う必要がありますrender()で作成された機能、内部render()の方法に加えて、全く効果がなく、簡単な構成要素である場合、直接データの配列を宣言
良いデータ宣言の後、コンポーネントに直接渡さ

function App() {
  const Head = [
    { header: 'Name' },
    {header: 'Job'}
  ]
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <h4>Hello React !</h4>
        // 传递数据
        <Table Head={Head} />
      </header>
    </div>
  );
}

接下来就可以在Table组件的render函数通过es6方法从props里面拿到数据赋值给新声明的变量，注意必须在render()方法里面声明获取，简单函数直接声明获取获取

class Table extends Component {
  render() {
    // 拿取元素
    const {Head} = this.props
    return (
      <table>
        <TableHead Head={Head} />
        <TableBody />
      </table>
    )
  }
}

接下里就是列表渲染表格头部了，注意react里面列表渲染时通过map()方法实现的，因为map()方法返回的是一个结果数组
需要注意的是每一个循环创建的react元素必须赋予一个key值，这是唯一标识符，同一个react元素里不能相同

const TableHead = (props) => {
  const myHead = props.Head.map((item, index) => {
    return <th key={index}>{item.header}</th>
  })
  return (
    <thead>
      <tr>
        {myHead}
      </tr>
    </thead>
  )
}

然后保存查看页面，发现页面结构数据并没有变化，也没有报错

同理我们可以把body数据也可以赋予过去

const Body = [
    {
      name: '李狗蛋',
      job: '程序猿',
    },
    {
      name: '王翠花',
      job: '攻城狮',
    },
    {
      name: '二狗子',
      job: '加班狗',
    }
  ]
<Table Head={Head} Body={Body} />

弄好之后，保存查看页面结果

六、数据修改state

通过props可以传递数据，但是这个数据传过去后是不可变的，无法进行操作，所以需要通过state来声明数据，这样数据就可以通过this.setState()方法来进行相关操作
现在我们创建一个state对象，把先前的数据全部移到这个对象里面

const state = {
    Head: [
      { header: 'Name' },
      {header: 'Job'}
    ],
    Body: [
      {
        name: '李狗蛋',
        job: '程序猿',
      },
      {
        name: '王翠花',
        job: '攻城狮',
      },
      {
        name: '二狗子',
        job: '加班狗',
      }
    ]
  }

在Table组件依然是通过this.props获取这个数据
现在我们需要操作这个数组，来进行数组的内容的添加和删除，首先我们执行删除操作，在app.js声明一个删除数据的方法，用来执行删除，这个方法是根据index来删除
删除函数

removeTr = index => {
    const { Body } = this.state
    this.setState({
      Body: Body.filter((item, ind) => {
        return ind !== index
      })
    })
  }

弄好之后，把数据通过props传递过去，然后回到Table组件，在body里面新增一行，执行方法

function TableBody(props) {
  const myBody = props.Body.map((item, index) => {
    return <tr key={index}>
      <td>{item.name}</td>
      <td>{item.job}</td>
      <td>
        <button onClick={() => props.removeTr(index)}>Delete</button>
      </td>
  </tr>
  })
  return (
    <tbody>
      {myBody}
    </tbody>
  )
}

注意
这里踩了一个坑，通过事件执行方法时，一定要通过一个函数去执行props里传过来的方法，否则好像会自动执行
这样我们点击删除按钮，就会将当前的数组索引作为参数传过去，然后通过filter()方法过滤掉index相同的数组项，返回其他数组项，实现删除效果

七、新增数据

在做逻辑操作之前，我们需要新建一个新增数据的表单组件
Form.js

import React, { Component } from 'react'

class Form extends Component {
  constructor(props) {
    super(props)
    // 初始化input的value值
    this.initValue = {
      name: '',
      job: '',
    }
    // 将初始化值赋值给state
    this.state = this.initValue
  }
  // input标签内容改变时执行
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }
  // 点击提交按钮时执行的操作
  submitForm = () => {
    // 这个方法是app.js那边传过来的，这个需要把用户输入的数据传过去
    this.props.handleSubmit(this.state)
    // 重置input的value值
    this.setState(this.initValue)
  }
  render() {
    const {name, job} = this.state
    return (
      <form>
        <label>
          Name:
        </label>
        <input type="text" value={name} name="name" onChange={this.handleChange} /><br />
        <label>
          Job:
        </label>
        <input type="text" value={job} name="job" onChange={this.handleChange} /><br />
        <input type="button" value="新增" onClick={this.submitForm} />
      </form>
    )
  }
  }

app.js

handleSubmit = (valObj) => {
    // 通过解构的方式，把传过来的数据添加到Body数组里，
    this.setState({
      Body: [...this.state.Body, valObj]
    })
  }