一、学习指南

1. 在线体验 React 方法

可以使用 codepen、codesandbox 在线体验 React，官网链接如下

或者可以使用这样一个缓慢的运行时代码

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Hello World</title>
  6.     <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  7.     <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  9.     <!-- Don't use this in production: -->
  10.     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  11.   </head>
  12.   <body>
  13.     <div id="root"></div>
  14.     <script type="text/babel">
  16.       ReactDOM.render(
  17.         <h1>Hello, world!</h1>,
  18.         document.getElementById('root')
  19.       );
  21.     </script>
  22.     <!--
  23.       Note: this page is a great way to try React but it's not suitable for production.
  24.       It slowly compiles JSX with Babel in the browser and uses a large development build of React.
  26.       Read this section for a production-ready setup with JSX:
  27.       https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
  29.       In a larger project, you can use an integrated toolchain that includes JSX instead:
  30.       https://reactjs.org/docs/create-a-new-react-app.html
  32.       You can also use React without JSX, in which case you can remove Babel:
  33.       https://reactjs.org/docs/react-without-jsx.html
  34.     -->
  35.   </body>
  36. </html>

2. 怎么学习 React

React 需要有一定的 JavaScript 的经验。如果感觉同时学习 JavaScript 和 React 很难，可以通过这个 JavaScript Overview 检查一下 JS 知识水平

如果被 JavaScript 的某些东西搞糊涂了，可以在 MDN 和 javaScript.info 寻找资料

React 的最好学习资料是官网，看英文版，其他的博客、书籍、视频都只是补充

二、在网站中添加 React

  • React 被设计为渐进式的，所以可以按需使用或多或少的 React
  • 并不是所有网站都是单页面应用，所以我们可以使用几行代码，不用构建工具尝试在小部分内容使用 React

使用 React 的步骤

  1. 在 HTML 添加一个 DOM container，可以在 body 内的任何位置放置一个 container
  2. 添加脚本标签，引入 react 和 react-dom
  3. 创建 React 组件并使用

在生产环境时要确保使用 production.min.js 的版本，否则会有性能影响

三、创建 React 应用

工具链

  • create-react-app：创建单页面应用
  • next.js：使用 Node.js 构建服务端渲染网站
  • Gatsby：构建一个静态的面相内容的网站
  • NEUTRINO、Nx、Parcel、Razzle：其他灵活的工具链

一个 JavaScript 构建工具链通常由以下组成

  • 一个包管理器：比如 yarn、npm
  • 一个打包机：比如 webpack、parcel
  • 一个编译器：比如 babel

四、CDN 引入 React

开发环境下

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

生产环境下

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

五、React 版本

React 依赖一个繁荣的开源社区来提交 bug 报告、拉去请求和提交 RFCs

React 有三种不同的发布通道，它们有着各种不同的目的

  • Latest：稳定版本，我们使用 npm 安装时的版本
  • Next：下一个版本的候选版本，正在与第三方库做集成测试
  • Experimental：实验版本，包含一些实验性的 APIs 和特性，对其进行尝试

六、参考链接

安装：https://reactjs.org/docs/getting-started.html