node?環(huán)境：安裝?Node >= 8.10 和 npm >= 5.6。
npx create-react-app my-app
npx?不是拼寫錯誤 —— 它是?npm 5.2+ 附帶的 package 運(yùn)行工具。
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生產(chǎn)配置文件
│ webpack.dev.config.js #webpack開發(fā)配置文件
│
├─dist
├─public #公共資源文件
└─src #項(xiàng)目源碼
│ 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項(xiàng)目:
下載react腳手架 ：
C:\Users\Administrator> npm install -g creat-react-app
C:\Users\Administrator> create-react-app my-app
(也可進(jìn)入指定文件目錄下)
npm install -g create-react-app
create-react-app?項(xiàng)目名
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},我已經(jīng)擁有{props.count}資產(chǎn)</p>
<p>{props.children}</p>
</div>
)
}
export default person;
保存后打開瀏覽器
React—state狀態(tài)的使用
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}>更改狀態(tài)值</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},我已經(jīng)擁有{props.count}億資產(chǎn)</p>
<p>{props.children}</p>
</div>
)
}
export default person;
點(diǎn)擊按鈕，觸發(fā)swithNameHandler方法
傳參數(shù)
App.js
class App extends Component {
/*
* state:用于改變組件內(nèi)容狀態(tài)的值（動態(tài)）
* 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>
// 傳參數(shù)
/* <button onClick={() => this.swithNameHandler("逍遙子")}>更改狀態(tài)值</button>*/
<button onClick={this.swithNameHandler.bind(this,"逍遙子")}>更改狀態(tài)值</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:用于改變組件內(nèi)容狀態(tài)的值（動態(tài)）
* 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>
// 傳參數(shù)
/* <button onClick={() => this.swithNameHandler("逍遙子")}>更改狀態(tài)值</button>*/
<button onClick={this.swithNameHandler.bind(this,"逍遙子")}>更改狀態(tài)值</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},我已經(jīng)擁有{props.count}億資產(chǎn)</p>
<p>{props.children}</p>
</div>
)
}
export default person;
雙向數(shù)據(jù)綁定
app.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
/*
* state:用于改變組件內(nèi)容狀態(tài)的值（動態(tài)）
* 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>
// 傳參數(shù)
/* <button onClick={() => this.swithNameHandler("逍遙子")}>更改狀態(tài)值</button>*/
<button onClick={this.swithNameHandler.bind(this,"逍遙子")}>更改狀態(tài)值</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},我已經(jīng)擁有{props.count}億資產(chǎn)</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:用于改變組件內(nèi)容狀態(tài)的值（動態(tài)）
* 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>
// 傳參數(shù)
/* <button onClick={() => this.swithNameHandler("逍遙子")}>更改狀態(tài)值</button>*/
<button style={style} onClick={this.swithNameHandler.bind(this,"逍遙子")}>更改狀態(tài)值</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},我已經(jīng)擁有{props.count}億資產(chǎn)</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:用于改變組件內(nèi)容狀態(tài)的值（動態(tài)）
* 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>
{/* 傳參數(shù)*/}
{/* <button onClick={() => this.swithNameHandler("逍遙子")}>更改狀態(tài)值</button>*/}
{/* <button style={style} onClick={this.swithNameHandler.bind(this,"逍遙子")}>更改狀態(tài)值</button>*/}
<button style={style} onClick={this.togglePersonsHandler}>內(nèi)容切換</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;
