React

React 是Facebook开发的一个用于构建用户界面的 JavaScript 框架

项目搭建

搭建 React 框架项目非常简单,可以在安装 Node.js 的前提下使用以下命令创建 React 项目工程

1
npx create-react-app [项目名]

方法2:安装脚手架,然后通过脚手架构建 React 项目

1
npm install -g create-react-app
1
create-react-app [项目名]

运行项目

建立项目过后会自动创建一个文件夹,c d 进去可以使用命令运行项目。

1
npm start

如果运行错误,可以使用命令安装依赖。再运行一次。

1
npm install

此时官方的基本示例就已经显示在浏览器里了。现在我们可以试着自己写一个 Hello World !

1

Hello World

首先我们可以先把 src 目录下的文件全部删除掉。并建立 index.cssindex.js。然
后在 index.js 中引入这 三行代码:

1
2
3
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

我们可以在 index.js 下编写一个自己的 Hello World 并去浏览器预览.
(其中 root 意指

1
2
3
4
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

如果你没把启动项目服务关掉,你会发现它自动刷新了网页内容。是的,没错。React 可以这样。

1
npm start

认识 JSX

1
const element = <h1>Hello, world!</h1>;

现在,你可以看到这个有趣的代码。它里面有标记语法但既不是字符串也不是 HTML。

它被称为 JSX,是一个 JavaScript 的语法扩展。可以在 React 中配合使用。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到标记语言,但它具有 JavaScript 的全部功能。

上面的例子我们创建了一个 element 变量来存储 JSX,我们可以在 render 中调用它。

1
2
3
4
5
const element = <h1>Hello world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);

组件

React 中可以使用函数来定义组件。下面这个函数可以传递着 props 到 元素中。这类组件被称为 "函数式组件"

1
2
3
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

除了函数也可以使用 ES6的 class 来定义组件。

1
2
3
4
5
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

组件渲染

上面我们遇到的 React 元素都是 DOM 标签

1
const element = <div/>;

React 元素也可以是用户自定义的组件

1
const element = <Welcome name="Chen" />;

例如,这段代码会在页面上渲染 “Hello,Chen”

1
2
3
4
5
6
7
8
9
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Chen" />;
ReactDOM.render(
element,
document.getElementById('root')
);

组合组件

组件可以在其输出中引用其它组件。例如以下代码会输出:Hello,小陈 Hello,小白 Hello,小红

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Welcome(props){
return <h1>Hello,{props.name}</h1>;
}
function App(){
return(
<div>
<Welcome name="小陈"/>
<Welcome name="小白"/>
<Welcome name="小红"/>
</div>
)
}
ReactDOM.render(
<App/>,
document.getElementById('root')
)

元素渲染

React 的网页元素是静止一帧不变的。但可以像下面这个例子实现刷新。
在函数中插入 ReactDOM.render 并使用 setInterval() 来调用函数。实现内容的更新渲染。

1
2
3
4
5
6
7
8
9
10
11
function time(){
const element = (
<h1>Hello, world! 当前的时间是:
{new Date().toLocaleTimeString()}
</h1>);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(time,1000)