react学习总结

一、在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 集成到现有代码仓库，尝试更灵活的工具链。