前言
作为一个前端开发有些不好意思,居然还没有接触过 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 相关概念,逐步入门。