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.css 、index.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)