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 (
hello world
);
}
}
export default App;
组件Person.js
import React from 'react';
const person = (props) => {
return (
大家好,我是{props.name},我已经拥有{props.count}资产
{props.children}
)
}
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 (
hello world
);
}
}
export default App;
Person.js
import React from 'react';
const person = (props) => {
return (
大家好,我是{props.name},我已经拥有{props.count}亿资产
{props.children}
)
}
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 (
hello world
// 传参数
/* */
// 传事件
name={this.state.persons[1].name} count={this.state.persons[1].count}/>
);
}
}
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 (
hello world
// 传参数
/* */
// 传事件
name={this.state.persons[1].name} count={this.state.persons[1].count}/>
);
}
}
export default App;
Person.js
import React from 'react';
const person = (props) => {
return (
大家好,我是{props.name},我已经拥有{props.count}亿资产
{props.children}
)
}
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 (
hello world
// 传参数
/* */
changed={this.nameChangedHandler} name={this.state.persons[0].name} count={this.state.persons[0].count}/> // 传事件 name={this.state.persons[1].name} count={this.state.persons[1].count}/>
);
}
}
export default App;
Person.js
import React from 'react';
const person = (props) => {
return (
大家好,我是{props.name},我已经拥有{props.count}亿资产
{props.children}
)
}
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 (
hello world
// 传参数
/* */
changed={this.nameChangedHandler} name={this.state.persons[0].name} count={this.state.persons[0].count}/> // 传事件 name={this.state.persons[1].name} count={this.state.persons[1].count}/>
);
}
}
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 (
大家好,我是{props.name},我已经拥有{props.count}亿资产
{props.children}
)
}
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 = (
)
}
return (
hello world
{/* 传参数*/}
{/* */}
{/* */}
{persons}
{
/*this.state.showPersons ?
// 传事件
}
);
}
}
export default App;