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>
