React是灵活的并且能被用在很多项目之中。你能用它新建一个项目，但是你也能逐步的把它当成一个不需要重写的代码库。
- 写在前面(这里通过npm安装react脚手架)：搭建react环境之前需要先安装nodeJs,安装nodeJs的过程会安装npm，nodeJs安装完成之后，需要配置环境变量：
环境变量配置
安装之后 npm -v 出现版本号，证明安装成功，环境变量配置正确;
通过npm安装可能会比较慢，可以换源，换到国内的源： npm config set registry https://registry.npm.taobao.org
验证是否安装成功，可以用：npm config get registry
1. 创建有一个新的react工程：
npm install -g create-react-app
create-react-app my-app
2. Hello World
ReactDOM.render(
<h1>Hello ,world !</h1>,
document.getElementById('root')
);
<!--页面上就能看见helloworld-->
<!--react对ES6友好，鼓励用ES6中新增的语法，例如箭头函数，类，模板字符串，let，const-->
3. jsx介绍（既不是字符串，也不是html）
- jsx中的表达式
{2+2} {user.firstName} {formatName(user)}都是合法的表达式
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')
);
- jsx也是表达式（可以分配给参数，当做变量，或者作为一个函数的返回）
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
- jsx属性说明（注意:jsx中的属性都是采用的驼峰写法，例如tabindex要改成tabIndex，classname要写成 className）
<!--jsx属性可以用双引号引起来，也可以用{}包起来，这就意味着属性可以用变量-->
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
- jsx children说明
<!--如果一个标签没有子节点，则该标签需要闭合-->
const element = <img src={user.avatarUrl} />;
<!--如果存在子节点-->
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
- jsx代表了对象的集合(babel会把JSX编译成React.createElement()...)
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
<!--这两种写法实际上是相同的-->
<!--React.createElement()将上述代码创建了一个像这样的对象：-->
<!--const element={-->
<!-- type: 'h1',-->
<!-- props: {-->
<!-- className: 'greeting',-->
<!-- children: 'Hello, world'-->
<!-- }-->
<!--}-->
4. 渲染元素(react只在必要的时候更新，有变更的地方才会更新)
function Tick(){
const element=(<div>
<h1> Hello ,word!</h1>
<h2>It is {new Date().toLocaleTimeString()} </h2>
</div>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(Tick,1000);
时间渲染
只有时间会有变化,其他的元素并没有被重新渲染
5. 组件和属性(属性在组件内部是只读的)
- 组件的创建形式
<!--定义了一个最简单的组件-->
<!--props代表了组件的属性-->
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
<!--无状态组件-->
<!--也可以通过ES6class创建一个组件-->
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
<!--有状态组件 在组件中可以存在生命周期-->
- 使用方法
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
<!--在屏幕上显示 Hello, Sara-->
6. state和生命周期
前面时钟的例子通过state和生命周期重写一遍
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Clock extends Component{
constructor(props){
super(props);
this.state={date:new Date()};
}
componentDidMount(){
// 在组件已经完成渲染之后调用
<!--setInterval 函数为什么写成这样？ 解决闭包中this指向问题-->
this.timerId=setInterval(()=>this.tick(),1000);
}
componentWillUnmount(){
<!--组件卸载之前调用-->
clearInterval(this.timerId);
}
tick(){
this.setState({
date:new Date()
});
}
render(){
return <div>
<h1>Hello，Word!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
}
}
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);
7. 事件
- 异同
<!--html中-->
<button onclick="activateLasers()">
Activate Lasers
</button>
<!--React中-->
<button onClick={activateLasers}>
Activate Lasers
</button>
另外一个区别就是不能用returnfalse去阻止默认事件，必须用 preventDefault事件是阻止默认事件
<!--html中-->
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
<!--react中-->
<a href="#" onClick={handleClick}>
Click me
</a>
function handleClick(e) {
e.preventDefault(); //阻止默认事件
console.log('The link was clicked.');
}
8. 数组和keys
list
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
<!--返回的时候浏览器会有一个警告，list需要有个key-->
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
<!--加上key警告就消失了-->
Keys 给一组元素一个唯一的标记
<!--元素中同兄弟之前的key值不能相同-->
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
<!--同兄弟间的key值不一定就可以，并不一定需要整个都不一样-->
map()也可以作为jsx中的函数表达式
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
