react学习总结(安装篇)一、在html中开始一个react 步骤 1：添加一个 DOM 容器到 HTML 步骤 2

一、在html中开始一个react

步骤 1：添加一个 DOM 容器到 HTML

<!-- ... 其它 HTML ... -->

<div id="like_button_container"></div>

<!-- ... 其它 HTML ... -->

步骤 2：添加 Script 标签，引入react文件

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

前两个标签加载 React。第三个将加载你的组件代码。

步骤 3：创建一个 React 组件

// ... 此前粘贴的代码 ...

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

提示：为生产环境压缩 JavaScript 代码

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

方案二：使用 React 和 JSX快速开始

在项目中尝试 JSX 最快的方法是在页面中添加这个

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，你可以在任何 <script> 标签内使用 JSX，方法是在为其添加 type="text/babel" 属性。

这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用于生产环境。当你准备好更进一步时，删除你添加的这个新的 <script> 标签以及type="text/babel" 属性。取而代之的，你将设置一个 JSX 预处理器来自动转换所有 <script> 标签的内容。

在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1：执行 npm init -y （如果失败,gist.github.com/gaearon/246…)
步骤 2：执行 npm install babel-cli@6 babel-preset-react-app@3 我们在这里使用 npm 只是用来安装 JSX 预处理器，之后你不再需要它。React 和应用程序代码都可以继续使用 <script> 标签而不做任何更改。

运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod

注意：

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

二、使用工具链创建新的 React 应用

React 团队主要推荐这些解决方案：

如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。

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

如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。
如果你是在构建内容主导的静态网站，试试 Gatsby。
如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

三、CDN链接

3.1开发环境

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

3.2生产环境

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

如果需要加载指定版本的 react 和 react-dom，可以把 17 替换成所需加载的版本号。

如果你通过 CDN 的方式引入 React，我们建议你设置 crossorigin 属性：

<script crossorigin src="..."></script>

同时建议你验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求头

react学习总结(安装篇)