create-react-app教程-使用篇

原文连接 create-react-app教程-使用篇

是否是厌倦了每次新建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 语法支持
  • JSX,
  • Flow
  • TypeScript.
• 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';
复制代码