node 环境：安装 Node >= 8.10 和 npm >= 5.6。

npx create-react-app my-app

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

cd my-app

npm start

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

目录说明

│ .babelrc #babel配置文件

│ package-lock.json

│ package.json

│ README.MD

│ webpack.config.js #webpack生产配置文件

│ webpack.dev.config.js #webpack开发配置文件

│

├─dist

├─public #公共资源文件

└─src #项目源码

│ index.html #index.html模板

│ index.js #入口文件

│

├─component #组建库

│ └─Hello

│ Hello.js

│

├─pages #页面目录

│ ├─Counter

│ │ Counter.js

│ │

│ ├─Home

│ │ Home.js

│ │

│ ├─Page1

│ │ │ Page1.css #页面样式

│ │ │ Page1.js

│ │ │

│ │ └─images #页面图片

│ │ brickpsert.jpg

│ │

│ └─UserInfo

│ UserInfo.js

│

├─redux

│ │ reducers.js

│ │ store.js

│ │

│ ├─actions

│ │ counter.js

│ │ userInfo.js

│ │

│ ├─middleware

│ │ promiseMiddleware.js

│ │

│ └─reducers

│ counter.js

│ userInfo.js

│

└─router #路由文件

Bundle.js

router.js

快速搭建一个react项目:

下载react脚手架 ：

C:\Users\Administrator> npm install -g creat-react-app

C:\Users\Administrator> create-react-app my-app

(也可进入指定文件目录下)

npm install -g create-react-app

create-react-app 项目名

cd reactbasic
npm start

组件通讯（属性传值）

App.js

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

  render(){

  return (

    <div className="App">

<h1>hello world</h1>

<Person name="马云" count="30亿"/>

<Person name="马化腾" count="20亿"/>

<Person name="马英九" count="8亿">下台前</Person>

    </div>

  );

  }

}

export default App;

组件Person.js

import React from 'react';

const person = (props) => {

return (

<div>

<p>大家好,我是{props.name},我已经拥有{props.count}资产</p>

<p>{props.children}</p>

</div>

)

}

export default person;

保存后打开浏览器

React—state状态的使用

App.js

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything"

}

