React 新手路（一）：初识 React、JSX 与组件

Ozzie 的个人博客 / 62 / 0 / 创建于 4年前 / 更新于 4年前

小介

初次接触 react，围绕一个很小的 demo，初步学习了如何写 react，如何使用 JSX 语法糖、组件、了解了 babel 配置等等，哎，期末考试终于结束了哈哈哈 (^▽^)

初识 react 与 JSX

原始写法

新建 test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Day1</title>
    <!-- 加载React. -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <!-- 存放 react 组件的容器 -->
    <div id="container"></div>
    <!-- 加载你的 React 组件. -->
    <script src="test.js"></script>
</body>
</html>

新建 test.js

'use script'
class HelloMessage extends React.Component {
render() {
    return React.createElement (
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
}
ReactDOM.render(
    React.createElement( HelloMessage, { name: "Ozzie" } ),
    document.getElementById("container")
)

使用JSX

简单了解 JSX

相关文档：JSX 、JSX · TypeScript 、JSX 简介

虽然 JSX 语法糖并不是必须的，但是在 React 官网首页中，可以明显地感受到 JSX 很利于提升开发效率，例如：

未用 JSX

class HelloMessage extends React.Component {
    render() {
        return React.createElement (
            "div",
            null,
            "Hello ",
            this.props.name
        );
    }
}
ReactDOM.render(
    React.createElement( HelloMessage, { name: "Ozzie" } ),
    document.getElementById("container")
)

现在我们使用 JSX，在 test.js 中，将上面的代码改为：

class HelloMessage extends React.Component {
    render() {
        return (
            <div>
            Hello {this.props.name}
            </div>
        );
    }
}
ReactDOM.render(
    <HelloMessage name="Ozzie" />,
    document.getElementById("container")
)

但是，浏览器并不能直接解析 JSX 代码，我们需要使用 webpack 和 babel 来处理

初识 babel
- 相关文档了解：Babel
现在，我们的文件目录如下：
```
|-test.html
|-test.js
```

安装 webpack 与 webpack-cli

npm init -y
npm install webpack webpack-cli --save-dev

安装 babel-loader、babel-core、babel-preset-env、babel-preset-react

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

package.json 中的 "main" 已经是 test.js ，所以此处不做修改

配置 webpack：新建 webpack.config.js：

const path = require('path');
module.exports = {
    mode: 'development',
    entry: './test2.js',
    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
            test: /.\js$/,
            exclude: '/node_modules/',
            options: {
                presets: ['@babel/preset-env']
            },
            loader: "babel-loader",
        }]
    }
}

此时，还需配置一个 babel 规则，新建一个 .babel 文件：
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

查看效果

如今，所有的配置工作都已经完成，我们需要将新的 test.js 打包：
```
npx webpack
```
我们现在需要的是 bundle.js 而非 test.js，所以，我们需要将 html 修改一个地方：
```

<script src="./dist/bundle.js"></script>
```
打开 test.html 查看结果即可

参考资料

将官方链接打包

我们现在的文件目录是：

|-dist
    -bundle.js
|-node_modules
|-test.html
|-test.js
|-webpack.config.js
|-package.json
|-package-lock.json
|-.babelrc

之前为了写 react ，我们用 script 引入了两个官方给的两个链接，实际上，我们可以通过 webpack 将这两个文件直接打包到 bundle.js 中
Node.js 提供了 npm 这个极其强大的包管理工具，我们去搜索 react 再下载即可：NPM
- 搜索 react 与 react-dom
仔细阅读那上面的说明，我们下载如下：
```
npm install --save react react-dom
```
- 顺便提一下，这里的 react 和 react-dom 都是运行时即需要使用的，所以要用 --save 而不是 --save-dev
- 详情请参考：npm install、npm install --save与npm install --save-dev区别
现在直接删除那两个链接，然后在 test.js 中修改即可
- 删除 test.html 中的那两个链接
- 在 test.js 的开始处添加：
```
import React from 'react';
import ReactDOM from 'react-dom';
```
再次使用 npx webpack 打包，查看结果，这与之前加入链接的结果没有区别

多个组件

功能分开

上面我们只写了一个组件，组件的定义和调用都集中在 test.js 中，但是当组件多起来之后，我们最好将这两个功能分开：分别建立专写组件的和专调用组件的文件

将 test.js 的内容修改如下：

import React from 'react';
import ReactDOM from 'react-dom';

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    )
  }
}

//导出组件
export default HelloMessage;

这里只保留了定义组件的部分，最后用 export 来将组件导出

新建 app.js，这个将作为我们引用组件的文件

import React from 'react';
import ReactDOM from 'react-dom';

//引入组件
import HelloMessage from './test2.js';

ReactDOM.render(
  <HelloMessage name="Ozzie" />,
  document.getElementById('container')
)

打包

将 webpack.config.js 的入口文件修改为 app.js，再打包即可

React.js

本作品采用《CC 协议》，转载必须注明作者和本文链接

Ozzie

81 声望

That's the price I pay...

1 人点赞

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

React 新手路（一）：初识 React、JSX 与组件

小介

初识 react 与 JSX

原始写法

使用JSX

查看效果

参考资料

将官方链接打包

多个组件

功能分开

打包

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

React 新手路（一）：初识 React、JSX 与 组件

小介

初识 react 与 JSX

原始写法

使用JSX

查看效果

参考资料

将官方链接打包

多个组件

功能分开

打包

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

React 新手路（一）：初识 React、JSX 与组件