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.json
的scripts
中:
"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不能用)
参考
AICODER官网地址:https://www.aicoder.com/
AICODER分享地址: https://www.aicoder.com/news/5c1afb763139e4295bd5330a/news.html
create-react-app入门教程的更多相关文章
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- React Native入门教程2 -- 基本组件使用及样式
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
随机推荐
- DRF 权限 频率
DRF的权限 权限是什么 大家之前都应该听过权限~那么我们权限到底是做什么用的呢~~ 大家都有博客~或者去一些论坛~一定知道管理员这个角色~ 比如我们申请博客的时候~一定要向管理员申请~也就是说管理员 ...
- Codeforces.888G.Xor-MST(Borůvka算法求MST 贪心 Trie)
题目链接 \(Description\) 有一张\(n\)个点的完全图,每个点的权值为\(a_i\),两个点之间的边权为\(a_i\ xor\ a_j\).求该图的最小生成树. \(n\leq2*10 ...
- 上海交大ACM总教头俞勇讲述“最聪明人的故事”
这是一场世界大学生之间"最强大脑"的较量:这是拥有数十年历史的ACM国际大学生计算机程序设计大赛的赛场:斯坦福.加州理工.麻省理工.哈佛--当一个又一个在计算机科学领域拥有世界顶尖 ...
- Charles——前端必备模拟后端数据
Charles--前端必备模拟后端数据 现在都是前后端分离开发了,前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试,在这里给大家介绍一个前端神器--Charles. 安装 安装就不赘述了,直 ...
- HDU5518 : John's Fences
求出平面图的对偶图,那么需要选择一些环,使得这些环可以异或出所有环. 对于两个不同的区域,需要用一个代价最小的环把它们区分开,这对应最小割. 那么求出对偶图的最小割树,所有树边之和就是把所有区域都区分 ...
- python中 is 和 == 的区别
is 是比较两个引用是否指向了同一个对象(引用比较). == 是比较两个对象是否相等.
- C++程序设计方法3:自动类型转换
方法1:在源类中定义目标类型转换运算符 #include <iostream> using namespace std; class Dst { public: Dst() { cout ...
- ae:org.apache.shiro.authc.AuthenticationException: Authentication token of type [class org.apache.shiro.authc.UsernamePasswordToken] could not be authenticated by any configured realms. Please ensure
看问题是说要保证有一个realm正确,但是之前运行就一直成功,后来就不行了.有可能是:以为自己输入了正确的用户名和密码,结果是因为用户名前面添加了空格导致了这个错误发生. 实质问题是:你输入的用户名和 ...
- Java基础知识--泛型
什么是泛型?为什么使用泛型? 泛型,就是参数化类型.提到参数,最熟悉的就是定义方法时候的形参,然后调用此方法时传递实参.顾名思义,就是将类型由原来的具体的类型参数化,类似于方法中的变量参数,此时类型也 ...
- Oracle CPU使用率过高问题处理
1.下载Process Explorer 2.打开Process Explorer,查看CPU使用情况最高的进程 3.双击该进程,查看详情 \ 4. 获取cpu使用最好的线程tid 5. ...