swithNameHandler = () => {

this.setState({

persons:[

{name:"马云",count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

  render(){

  return (

    <div className="App">

<h1>hello world</h1>

<button onClick={this.swithNameHandler}>更改状态值</button>

<Person name={this.state.persons[0].name} count={this.state.persons[0].count}/>

<Person name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

    </div>

  );

  }

}

export default App;

Person.js

import React from 'react';

const person = (props) => {

return (

<div>

<p>大家好,我是{props.name},我已经拥有{props.count}亿资产</p>

<p>{props.children}</p>

</div>

)

}

export default person;

点击按钮，触发swithNameHandler方法

传参数

App.js

class App extends Component {

/*

* state:用于改变组件内容状态的值（动态）

* props：用于组件传值

* */

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything"

}

swithNameHandler = (newName) => {

this.setState({

persons:[

{name:newName,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

  render(){

  return (

    <div className="App">

<h1>hello world</h1>

// 传参数

/* <button onClick={() => this.swithNameHandler("逍遥子")}>更改状态值</button>*/

<button onClick={this.swithNameHandler.bind(this,"逍遥子")}>更改状态值</button>

<Person name={this.state.persons[0].name} count={this.state.persons[0].count}/>

// 传事件

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")}

name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

    </div>

  );

  }

}

export default App;

person.js不变

传事件

App.js

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

/*

* state:用于改变组件内容状态的值（动态）

* props：用于组件传值

* */

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything"

}

swithNameHandler = (newName) => {

this.setState({

persons:[

{name:newName,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

  render(){

  return (

    <div className="App">

<h1>hello world</h1>

// 传参数

/* <button onClick={() => this.swithNameHandler("逍遥子")}>更改状态值</button>*/

<button onClick={this.swithNameHandler.bind(this,"逍遥子")}>更改状态值</button>

<Person name={this.state.persons[0].name} count={this.state.persons[0].count}/>

// 传事件

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")}

name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

    </div>

  );

  }

}

export default App;

Person.js

import React from 'react';

const person = (props) => {

return (

<div>

<p onClick={props.myclick}>大家好,我是{props.name},我已经拥有{props.count}亿资产</p>

<p>{props.children}</p>

</div>

)

}

export default person;

双向数据绑定

app.js

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

/*

* state:用于改变组件内容状态的值（动态）

* props：用于组件传值

* */

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything"

}

swithNameHandler = (newName) => {

this.setState({

persons:[

{name:newName,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

nameChangedHandler = (event) => {

this.setState({

persons:[

{name:event.target.value,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

  render(){

  return (

    <div className="App">

<h1>hello world</h1>

// 传参数

/* <button onClick={() => this.swithNameHandler("逍遥子")}>更改状态值</button>*/

<button onClick={this.swithNameHandler.bind(this,"逍遥子")}>更改状态值</button>

<Person

changed={this.nameChangedHandler}

name={this.state.persons[0].name} count={this.state.persons[0].count}/>

// 传事件

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")}

name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

    </div>

  );

  }

}

export default App;

Person.js

import React from 'react';

const person = (props) => {

return (

<div>

<p onClick={props.myclick}>大家好,我是{props.name},我已经拥有{props.count}亿资产</p>

<p>{props.children}</p>

<input type ="text" onChange={props.changed} defaultValue={props.name}/>

</div>

)

}

export default person;

样式

第一种：

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

/*

* state:用于改变组件内容状态的值（动态）

* props：用于组件传值

* */

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything"

}

swithNameHandler = (newName) => {

this.setState({

persons:[

{name:newName,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

nameChangedHandler = (event) => {

this.setState({

persons:[

{name:event.target.value,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

  render(){

  const style = {

  backgroundColor:'white',

  font:'inherit',

  border:'1px solid blue',

  padding:'8px',

  cursor:'pointer'

  }

  return (

    <div className="App">

<h1>hello world</h1>

// 传参数

/* <button onClick={() => this.swithNameHandler("逍遥子")}>更改状态值</button>*/

<button style={style} onClick={this.swithNameHandler.bind(this,"逍遥子")}>更改状态值</button>

<Person

changed={this.nameChangedHandler}

name={this.state.persons[0].name} count={this.state.persons[0].count}/>

// 传事件

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")}

name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

    </div>

  );

  }

}

export default App;

第二种

.Person {

width: 60%;

margin: 16px auto;

border: 1px solid #eee;

box-shadow: 0 2px 3px #ccc;

padding: 16px;

text-align: center;

}

import React from 'react';

import './Person.css';

const person = (props) => {

return (

<div className="Person">

<p onClick={props.myclick}>大家好,我是{props.name},我已经拥有{props.count}亿资产</p>

<p>{props.children}</p>

<input type ="text" onChange={props.changed} defaultValue={props.name}/>

</div>

)

}

export default person;

if分支

App.js

import React, { Component } from 'react';

import './App.css';

import Person from './Person/Person';

class App extends Component {

/*

* state:用于改变组件内容状态的值（动态）

* props：用于组件传值

* */

state ={

persons:[

{name:"马云",count:50},

{name:"马化腾",count:34},

{name:"马英九",count:15},

],

otherState:"anything",

showPersons:false

}

swithNameHandler = (newName) => {

this.setState({

persons:[

{name:newName,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

nameChangedHandler = (event) => {

this.setState({

persons:[

{name:event.target.value,count:100},

{name:"马化腾",count:34},

{name:"马英九",count:15},

]

})

}

togglePersonsHandler = () => {

const doesShow = this.state.showPersons;

this.setState({

showPersons:!doesShow

})

}

  render(){

  const style = {

  backgroundColor:'white',

  font:'inherit',

  border:'1px solid blue',

  padding:'8px',

  cursor:'pointer'

  };

  let persons = null;

  if (this.state.showPersons){

  persons = (

  <div>

<Person changed={this.nameChangedHandler} name={this.state.persons[0].name} count={this.state.persons[0].count}/>

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")} name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

</div>

  )

  }

  return (

    <div className="App">

<h1>hello world</h1>

{/* 传参数*/}

{/* <button onClick={() => this.swithNameHandler("逍遥子")}>更改状态值</button>*/}

{/* <button style={style} onClick={this.swithNameHandler.bind(this,"逍遥子")}>更改状态值</button>*/}

<button style={style} onClick={this.togglePersonsHandler}>内容切换</button>

{persons}

{

/*this.state.showPersons ?

<div >

<Person changed={this.nameChangedHandler} name={this.state.persons[0].name} count={this.state.persons[0].count}/>

// 传事件

<Person myclick={this.swithNameHandler.bind(this,"马爸爸")} name={this.state.persons[1].name} count={this.state.persons[1].count}/>

<Person name={this.state.persons[2].name} count={this.state.persons[2].count}>下台前</Person>

</div>: null*/

}

    </div>

  );

  }

}

export default App;