理解基本语法
1.The Basic workflow
- How
- cnpm npm --> dependency management
- webpack --> use bundler
- Babel --> Use Compiler
- Development Server
2. Use Create React App
nmp添加淘宝源的方法:
npm config set registry https://registry.npm.taobao.org
create-react-app github: ?
- steps
cnpm install -g create-react-app
create-react-app superset
cd superset
npm start
# starting a server
3. Understand the folder structure
- index.html
- index.js
- index.css
- ./src
4. understand the component basic
所有内容放在app Component里面, 必须有一个render方法,
并且返回一个div(jsx, looks like html, but it is not html)
use the practice before, not the React.createElement()
import React, {Component} from 'react';
class App extends Component{
render(){
return (
<div className="App">
<h1> hi, this is a react app</h1>
</div>
)
}
}
export default App;
5. JSX Restrictions
- class --> className
- wrap everything into one root div
<div> ... </div>
6. Create a functional Component
大多数情况下,是一个方法,returns 一些html, jsx
import React from 'react';
// ES6 语法,不要使用以前的语法
// return some jsx
const person = () => {
return <p>i am a person</p>
};
export default person;
import React, { Component } from 'react';
import './App.css';
import Person from './Person'
class App extends Component {
render() {
return (
<div className="App" >
<h1>Cleaver Brooks</h1>
<p>this is the client</p>
<Person/>
</div>
);
}
}
export default App;
实现代码的复用,并且可以传入参数,实现差异化动态生成
7. Outputting Dynamic Content
const person = () => {
return <p>i am a person, and i'm {Math.floor(Math.random()*30)} years old</p>
};
通过调用的时候传参,实现动态生成
8. Working with Props
能够动态生成不同的内容。通过传参的方式props
import React from 'react';
// ES6 语法,不要使用以前的语法
// return some jsx
const person = (props) => {
return <p>i am {props.name}, and i'm {props.age} years old</p>
};
export default person;
class App extends Component {
render() {
return (
<div className="App" >
<h1>Cleaver Brooks</h1>
<p>this is the client</p>
<Person name="Max" age="28"/>
<Person name="Zoe" age="27"/>
<Person name="Tao" age="25"/>
<Person name="Zhou" age="26"/>
</div>
);
}
}
export default App;
9. Understanding the Children Property
children 可以是任何内容,包括react component
anything between the
// return some jsx
const person = (props) => {
return (
<div>
<p>i am {props.name}, and i'm {props.age} years old</p>
<p>{props.children}</p>
</div>
);
};
export default person;
10. understand using state
内部参数
import React from 'react';
// ES6 语法,不要使用以前的语法
// return some jsx
const person = (props) => {
state = {
persons: [
{name: 'Zhou', age: Math.floor(Math.random() * 30)},
{name: 'Zoe', age: Math.floor(Math.random() * 30)},
{name: 'Tao', age: Math.floor(Math.random() * 30)},
]
}
return (
<div>
<p>i am {this.state.persons[0].name}, and i'm {this.state.persons[0].age} years old</p>
<p>i am {this.state.persons[1].name}, and i'm {this.state.persons[1].age} years old</p>
<p>i am {this.state.persons[2].name}, and i'm {this.state.persons[2].age} years old</p>
</div>
);
};
export default person;
尽量使用function来return一些小的div片段
这种function只有一个目的,就是动态生成div to the dom.
11. function components vs class components
尽可能使用function components, 因为这种模式are very clear about what they will do .
this kind of component should only render something. is not allowed to change the state
of some component.
state只能由几个类型,比如containers来改变。比如app container.
大多数的function只是传入参数,然后生成一个div而已,不能改变state.
12. Passing method reference between components.
可以通过props传入mother的一个方法索引,到一个小的components中,实现
- 推荐使用这个
this.onclick.bind(this, 'data')
- 不推荐使用这个,因为可能会有性能问题
onclick = () =>this.swithNameHandler('newName')
13. Adding two ways binding
需求,根据输入的内容改名称
14. Adding styling with stylesheet
By adding a css stylesheet file
.person{
width: 60%;
margin: 16px auto;
border: 1px solid #eee;
box-shadow:0 2px 3px #ccc;
padding: 16px;
text-align: center;
}
15. Inline styling
add styles directly in the jsx
const style={
backgroundColor: 'white',
font: 'inherit',
border: '1px solid blue',
padding: '8px',
cursor:'pointer'
}
style={style}