1.使用React的两种方式

1.直接添加到网站的方式

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- 我们将把React组件嵌入到这个div中 -->
    <div id="like_button_container"></div>

    <!-- 加载 React -->
    <!-- 注意: 部署时,将 "development.js" 替换为压缩过以后的 "production.min.js" -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- 加载我们的 React 组件 -->
    <script src="like_button.js"></script>

  </body>
</html>

like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

压缩 like_button.js 代码

确保计算机已安装Node.js,然后在项目文件夹下运行如下命令:

npm init -y
npm install terser
npx terser -c -m -o like_button.min.js -- like_button.js

安装 JSX 预处理器(Babel)

以下这两段代码是等价的。

//浏览器原生支持
const e = React.createElement;

// 显示一个 "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);
//JSX
// 显示一个 "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

若想支持JSX,需要安装 JSX 预处理器(Babel)。确保计算机已安装Node.js,然后在项目文件夹下运行如下命令:

npm init -y
npm install babel-cli@6 babel-preset-react-app@3

以下命令会创建一个名为 src 的文件夹并启动了一个对 JSX 的自动监听器。

//运行 JSX 预处理器
npx babel --watch src --out-dir . --presets react-app/prod

2.搭建一个 Vite 项目的方式

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/react/9702.html

(0)
上一篇 2021年11月1日 18:05
下一篇 2021年11月2日 00:55

相关推荐

  • 5.React函数组件和类组件

    组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。 注意: 组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。 函数组件 类组件

    React教程 2021年11月5日
    02680
  • 7.React事件的介绍

    事件处理 React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 例如,下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮: 向事件函数传递参数

    React教程 2021年11月7日
    03090
  • 2.React元素渲染的流程

    1.创建DOM容器 2.创建React元素 2.1创建JSX 2.2JSX自动转换为浏览器原生支持 2.3浏览器原生支持转换为React元素(JS对象) 3.渲染React元素

    React教程 2021年11月2日
    03110

发表回复

登录后才能评论