跳到主要内容

安装

在网站中添加 React

开发环境

</body> 添加:

<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>

生产环境

<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>

快速尝试 JSX

添加

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

你可以在任何 <script> 标签内使用 JSX,方法是在为其添加 type="text/babel" 属性

将 JSX 添加到项目

  1. 执行 npm init -y ,如果失败,请尝试将项目文件夹改为全小写

  2. 执行 npm install babel-cli@6 babel-preset-react-app@3

运行 JSX 预处理器

  1. 创建 src 文件夹

  2. 执行 npx babel --watch src --out-dir . --presets react-app/prod

创建新的 React 应用

创建一个新的单页应用 -- Create React App

Create React App

执行:

npx create-react-app my-app
cd my-app
npm start

用 Node.js 构建服务端渲染的网站 -- Next.js

Next.js

Next.js 的官方指南

面向内容的静态网站 -- Gatsby

Gatsby

Gatsby 的官方指南入门示例

从头开始打造工具链

原地址