### 首先? 安裝react 腳手架

cnpm? install? create-react-app? -g? ? ? //只需要在電腦上安裝一次就好了韭赘，以后不用再下載了

### 創(chuàng)建項(xiàng)目

create-react-app? 項(xiàng)目名（ todo ）

### 進(jìn)入項(xiàng)目todo? 運(yùn)行項(xiàng)目

npm start? ?---------或者下載 cnpm install yarn --save? ?后輸入yarn? start 也可以運(yùn)行項(xiàng)目

### 創(chuàng)建三個文件夾分別為：App? ? todo? ? list? ?

將App.js? 和App.css 放入到 App文件夾中------>在到index.js中 把引入App.js的路徑改一下

import App from './App/App';

在todo? list? 這兩個文件夾中 分別在創(chuàng)建一個js文件缩滨，一個css樣式文件

在這里就簡單的創(chuàng)建to.js? to.css? ? 和? ? list.js? ? list.css

###在to.js 中寫入代碼

import React, {Component} from 'react'; //---->引入react模塊

import "./to.css"? //---->引入to.css樣式文件

class To extends Component {

? ? constructor(props) {

? ? ? ? super(props);

? ? ? ? this.state={ //--->初始化狀態(tài) ，所有添加的數(shù)據(jù)都從這里獲取

? ? ? ? ? ? tt:"",

? ? ? ? ? ? cc:false? //--->定義一個狀態(tài)為false的屬性泉瞻，通過屬性的true脉漏，false通過三目運(yùn)算符來判斷

? ? ? ? }

? ? }

? ? ch(e){ //---->獲取input框中用戶當(dāng)前輸入的數(shù)據(jù)

? ? ? ? this.setState({tt:e.target.value});//--->更新狀態(tài)后渲染

? ? }

? ? add(){ //添加? 子組件通過事件觸發(fā)的方法，通過方法的參數(shù)袖牙，將值傳遞給父組件

? ? ? ? this.props.ad(this.state.tt) //--->將當(dāng)前的用戶輸入的數(shù)據(jù)傳遞給父組件

? ? ? ? this.state.tt="" //--->讓當(dāng)前用戶點(diǎn)擊添加后侧巨，input框中的值為空

? ? }

? ? render() {

? ? ? ? return (

{/* 獲取用戶的value 值得時候鞭达，需要加一個onChange事件 這是在react中的獲取value值的方法 */}?

? ? ? ? ? ? ? ? <input className="zjb_in" type="text" value={this.state.tt}

? ? ? ? ? ? ? ? ? ? ? onChange={this.ch.bind(this)} onFocus={this.props.bb}?

? ? ? ? ? ? ? ? onKeyDown={this.props.asss}/>{/* 當(dāng)按鍵按下的時候司忱，調(diào)用了父組件App.js中的方法*/}

? ? ? ? ? ? ? ? <button onClick={this.add.bind(this)}>百度一下</button>

? ? ? ? ? ? ? ? <div className="ss" onClick={this.props.as}></div>{/*這是讓添加數(shù)據(jù)的ul框能在鼠標(biāo)點(diǎn)擊空白區(qū)域隱藏的一種方法，有點(diǎn)low,后面還有一種更好的辦法*/}

? ? ? ? ? ? </div>

? ? ? ? );

? ? }

}

export default To;{/*導(dǎo)出文件*/}

### 在to.css中的樣式畴蹭，簡寫的坦仍，樣式就不注釋 了

body,div,input,p{

? ? margin: 0;

? ? padding: 0;

}

.zjb_box{

? ? width: 600px;

? ? height: 600px;

? ? border: 1px solid #000;

? ? margin: 100px auto;

? ? position: relative;

}

.zjb_in{

? ? width: 400px;

? ? height: 40px;

? ? margin: 20px 20px;

}

button{

? ? width: 100px;

? ? height: 40px;

}

.ss{

? ? width: 600px;

? ? height: 600px;

? ? border: 2px solid #ccc;

}

###在list.js中寫入代碼?

import React, {Component} from 'react';//--->引入react模塊

import "./list.css"http://--->引入list.css樣式

