是不是厌倦了每次新建web项目繁琐的配置,想不想只用10秒搭建就搭建一个完整的react项目?
create-react-app 分为两个部分
- 其中
create-react-app
是创建单页面的react脚手架项目脚本 ; - 而
react-scripts
则管理着工程的依赖。
如果我们手动创建react web应用程序的时候,要自己通过 npm 或者 yarn 安装项目的全部依赖,再写webpack.config.js,一系列复杂的配置,搭建好开发环境后写src源代码。使用 create-react-app 去自动构建你的app程序, 你的项目无需配置,也没有复杂的目录结构,只有你构建应用所需的文件。省去了很多精力,最适合快速上手一个demo了。
create-react-app 使用
先来看看如何十秒上手create-react-app!
//my-app 是你要创建的web单页面项目名字
npx create-react-app my-app
//npx 需要 npm 5.2+
cd my-app
npm start
复制代码
输入上述命令后,打开 http://localhost:3000/ 就可以看到初始页面了~
文件结构
接着上面的命令,可以看到生成了如下文件:
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
复制代码
public/index.html 是页面模板,src/index.js 则是入口JS文件
其中src
目录和 public
目录需要注意下。只有在src
目录下的文件才会被webpack编译,js和css文件都建议放在此处;而public
文件夹则存放着被 public/index.html使用的资源。
webpack配置
对于喜欢手动创建web项目的人来说,没有webpack的配置很是不习惯啊!我就是要手动配置webpack怎么办?
那就是使用 github.com/timarney/re… 使用react-app-rewired
需要三步:
1) 安装 react-app-rewired
npm install react-app-rewired --save-dev
复制代码
2) 在项目根目录创建 config-overrides.js
文件
/* config-overrides.js */
module.exports = function override(config, env) {
//console.log('原webpack配置 config:',config)
//在这里修改config就行
//console.log('修改后webpack配置 config:',config)
return config;
}
复制代码
3) 修改package.json中script:
/* package.json */
"scripts": {
// "start": "react-scripts start",
"start": "react-app-rewired start",
// "build": "react-scripts build",
"build": "react-app-rewired build",
// "test": "react-scripts test --env=jsdom",
"test": "react-app-rewired test --env=jsdom"
}
复制代码
那么如何查看create-react-app
自带的依赖配置呢?
答案就是使用npm run eject
。npm run eject
的作用就是将原有隐藏的依赖(比如Webpack, Babel, ESLint等)暴露出来, 请注意这是不可逆的行为。
//npm run eject执行后 项目下多了这样的文件
//我的create-react-app版本为1.5.2
|-config
|-jest
|-cssTransform.js
|-fileTransform.js
|-env.js
|-paths.js
|-webpack.config.dev.js
|-webpack.config.prod.js
|-webpackDevServer.config.js
复制代码
查看 webpack.config.dev.js
和 webpack.config.prod.js
支持的支持的依赖大致有:
- React, JSX, ES6, TypeScript 和 Flow 语法支持
- ES6以外的特性
- Exponentiation Operator (ES2016).
- Async/await (ES2017).
- Object Rest/Spread Properties (ES2018).
- Dynamic import() (stage 3 proposal)
- Class Fields and Static Properties (part of stage 3 proposal).
- 通过Autoprefixer 帮你的css文件自动添加浏览器兼容前缀
- 快速交互式单元测试运行程序,内置对覆盖率报告的支持。
- 一个能检查常见错误的实时服务器
- 打包脚本 能输出带 hashes 和 sourcemaps信息.
- 使用单个react-script脚本对上面依赖无侵入更新
使用sass样式
在create-react-app中使用 Sass需要以下步骤:
1) 安装 node-sass
npm install node-sass --save
# or
yarn add node-sass
复制代码
现在你可以重命名 src/App.css
为 src/App.scss
然后在 src/App.js
中更新为 import src/App.scss
,.scss 或 .sass 后缀的文件会自动被编译。
使用 Bootstrap
你可以尝试使用下reactstrap, 这是一个流行的整合bootstrap和react的库。
1) 安装
npm install --save reactstrap bootstrap@4
#or
yarn add bootstrap@4 reactstrap
复制代码
2) 在你的src/index.js 文件内容的顶部,导入 Bootstrap CSS 和可选的 Bootstrap theme CSS
import 'bootstrap/dist/css/bootstrap.css'; // 必须的
import 'bootstrap/dist/css/bootstrap-theme.css'; // 可选的
复制代码
3) 使用 reactstrap 组件
import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';
复制代码