create-react-app

---

create-react-app是最好用的react脚手架工具之一。我们使用它来搭建我们的react项目。

下载安装

npm install -g create-react-app

安装完成之后，创建一个自己的应用，创建完成之后进入该目录下。

create-react-app my-app
...
cd my-app

启动这个项目，启动之后访问http://localhost:3000/就可以打开项目了。

npm start   //或者
yarn start

安装依赖遇到的坑

我用create-react-app命令创建了一个项目，然后用npm安装react-router。结果项目就无法启动了，报错react-scripts不是内部命令...。

搜了一下：create-react-app默认是使用yarn安装的，所以有可能冲突了。可以使用以下方法解决;

1. 一直使用yarn安装，以后使用的依赖全部使用yarn安装

yarn add react-router

2. 在创建项目的时候，指定使用npm安装，带上--use-npm参数即可。

help.png

create-react-app my-app --use-npm

结构

整体目录结构很清晰简单，要写的代码全部写在src目录下。

目录结构.png

每一个组件代码结构是这样，先引入要使用的文件（包括css、图片等），写自己的组件，最后导出自己的组件。

代码结构.png

入口文件index.js中引入了一个registerServiceWorker，为react项目注册了一个service worker。用来做资源缓存，不仅提升访问速度，而且可以离线访问。

index.png

gatsby-cli

---

安装启动

npm install -g gatsby-cli

gatsby new my-gatsby
cd my-gatsby
gatsby develop

更多

启动器

gatsby-cli还支持安装由社区维护的样板Gatsby站点。gatsby new会从git上克隆下来项目并且清除git历史记录。

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

生产版本

上面的gatsby develop是启动一个开发版本，但是开发版本并没有进行优化，如果要构建一个生产版本使用

gatsby build

其它就不多做介绍了，因为并没有使用过，只是看到了就稍微补充一下。了解更多请查看文档