

首页  思维导图  详情



安装

2022-05-07 16:44:40   0  举报





仅支持查看

AI智能生成

结构分析

模版推荐

作者其他创作

大纲/内容

在线体验

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=&quot;text/babel&quot; 属性

然而，它会使你的网站变慢，并且不适用于生产环境

取而代之的是，设置一个 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 替换成所需加载的版本号

 Collect

Get Started

手机预安装

 Collect

Get Started

安装形式图

 Collect

Get Started

插件描述安装

 Collect

Get Started

设备安装检查历史 (1)





0 条评论

下一页