前言

作为一个前端开发有些不好意思，居然还没有接触过 React ，就借这段时间积累下 React 相关经验，为疫情过后能有更多的就业机会。

如果你已经是个经验丰富的 React Developer 可能这系列文章不太适合你阅读。

虽然我承认下面大多数内容，基本都可以在官网找到原型。 但我会努力让你们尽可能不枉此行，如果有不对之处，望各位评论指出。

推荐工具链

我们可以像以前使用 jquery 一样，通过 script 脚本来引用 React ，并作为我们快速上手。

React 提供了多种工具链来帮助我们开始构建一个新应用：

· 如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。

· 如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。

· 如果你是在构建面向内容的静态网站，试试 Gatsby。

· 如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

我这里只是学习之用，所以选择开箱即用的 Create React App 方式，它会创建一个 SPA 单页面应用。

create-react-app

这是个简单的脚手架，它帮我们封装了 webpack 构建工具，使我们能快速启动一个 React 项目。

-h

create-react-app help 命令介绍：

安装

可以参考官网，直接使用如下命令安装，并启动应用：

npx 是会判断 npm package 是否已安装，并按照对应的脚本命令执行对应 npm package 。

可以简单的认为上面的命令做了如下事情：

启动

进入到新建的 app 文件夹，通过 script 命令启动：

你将看到这样一个页面：

项目初窥

项目脚本

我并不是太了解 npm 所有的 api ，但有个习惯是：每当接触一个陌生项目，通常会先去看 package.json 文件。

然后在 scripts 选项中，看大致有哪些脚本：

当然目前我们只要暂时知道 start 和 build 就行了。

webpack

注意到，整个项目使用了 react 相关三个核心 package ：

并且所有的 scripts 命令都涉及 react-scripts ，当打开此包的目录，了解到这包就是帮我们做了 webpack 配置：

无论是否掌握 webpack ，有兴趣可以看些别人写的 config ，起码对于我来说是有很多地方可以借鉴的，以便日后自己建脚手架踩坑。

sass

由于 css 写起来并不是怎么好，试下是否可以用 sass 之类的 css 预编译语言？

在官网说是支持的，并且有详细的说明。

把项目自带的 css 文件，重命名为 scss 后缀后，正常运行：

值得注意，只支持 sass ，比如 less 是不支持的，可以在对应的 webpack config 找到相关配置：

更多信息

当然实际使用可能会遇到其他问题，更多细节可以参考 create-react-app 的官网。那里会有很多最佳实践的方式。

React 相关

如果有 vue 之类现代化前端框架经验的开发，肯定能很快摸清这个 React 项目的结构，甚至马上上手 React 。

主入口

index.js 肯定 webpack 构建的 entry 文件，也是整个单页面的起始点。

在里面通过 ReactDOM.render 来渲染 App 组件，并且挂载到 html 上的 Id 为 root 的节点上。

组件

作为第一个基础的组件示例，能看到最后 App 由 export default 默认导出，并在 index.js 通过 JSX 来解析使用。

App 方法中，按照 JSX 语法编写。

虽然我现在就是把它当 HTML 来认为，但这两者一定有所不同。因为注意到 className ，并不是 class 属性。

同时也看到通过 {} 大括号 来引用一些变量值。

这就是目前看到有关 React 的影子。

总结

离正儿八经的业务项目肯定还有很长一段路要走，不过对于我这样刚上手学习 React 已经足够了，接下来就看 React 相关概念，逐步入门。