Hello Wrold
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
通过react渲染一个Hello, world!
JSX
即不是字符串也不是HTML，而且是一种JS语法扩展
在JSX中可以使用表达式
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
Babel会将JSX转换成React.createElement()的方法调用
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
元素渲染
在React中元素事实上是普通的对象
将元素渲染到DOM节点中，需要将元素传递给ReacDOM.render()的方法来渲染到页面重
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
组件
组件可以将UI切个成独立的可复用的部件，组件从概念上来讲是函数
函数定义
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
类定义组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Props是只读属性
生命周期
setState
不能直接更改状态，因为不会重新渲染组件
this.state.comment = 'Hello';
使用setState
this.setState({comment: 'Hello'});
但是状态更新是异步的
React可能将多个setState合并成一个setState
第二种形式setState参数接收函数
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
为了实现同步，我们可以使用Promise封装setState
事件处理
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
传递参数
class Popper extends React.Component{
constructor(){
super();
this.state = {name:'Hello world!'};
}
preventPop(name, e){ //事件对象e要放在最后
e.preventDefault();
alert(name);
}
render(){
return (
<div>
<p>hello</p>
{/* Pass params via bind() method. */}
<a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
</div>
);
}
}
条件渲染
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}