React英文文档学习-1-React安装-创建项目-添加React到网站

lobster爱前端

已于 2023-01-23 12:59:57 修改

阅读量131

点赞数 2

分类专栏：前端文章标签： react.js 学习前端

于 2023-01-03 20:53:02 首次发布

本文链接：https://blog.csdn.net/qq_34557534/article/details/128538805

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

React安装-创建项目-添加React到网站

- - 001-React安装-创建项目-添加React到网站

001-React安装-创建项目-添加React到网站

React学习系列 - 来源React英文文档
章节链接： https://beta.reactjs.org/learn/installation

如何创建一个独立的React项目

使用CRA=Creat React App 创建项目

npx create-react-app my-app
cd myapp
npm start

用功能强大的框架构建React项目
- Next.js
- Gastby、Remix、Razzle
定制项目相关的工具集
- 包管理器：npm、yarn、npm
- 编译器：Babel、TypeScript、swc
- 打包构建器：webpack、Parcel、esbuild、swc
- 压缩器：Terser、swc
- 服务器：Express
- 错误处理提示器：ESLint
- 测试器：Jest

如何添加React到网页

1.添加root根标签

<!-- ... existing HTML ... -->
<div id="like-button-root"></div>
<!-- ... existing HTML ... -->

2.在</body>前添加script标签引入React
- react.development.js 可以定义React组件
- react-dom.development.js 可以让React将HTML元素转化为DOM
- like-button.js 编写自己的组件内容
- 生产环境将development.js替换为production.min.js
- 开发环境使用development可以提示错误，也会影响加载速度

   <!-- end of the page -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

3.编写React组件在like-button.js中

'use strict';
function LikeButton() {  
    const [liked, setLiked]  = React.useState(false);  
    if (liked) {    
         return 'You liked this!';  
    }  
    return React.createElement(
    	'button', 
    	{ onClick: () => setLiked(true), },
    	'Like');
    }

4.添加React组件到页面中

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

完整示例代码

<!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>

    <!-- We will put our React component inside this div. -->
    <div id="like-button-root"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Load your React component. -->
    <script src="like-button.js"></script>

  </body>
</html>

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

可以定义多root节点的class，渲染多个相同的React组件, 示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add Multiple React components on a single HTML page</title>
  </head>
  <body>

    <h2>Add Multiple React components on a single HTML page</h2>
    <p>This page demonstrates using React with no build tooling to add multiple components to a single page.</p>
    <p>React is loaded as a script tag.</p>

    <p>
      This is the first comment.
      <!-- We will put our React component inside this div. -->
      <div class="like-button-root" data-commentid="1"></div>
    </p>

    <p>
      This is the second comment.
      <!-- We will put our React component inside this div. -->
      <div class="like-button-root" data-commentid="2"></div>
    </p>

    <p>
      This is the third comment.
      <!-- We will put our React component inside this div. -->
      <div class="like-button-root" data-commentid="3"></div>
    </p>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

'use strict';

function LikeButton(props) {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked comment number ' + props.commentID;
  }

  return React.createElement(
    'button',
    { onClick: () => setLiked(true) },
    'Like'
  );
}

// Find all DOM containers, and render Like buttons into them.
// Note we're using CSS classes instead of IDs so that we can find several nodes.
document.querySelectorAll('.like-button-root').forEach((rootNode) => {
  const root = ReactDOM.createRoot(rootNode);
  // Read the comment ID from a data-* attribute.
  const commentID = parseInt(rootNode.dataset.commentid, 10);
  root.render(
    React.createElement(LikeButton, { commentID: commentID })
  );
});

5.压缩React组件代码js文件
- 安装Node.js
- npm init -y
- npm install terser
- npx terser -c -m -o like-button.min.js -- like-button.js
6.在项目使用JSX语法
- 增加babel转换工具
- 设置React组件js文件的type类型为text/babel
- 替换like-button.js内容为JSX语法

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="like-button.js" type="text/babel"></script>

return (
 <button onClick={() => setLiked(true)}>
   Like
 </button>
);

7.在项目中使用babel工具
- npm init -y
- npm install babel-cli@6 babel-preset-react-app@3
- 创建src文件夹
- npx babel --watch src --out-dir . --presets react-app/prod
- 将like-button.js放置到src文件夹下得到处理后的版本