尝试 React

可以在线上尝鲜 React，本地完全不需要安装任何东西。

React 官方文档中有许多代码沙箱。在官网外，还有很多优秀的在线编辑器，比如 CodeSandbox, Stackblitz 或 CodePen。

本地尝鲜

如果希望在本地尝试 React，可以新建一个 HTML，引入相关库。具体代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World</title>
        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        
        <!-- 生产环境千万不要使用它 -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    
    <body>
        <div id="root"></div>
        
        <script type="text/babel">
            ReactDOM.render(
                <h1>Hello, world!</h1>,
                document.getElementById('root')
            );
        </script>
    </body>
</html>

开启全新 React 项目

如果希望开启全新的 React 项目，可以使用完整的工具链，提升开发体验。

React 只是一个 UI 库，它不关心路由或状态管理。这些功能需借助第三方库实现。

从 React 工具链开始

如果初次接触 React，推荐使用 Create React App，这是尝试 React 特性的最流行方法。只需一行命令就可以使用 Create React App：

npx create-react-app my-app

然后，使用如下命令运行应用：

cd my-app
npm start

更多信息可以查阅官方文档。

Create React App 不负责后端逻辑或数据库；它仅创建前端构建流水线。因此你可以将它同任何后端技术栈结合。但是，如果你需要更多的特性，比如路由或服务端渲染等，继续读下去！

其他选项

Create React App 适合刚刚接触 React 的新手。如果你想有更轻快的工具链，可以试试下面的工具：

使用框架构建 React

如果你要创建更大的、生产级别的项目，可以使用 Next.js。Next.js 是一个流行的轻量框架，适合创建静态或服务器渲染应用。它自带许多特性，比如路由、样式和服务器渲染，可以快速启动。

更多详情，请参照 Next.js 官方文档。

其他选项

Gatsby 可以创建静态网站，基于 React 和 GraphQL
Razzle 是一个服务端渲染框架，零配置，灵活性优于 Next.js

自定义工具链

当需要自定义构建流程时，要知道完整的 JS 构建工具链包含如下部分：

包管理器，比如 npm 或 yarn
打包器，比如 Webpack, Snowpack 和 Parcel
编译器，比如 Babel

在大型项目中，你可能需要在单个仓库中管理多个包（即 monorepo）。Nx 就是一种管理 monorepo 的工具。

如果你想从零开始构建自己的工具链，可以参考这篇文章，它从底层开始，构建了 Create React App 的部分功能。

「译」安装 React

尝试 React

本地尝鲜

开启全新 React 项目

从 React 工具链开始

其他选项

使用框架构建 React

其他选项

自定义工具链