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
│ 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;
