create-react-app学习笔记

开始
npm install -g create-react-app
create-react-app aa
cd aa
npm start

1，文件结构

public和src目录下的index文件必须存在不能改名，其它文件可以删除和改名，react为了达到最快速的代码重建，只有在src根目录下的文件会被webpack编译，所以必须把文件放在src下，否则webpack不会识别
你可以创建更多的和public同级的顶级目录，他们不会包含在项目构建中，你可以使用他们作为项目文档

2，可用的脚本命令

npm start 在http://localhost:3000下监视文件，文件修改将自动更新，你可以在控制台中看到检测错误
npm test在交互监视模式下启动测试运行程序npm test在交互监视模式下启动测试运行程序
npm run build在生产环境中编译代码，并放在build目录中
npm run eject 注意：
这是一个单向操作，一旦使用，就不能恢复了。如果你对create-react-app这个构建工具和配置不满意，你可以任何时候eject，之后出eject命令以外其余命令都可用

支持最新的js语法和垫层。这个项目支持es6，es7，es8等

3，添加图片

使用import导入一个图片或者一个文件，返回的这个路径值可以当做src或者href的属性，SVG格式的图片不支持这项设置
例：import image from ‘./image.png’ image就是绝对路径
注意：在css文件中导入图片等静态资源，使用相对路径，webpack在编译的时候会自动的替换成绝对路径

4，使用public目录

例：link rel=“shortcut icon” href="%PUBLIC_URL%/favicon.ico"
引入是路径写成"%PUBLIC_URL%" + "/favicon.ico"这种格式
什么时候使用public文件夹
需要一些文件有特殊的文件名
当你有很多图片，并且这些图片的路径是动态添加的
js库和webpack是有冲突的，你必须通过script标签的形式导入

5，使用全局变量

如果你在你的src目录中的js文件中使用js文件中的全局变量，那么会报错，因为eslint并不知道这个变量是什么，为了避免这个错误的发生可以通过window来访问，为了避免这个错误的发生可以通过window来访问，即const
$ = window.$;这样类似的结构就可以访问到全局变量，如果你不想通过window访问可以在使用变量的那一行代码的后面添加 //
eslint-disable-line 此注释即可

6，添加bootstrap

https://react-bootstrap.github.io/,这是react-bootstrap的官网
npm install --save react-bootstrap bootstrap@3
css还要单独的引入，在src/index.js中导入
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap/dist/css/bootstrap-theme.css’
在src/App.js中导入你自己要的组件
import {Navbar,Jumbotron,Button} from ‘react-bootstrap’

7,添加flow

Flow是一个静态数据类型检测工具，js的数据类型可以随便修改，就是给一个值赋值数字，然后经过后台传递的数据修改成了字符串版的数字，就导致程序运行失败，但是谷歌也不报错，
http://flowtype.org/,下面是将flow引到react中 npm install --save flow-bin
在package.json文件中添加命令 “flow”: “flow” 运行 npm run flow init 会生成
.flowconfig配置文件，不用动他然后在你需要检测的文件的顶部添加 // @flow 注释，当你把代码写好后运行npm run
flow，就可以检测是否有数据类型错误了

8,添加环境变量

在项目中可以使用声明在环境中的变量，就好像这个变量是定义在项目的js文件中一样，默认情况下，可以使用的环境变量有NODE_ENV(这个环境变量已经定义好了)，和其他以REACT_APP_开头的环境变量
这些环境变量在构建的过程中会自动替换成想要的值，如果在运行的过程中，在静态文件中修改或者使用环境变量，项目不会做出响应，所以你可以重新编译项目
普通的环境变量的创建必须要添加REACT_APP_开头，并且其他的环境变量除了NODE_ENV以外，都会被忽略，这是为了避免和系统本机的公钥冲突，如果修改了环境变量，必须重启你的项目
这些环境变量会被定义在process.env上面，比如你有一个环境变量叫做REACT_APP_SECRET_CODE，当你在js中使用必须通过process.env.REACT_APP_SECRET_CODE才能访问到
有一种内置的环境变量叫做NODE_ENV，你可以通过process.env.NODE_ENV访问到这个变量，react不允许自己设置这个变量的值，默认已经设置好了，有development,test,production这几种情况
这些环境变量可以很方便的得到运行环境的相关信息和项目本身之外的敏感数据信息
使用环境变量之前需要自己定义变量，定义变量的方式有两种，第一种是在你的命令行工具中定义，第二种是新建一个.env文件，在public中的index.html中也可以使用环境变量%REACT_APP_WEBSITE_NAME%必须以REACT_APP开头，所有的环境变量都是编译的时候插入
第一种方式：通过命令行的方式临时的添加环境变量，只介绍windows
set REACT_APP_SECRET_CODE=abcdef&&npm start
第二种方式：将环境变量定义在.env文件中
在项目根目录中创建.env文件，在里面定义变量 REACT_APP_SECRET_CODE=abcdef，还有其他类型的文件，自行了解

9，解决后端api接口和前台跨域的问题，一般情况下，我们的后台服务器和开发前台代码的服务器是不一样的，解决这个问题可以直接在package.json文件中添加 “proxy”: “http://…” 这样你在你的localhost下面访问后台api如/api/todos直接代理到上面指定的域名中，所以跨域问题就解决了，要注意这种方式只能在开发环境中使用
特殊：如果你开发代码的环境不是在locallhost下面，那么上述方法也会是没用的，关于解决办法自行查看官网
自定义设置proxy
几种代理路径的方式{
// …
“proxy”: {
// 以/api的请求都匹配
“/api”: {
“target”: “<url_1>”
},
// 匹配/bar/abc.html
“/bar/.html": {
“target”: “<url_3>”
},
// 匹配 /baz/abc.html and /baz/sub/def.html
"/baz/**/.html”: {
“target”: “<url_4>”
}
}
// …}
设置的配置项的具体细节，请查看https://github.com/chimurai/http-proxy-middleware#options

在开发环境中使用HTTPS ，可能你后台使用https的，所以你可以在cmd运行的时候输入set HTTPS=true&&npm start

10，运行测试功能
react脚手架使用jest作为测试工具，jest工具用来做单元测试的，端到端的测试react不支持
jest找自己的测试文件，放在src目录下，有如下三条规则

1.__tests__目录下的.js文件
2.后缀.test.js文件
3.后缀.spec.js文件

建议最好将测试文件和源文件放一起，减少搜索路径
命令行接口
当你运行npm run test，jest会开启watch模式，一旦以保存文件，就会重新更新

create-react-app学习笔记

create-react-app学习笔记

猜你喜欢