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