create-react-app入门教程

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack,并配置了一系列内置的loader和默认的npm的脚本,可以很轻松的实现零配置就可以快速开发React的应用。

Quick Start(快速入门)

全局安装

首先确保你电脑上安装最新的

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start

以上命令执行完成后,则自动打开: http://localhost:3000/

如果你不能确保最新版本,可以先尝试卸载: npm uninstall -g create-react-app,然后再全局安装。

构建React项目的其他方式

  • npm
# npm init <initializer> is available in npm 6+
npm init react-app my-app
  • Yarn
# yarn create is available in Yarn 0.25+
yarn create react-app my-app

项目目录

项目的默认目录:

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用,这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件(开始执行的入口)!!!!
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

默认的npm的脚本

启动开发

npm start
# or
yarn start

启动测试

npm test
#or
yarn test

构建生产版本

npm run build
#or
yarn build

解压默认的webpack配置到配置文件中

npm run eject

启用sass

react-scripts@2.0.0 以上版本才适用。

安装依赖

要使用Sass必须首先安装node-sass

$ npm install node-sass --save
$ # or
$ yarn add node-sass

安装完之后,我们就可以直接把原来的CSS文件后缀直接改为 .scss 或者.sass,然后组件中导入的文件不再是 css文件而给我scss文件即可。

import React, {Component} from 'react';
import store from './Store/Index';
import {AddNumCreator, MinusNumCreator} from './Store/ActionCreaters';
import './App.scss';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>潇洒</h1>
        </header>
      </div>
    );
  }
}

export default App;

在sass文件中引入其他sass文件

  • 引入src中的scss文件 @import 'styles/_colors.scss';

  • 引入node_modules中的样式: @import '~nprogress/nprogress';

~ 就代表: node_modules

CSS Modules支持

导入CSS文件或者Sass文件的时候,可以用一个变量接收一下返回值。那么就可以直接通过它来访问CSS或者Sass中的内部样式类了。比如:

  • Button.module.css
.error {
  background-color: red;
}
  • Button.js
import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

结果:

<!-- This button has red background -->
<button class="Button_error_ax7yz">Error Button</button>

了解更多关于CSS模块化

公共目录

公共目录里面的内容不会被webpack进行处理,仅仅会拷贝到最终生成的项目的根目录下。

HTML模板修改

public目录中有个index.html是单页面应用的基本模板,所有react生成的代码都会注入到此HTML中。所以此处可以添加一些cdn脚本或者全局的html。

添加全局的资源(图片、字体、svg、视频等)

在公共目录下,你可以放字体文件、图片、svg等文件,访问这些文件最好添加 %PUBLIC_URL%作为根目录。

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

环境变量

巧妙的使用环境变量可以帮我们在项目中区分开生产环境还是编译环境,从而执行不同的代码。

命令行直接添加环境变量

  • Windows (cmd.exe)
set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start
  • Windows (Powershell)
($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)
  • Linux, macOS (Bash)
REACT_APP_NOT_SECRET_CODE=abcdef npm start

添加自定义环境变量文件.env

项目根目录下创建.env文件,文件内部添加 key=value的配置可以直接应用于项目的编译中。

REACT_APP_NOT_SECRET_CODE=abcdef

Note: 如果创建自定义的环境变量必须以REACT_APP_开头.

在项目中使用环境变量

在项目中可以直接用process.env.XXX访问我们的自定义的环境变量。比如:

  • js中使用
render() {
  return (
    <div>
      <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
      <form>
        <input type="hidden" defaultValue={process.env.REACT_APP_NOT_SECRET_CODE} />
      </form>
    </div>
  );
}

再比如:判断是否是生产环境

if (process.env.NODE_ENV !== 'production') {
  analytics.disable();
}
  • HTML中使用

<title>%REACT_APP_WEBSITE_NAME%</title>

配合TypeScript

第一种方式:创建项目的时候直接配置好TypeScript.

npx create-react-app my-app --typescript
#or
yarn create react-app my-app --typescript

第二种方式:为现有的React项目添加TypeScript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jest

配置代理

package.json配置代理

配置简单代理,直接在package.json文件中添加proxy节点即可:

{
  ...
  "proxy": "http://localhost:4000",
  ...
}

自定义配置代理

第一步:安装 http-proxy-middleware

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

第二步:创建: src/setupProxy.js 添加如下内容:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(proxy('/api', { target: 'http://localhost:5000/' }));
};

## Visual Studio Code配置React开发环境

### React集成VSCode测试

第一步:
首先安装:[`Debugger for Chrome`](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)插件。
第二步: 项目根目录下创建 `.vscode`文件夹。
第三步:创建`launch.json`文件
文件内容:

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

此时可以F5直接启动测试了。

插件

  • Reactjs code snippets
  • Prettier - Code formatter
  • ES7 React/Redux/GraphQL/React-Native snippets
  • eslint

HTTPS托管静态站

有时候需要用HTTPS进行调试相关结构,所以需要把静态站也做成HTTPS的,那么以下配置:

配置HTTPS的环境变量为true然后再用npm start启动dev server就是HTTPS的了。

  • Windows (cmd.exe)
set HTTPS=true&&npm start
  • Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
  • Linux, macOS (Bash)
HTTPS=true npm start

浏览器可能有安全警告,不用管,直接测试,enjoy it!

分析包结构的大小

Source map explorer可以帮助我们分析代码最终打包的bundles的代码来自哪里,

安装:

npm install --save source-map-explorer
#or
yarn add source-map-explorer

添加分析脚本到package.jsonscripts中:

   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

那么就可以运行以下命令进行分析最终打包的情况了:

npm run build
npm run analyze

其他react的默认配置

  • 直接可以使用sass(安装node-sass模块后)
  • 直接可以使用css(import)
  • 直接可以导入 图片、svg、字体文件等,已经配置好相应的loader
  • ES67代码直接可以用
    • class
    • 箭头函数
    • 私用变量
    • 静态属性
    • 继承
    • 装饰器(XXX不能用)

参考

  1. 官网文档

AICODER官网地址:https://www.aicoder.com/

AICODER分享地址: https://www.aicoder.com/news/5c1afb763139e4295bd5330a/news.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343