class List extends Component {

? ? constructor(props) {

? ? ? ? super(props);

? ? }

? ? del(n){//刪除的方法? n為當(dāng)前的下標(biāo)

? ? ? ? this.props.remove(n);//--->將當(dāng)前的下標(biāo)傳入到父組件中

? ? }

? ? render() {

? ? ? ? return (

? ? ? ? ? ? <div className="zjb_bb" style={{display:this.props.aa?"block":"none"}}>

? ? ? ? ? ? ? ? <ul style={{display:this.props.aa?"block":"none"}}>{/*如果是true，就顯示叨襟，false就隱藏*/}

? ? ? ? ? ? ? ? ? ? {

this.props.zjb_ch.map((v,i)=>{? ? ? ? ? ? ? {/*注釋this.props.zjb_ch==i?"ac":""*/}

? ? ? ? ? ? ? ? ? ? ? ? ? ? return <li key={i} className={this.props.ac===i?"ac":""}>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {v}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {/*單行顯示刪除繁扎，可以num=0;this.state.num===i？"顯示":"否則隱藏"*/}

className={this.props.ac===i?"za":" "}>刪除{/*通過當(dāng)前下標(biāo)一樣的時候糊闽，顯示刪除梳玫，不一樣的，就為空*/}

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {/*<div className="asas"></div>*/}

? ? ? ? ? ? ? ? ? ? ? ? ? ? </li>

? ? ? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? </div>

? ? ? ? );

? ? }

}

export default List;{/*導(dǎo)出*/}

###在list.css中寫入樣式

*{

? ? margin: 0;

? ? padding: 0;

? ? list-style: none;

}

.zjb_bb{

? ? position: absolute;

? ? width: 402px;

? ? top: 164px;

? ? left: 286px;

? ? /*border: 1px solid #000;*/

}

.zjb_bb>ul{

? ? display: none;

? ? /*height: 400px;*/

? ? border: 1px solid #000;

}

.ac{

? ? background: red;

}

.za{

? ? float: right;

? ? color: #000;

? ? margin-right: 20px;

}

.asas{

? ? width: 1000px;

? ? height: 1000px;

? ? border: 2px solid greenyellow;

}

###最后回到主文件App.js中

import React from 'react';? ? ? ? ? ? //--->引入react模塊

import To from "../todo/To";? ? ? ? ? //--->引入to.js文件

import List from "../list/list";? ? ? //--->引入list.js文件

class App extends React.Component {

? constructor(props) {

? ? super(props);

? ? var arr0=localStorage.getItem("arr");? //---> 獲取本地的儲存

? ? if(arr0){? //本地儲存中如果有數(shù)據(jù)的話就會執(zhí)行if中的true

? ? ? var arr1=JSON.parse(arr0);? //--->將字符串轉(zhuǎn)換為對象

? ? }else{

? ? ? var arr1=[]; //--->如果本地儲存中沒有數(shù)據(jù)右犹，就是null汽纠，先執(zhí)行if中的else 創(chuàng)建一個新數(shù)組， 之后再渲染傀履，輸出本地儲存虱朵，在渲染到頁面上

? ? }

? ? this.state={

? ? ? list:arr1,

? ? ? cc:false,

? ? ? num:0

? ? }

? }

? add1(v){ //--->添加的方法? v就是to.js中傳過來的input框中用戶輸入的值

? ? var list=this.state.list; //獲取當(dāng)前的初始狀態(tài)中的list

? ? list.push(v); //將用戶輸入的值添加到list中

? ? var list1=JSON.stringify(list);//--->將當(dāng)前的list是拼接的對象轉(zhuǎn)換為字符串

? ? localStorage.setItem("arr",list1);//--->將數(shù)據(jù)儲存到本地內(nèi)存中

? ? this.setState({list}) //--->更新狀態(tài)后 頁面又渲染了一次

? ? // alert(this.state.list)

? }

? del1(n){//刪除的方法? n為list.js中傳遞過來的下標(biāo)

? ? var list=this.state.list;

? ? list.splice(n,1);

? ? var list1=JSON.stringify(list);

? ? localStorage.setItem("arr",list1);

? ? this.setState({list})

? }

? bb1(){//通過cc的屬性來判斷莉炉，當(dāng)點(diǎn)擊后讓cc的狀態(tài)為true

? ? this.setState({cc:true})

? }

? ass(){

? ? this.setState({cc:false})

? }

? asa(e){//鍵盤事件，上下鍵

? ? if(e.keyCode===38){

? ? ? console.log(e.keyCode);

? ? ? var n=this.state.num;//--->通過num判斷碴犬，在list.js中如果num和下標(biāo)i相等的話絮宁，就讓ac的class樣式顯示

? ? ? n--;

? ? ? if(n<0){

? ? ? ? n=this.state.list.length-1

? ? ? }

? ? ? this.setState({num:n,tt:this.state.list[n]})

? ? }

? ? if(e.keyCode===40){

? ? ? // alert(11)

? ? ? var n=this.state.num;

? ? ? n++;

? ? ? if(n>this.state.list.length-1){

? ? ? ? n=0

? ? ? }

? ? ? this.setState({num:n,tt:this.state.list[n]})

? ? }

? }

? // dcc(e){

? //? ? if(e.target.nodeName=="DIV"){--->獲取當(dāng)前div的節(jié)點(diǎn)DIV，能獲取到就改變cc的boolearn值

? //? ? ? ? this.setState({cc:false})

? //? ? }

? //隱藏

? hide=(e)=>{//--->通過獲取當(dāng)前的大div的節(jié)點(diǎn)來改變cc的true和false

? ? console.log(e.target.nodeName)

? ? if(e.target.nodeName=="DIV"){

? ? ? this.setState({cc:false})

? ? }

? }

? // }

? render() {

? ? return (

? ? ? ? <div>

? ? ? ? ? <To ad={this.add1.bind(this)} bb={this.bb1.bind(this)}

? ? ? ? ? as={this.ass.bind(this)} ak={this.hide.bind(this)}

? ? ? ? ? cc={this.state.cc} asss={this.asa.bind(this)}></To>{/*這是to.js中的組件*/}

? ? ? ? ? <List zjb_ch={this.state.list} remove={this.del1.bind(this)}

? ? ? ? ? aa={this.state.cc} ac={this.state.num}></List>{/*這是list.js中的組件*/}

? ? ? ? </div>

? ? );

? }

}

export default App;

###如果有喜歡研究的志同道合的朋友服协，歡迎一起交流Ｉ馨骸！偿荷！