(一)本節(jié)知識(shí)點(diǎn)

• (i) React腳手架的使用
• (ii) React第一個(gè)Demo---TodoList

(二) 本節(jié)內(nèi)容開始

(1) React 腳手架的使用

使用之前請先安裝Node,這里本文就不再介紹

(i) 安裝腳手架

(1) 要是網(wǎng)絡(luò)不好，請第一步安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

(2)安裝react腳手架

npx create-react-app 項(xiàng)目名稱
cd 項(xiàng)目名稱
npm start

npx 是 node里面的新出的一個(gè)命令，簡單理解為他把多條語句合并為一個(gè)語句

這個(gè)時(shí)候react 應(yīng)該就安裝成功了。他會(huì)彈出啟動(dòng)頁面

(ii) 文件路徑概述

2.png

(1) node_modules文件夾就是安裝的包依賴。無需過多做介紹
(2) public 這個(gè)就是公共文件夾。index.html就是最后要輸出的文件。
manifest.json就是緩存依賴。他表示把一些數(shù)據(jù)存到緩存中。
這樣用戶訪問的時(shí)候不用在繼續(xù)訪問數(shù)據(jù)
(3) 重點(diǎn)是src文件

 index.js 是文件的入口文件。它里面加載了入口信息。不能刪除。
 剩下的App.css App.js 表示單獨(dú)的組件。
 App.test.js表示單元測試模塊的js
 serviceWorker.js 他是用來配合PWA 漸進(jìn)式webapp應(yīng)用的。意思就是用戶第一次訪問后，緩 存到本地，在打開也能看的到。

(4) 本節(jié)只是入門階段所以許多文件需要不了。直接可以刪除了。結(jié)果就保留了幾個(gè)重要文件

2019-02-19_201804.png

(2)第一個(gè)Demo--TodoList

(i) 1. 繼承: 首先在React中一上來必須要引入React,然后組件要繼承React組件

import React, { Component, Fragment } from 'react'
class App extends Component {
  render(){
    return()
   }
}

上面的代碼也可以改成

import React from 'react'
const Component = React.Component
class App extends Component {
  render(){
    return()
   }
}

(ii) 2. Html :render里面渲染的就是html代碼 他利用的就是JSX語法 首先最外層必須要有包裹層，要是沒有可以用fragment來代替例如

import React, { Component, Fragment } from 'react'
class App extends Component {
  render(){
    return(
         <Fragment>
           <p>今天不錯(cuò)</p>
     </Frament>
    )
   }
}

(iii) 數(shù)據(jù):在React中他操做的是數(shù)據(jù)。所有的數(shù)據(jù)必須寫在constuctor里面。

例如
(1) 綁定數(shù)據(jù)

import React, { Component, Fragment } from 'react'
class App extends Component {
   constructor(props) {
    super(props)  // 繼承了這個(gè)父類的構(gòu)造函數(shù)
    this.state = {
      value2: '請輸入要輸入的值',   // 這里才是數(shù)據(jù)
      list: []           //這里才是數(shù)據(jù)2
    }
  }
  render(){
    return(
         <Fragment>
           <p>今天不錯(cuò)</p>
     </Frament>
    )
   }
}

(2) 渲染數(shù)據(jù) 在 JSX語法里面{}表示JS表達(dá)式。

• 注釋寫在{}里面
• 數(shù)據(jù) this.state.xxxx
• 有的時(shí)候需要HTML轉(zhuǎn)義的可有用 dangerouslySetInnerHTML={{ __html: item }} 這樣<h1>111</h1>他會(huì)直接渲染的
• 要是循環(huán)的時(shí)候必須加上key要不然會(huì)報(bào)錯(cuò)誤。
• label 語句要是寫for的時(shí)候必須加上htmlfor才行，要不然也報(bào)錯(cuò)

import React, { Component, Fragment } from 'react'
class App extends Component {
   constructor(props) {
    super(props)  // 繼承了這個(gè)父類的構(gòu)造函數(shù)
    this.state = {
      value2: '請輸入要輸入的值',   // 這里才是數(shù)據(jù)
      list: []           //這里才是數(shù)據(jù)2
    }
  }
  render(){
    return(
         <Fragment>
        {/*這就是注釋*/}
       <input value={this.state.value2} onChange={this.change.bind(this)} />
              <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={this.deleteone.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              />
            )
          })}
        </ul>
      </Fragment>
    )
   }
}

(3) 改變數(shù)據(jù)的時(shí)候

• 在React里面改變數(shù)據(jù)最好不要在原數(shù)據(jù)上修改，應(yīng)該是獲取到一份數(shù)據(jù)里面的拷貝然后修給最后在賦值
  比如 修改數(shù)據(jù)用的是this.setState ({})只有他才能修改

 tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }

(iv)事件: 在JSX語法里面綁定事件

• 事件的后面on后面必須是大寫，比如 onChange={this.change.bind(this)}
• this的改變，這里必須需要改變this指針的指向，否則獲取不到值
• 事件要是想傳值的話可以在this后面?zhèn)髦当热?{this.deleteone.bind(this, index)}

import React, { Component, Fragment } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value2: '請輸入要輸入的值',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        {/*這就是注釋*/}
        <input value={this.state.value2} onChange={this.change.bind(this)} />
        <button onClick={this.tijiao.bind(this)}>提交</button>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={this.deleteone.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              />
            )
          })}
        </ul>
      </Fragment>
    )
  }
  change(e) {
    console.log(e.target.value)
    this.setState({
      value2: e.target.value
    })
  }
  tijiao() {
    let list2 = [...this.state.list, this.state.value2]
    this.setState({
      list: list2,
      value2: ''
    })
  }
  deleteone(index) {
    console.log(index)
    let list2 = [...this.state.list]
    list2.splice(index, 1)
    this.setState({
      list: list2
    })
  }
}

export default App