React:概述和体验

2021-09-21   39 次阅读


React: 概述和体验

先决条件

  1. 基本的HTML和CSS
  2. JavaScript的基本知识
  3. 对DOM有基本的了解

文档对象模型(Document Object Model)通常被称为DOM,是网站交互的一个组成部分。DOM是一个界面,允许编程语言(如JavaScript)操纵网站内容样式,网站的执行操作(如图片轮换、错误提示或导航菜单)都是JavaScript访问和操作DOM后的结果。

73a4f4d3-ff65-410f-9b24-4cfc704e3d2c

  1. ES6语法和特性

ECMAScript2015 也称为ES6,是JavaScript的一种标准,对其进行了许多更改。

  1. Node.js和npm

Node.js不是库,而是一个运行环境,或者说是一个JavaScript的语言解释器。

npm不仅仅是字面意思(Node Package Manager),而是一个包含所有Node.js程序、插件和模块等存储库的工具。

什么是React?

  1. React是一个Javascript库
  2. React用于在前端构建用户界面
  3. React是MVC应用的视图层
  4. 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>

image

创建React应用程序

FaceBook创建了Creact React App脚手架,它预先配置了构建React所需要的所有环境,可以自动编译React、JSX和ES6,并对代码错误做出警告等。

$ npx create-react-app XXX
或
$ yarn create react-app XXX

安装完后即可启动项目

$ npm start
或
$ yarn start

570a9b5c-898e-49b2-8561-cfd594ca1a47

如果只考虑目录结构的话,会看到/public/src目录,并且包含node_modules,

.gitignorepackage.json这几个文件。

8333c105-a772-4ed2-bf5c-59fe45c4ca7f

接着我们再像上一节中的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'))

b7a7b9e1-991b-4f51-9305-c326ff1eb351

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')
);

最后成功输出

b202712a-394d-4991-89f2-5179de65c465

本文由 hongCYu 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
原文链接:https://hongcyu.cn/posts/react1.html
最后更新于:2021-09-21 21:01:03

Coffee