React: 概述和体验
先决条件
- 基本的HTML和CSS
- JavaScript的基本知识
- 对DOM有基本的了解
文档对象模型（Document Object Model）通常被称为DOM，是网站交互的一个组成部分。DOM是一个界面，允许编程语言（如JavaScript）操纵网站内容样式，网站的执行操作（如图片轮换、错误提示或导航菜单）都是JavaScript访问和操作DOM后的结果。
- ES6语法和特性
ECMAScript2015 也称为ES6，是JavaScript的一种标准，对其进行了许多更改。
- Node.js和npm
Node.js不是库，而是一个运行环境，或者说是一个JavaScript的语言解释器。
npm不仅仅是字面意思（Node Package Manager），而是一个包含所有Node.js程序、插件和模块等存储库的工具。
什么是React?
- React是一个Javascript库
- React用于在前端构建用户界面
- React是MVC应用的视图层
- React不是一个框架
React最重要的方面之一就是可以创建组件（类似可重用的HTML元素）来快速构建用户界面。
如何使用React
静态HTML文件
在静态HTML文件中引入React使用所需要的基本库。同时创建一个id为root的div，意味着应用程序的入口将是root div元素，这是一个惯例命名。最后创建一个script标签，用于写自定义的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// React code
</script>
</body>
</html>
创建一个名为App的类，并在其中添加render()方法，这是类组件中需要的唯一方法，用于渲染DOM节点。
class App extends React.Component {
render(){
return (
<h1>Hello React!</h1>
);
}
}
最后使用ReactDOM的render方法将App类渲染到id为root的div中。
ReactDOM.render(<App />, document.getElementById('root'));
这样完整的代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React!</title>
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello React!</h1>
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
创建React应用程序
FaceBook创建了Creact React App脚手架，它预先配置了构建React所需要的所有环境，可以自动编译React、JSX和ES6，并对代码错误做出警告等。
$ npx create-react-app XXX
或
$ yarn create react-app XXX
安装完后即可启动项目
$ npm start
或
$ yarn start
如果只考虑目录结构的话，会看到/public和/src目录，并且包含node_modules,
.gitignore和package.json这几个文件。
接着我们再像上一节中的script标签一样在index.js书写类组件的代码（注意：一个类组件必须包含render()，并且return只能返回一个父元素）。最后通过ReactDOM渲染到root中，项目会自动重启展示对应最新的代码。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends Component {
render() {
return (
<h1>Hello React!</h1>
)
};
}
ReactDOM.render(<App />, document.getElementById('root'))
JSX:JavaScript+ XML
jsx就是在React代码中使用看起来像HTML代码的东西，但并完全是HTML，实际上它是JSX(JavaScript+ XML)。最直观了例子如下所示：
const element = (
<h1 className="demo">
Hello, world!
</h1>
);
在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。假如没有JSX，则代码则需要是如下形式：
const element = React.createElement(
'h1',
{className: 'demo'},
'Hello, world!'
);
使用JSX构造一个类组件
Table.js
import React, { Component } from 'react'
const TableHeader = () => {
return (
<thead>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
</thead>
);
}
const TableBody = (props) => {
const rows = props.characterData.map((row, index) => {
return (
<tr key={index}>
<td>{row.name}</td>
<td>{row.year}</td>
</tr>
);
})
return <tbody>{rows}</tbody>
}
class Table extends Component {
render() {
const { data } = this.props;
return (
<table>
<TableHeader />
<TableBody characterData={data} />
</table>
)
}
}
export default Table;
App.js
import React, { Component } from 'react';
import Table from './Table';
class App extends Component {
render() {
const characters = [
{ name: '小明', year: 15 },
{ name: '小白', year: 16 },
{ name: '小红', year: 17 },
{ name: '小黑', year: 18 },
]
return (
<Table data={characters} />
)
};
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
最后成功输出
Comments | 3 条评论