安装
2022-05-07 16:44:40 0 举报AI智能生成
1
作者其他创作
大纲/内容
在线体验
在线体验
CodePen
https://react.docschina.org/redirect-to-codepen/hello-world
CodeSandbox
https://codesandbox.io/s/new
Glitch
https://glitch.com/edit/#!/remix/starter-react-template
Stackblitz
https://stackblitz.com/fork/react
在网站中添加
一分钟用上 React
步骤 1： 添加一个 DOM 容器到 HTML
步骤 2：添加 Script 标签
步骤 3：创建一个 React 组件
可选的JSX（快速尝试）
在项目中尝试 JSX 最快的方法是在页面中添加这个 标签：
分支主题
这样你可以在任何 标签内使用 JSX，方法是在为其添加 type="text/babel" 属性
然而，它会使你的网站变慢，并且不适用于生产环境
取而代之的是，设置一个 JSX 预处理器来自动转换所有 标签的内容
使用JSX 预处理器
安装 JSX 预处理器
本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js
在终端上跳转到你的项目文件夹，然后粘贴这两个命令：
步骤 1： 执行 npm init -y
步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3
运行 JSX 预处理器
创建一个名为 src 的文件夹并执行这个终端命令：
npx babel --watch src --out-dir . --presets react-app/prod
这个命令启动了一个对 JSX 的自动监听器
工具链
使用集成的工具链，有助于完成如下任务
扩展文件和组件的规模。
使用来自 npm 的第三方库。
尽早发现常见错误。
在开发中实时编辑 CSS 和 JS。
优化生产输出。
推荐的工具链
Create React App
一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式
Next.js
一个流行的、轻量级的框架，用于配合 React 打造静态化和服务端渲染应用
Gatsby
用 React 创建静态网站的最佳方式
更灵活的工具链
Neutrino 把 webpack 的强大功能和简单预设结合在一起。并且包括了 React 应用和 React 组件的预设。
Parcel 是一个快速的、零配置的网页应用打包器，并且可以搭配 React 一起工作。
Razzle 是一个无需配置的服务端渲染框架，但它提供了比 Next.js 更多的灵活性。
从头开始打造工具链
一组 JavaScript 构建工具链通常由这些组成：
一个 package 管理器，比如 Yarn 或 npm
一个打包器，比如 webpack 或 Parcel
一个编译器，例如 Babel
CDN 链接
开发环境
分支主题
生产环境
分支主题
注意
如果你通过 CDN 的方式引入 React，我们建议你设置 crossorigin 属性
如果需要加载指定版本的 react 和 react-dom，可以把 16 替换成所需加载的版本号
0 条评论
下一页
