React 新手路(一):初识 React、JSX 与 组件

小介

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


初识 react 与 JSX


原始写法

  1. 新建 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>
  2. 新建 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

  1. 简单了解 JSX
    • 相关文档:JSXJSX · TypeScriptJSX 简介
    • 虽然 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 来处理
  2. 初识 babel
    • 相关文档了解:Babel
  3. 现在,我们的文件目录如下:
    |-test.html
    |-test.js
  4. 安装 webpack 与 webpack-cli
    npm init -y
    npm install webpack webpack-cli --save-dev
  5. 安装 babel-loader、babel-core、babel-preset-env、babel-preset-react
    npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
  6. package.json 中的 "main" 已经是 test.js ,所以此处不做修改
  7. 配置 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",
            }]
        }
    }
  8. 此时,还需配置一个 babel 规则,新建一个 .babel 文件:
    {
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }

查看效果

  1. 如今,所有的配置工作都已经完成,我们需要将新的 test.js 打包:
    npx webpack
  2. 我们现在需要的是 bundle.js 而非 test.js,所以,我们需要将 html 修改一个地方:
    <!-- 加载你的 React 组件 -->
    <script src="./dist/bundle.js"></script>
  3. 打开 test.html 查看结果即可

参考资料

  1. webpack 配合 babel 使用
  2. 使用 Babel

将官方链接打包

  1. 我们现在的文件目录是:
    |-dist
        -bundle.js
    |-node_modules
    |-test.html
    |-test.js
    |-webpack.config.js
    |-package.json
    |-package-lock.json
    |-.babelrc
  2. 之前为了写 react ,我们用 script 引入了两个官方给的两个链接,实际上,我们可以通过 webpack 将这两个文件直接打包到 bundle.js
  3. Node.js 提供了 npm 这个极其强大的包管理工具,我们去搜索 react 再下载即可:NPM
    • 搜索 reactreact-dom

  4. 仔细阅读那上面的说明,我们下载如下:
    npm install --save react react-dom
  5. 现在直接删除那两个链接,然后在 test.js 中修改即可
    • 删除 test.html 中的那两个链接
    • test.js 的开始处添加:
      import React from 'react';
      import ReactDOM from 'react-dom';
  6. 再次使用 npx webpack 打包,查看结果,这与之前加入链接的结果没有区别

多个组件

功能分开

  1. 上面我们只写了一个组件,组件的定义和调用都集中在 test.js 中,但是当组件多起来之后,我们最好将这两个功能分开:分别建立专写组件的和专调用组件的文件
  2. 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 来将组件导出
  3. 新建 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,再打包即可

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!