5.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.创建单页面应用的方式

Create React App

npx create-react-app my-app
cd my-app
npm start
npm run build

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

发表评论

登录后才能评论