从create-react-app开始react项目
开始
CreateReactApp是一个创建React单页应用的官方途径。它提供了一个无需配置的现代构建方式。
版本要求
Node>=6
快速安装
npx create-react-app my-app //创建项目my-app
cd my-app //进入目录
npm start //启动环境
提醒:推荐使用npx进行创建,如果以前使用过npm,可以通过npm uninstall -g create-react-app来卸载。
启动环境后,打开http://localhost:3000/ 可以看到你的react App,修改内容时会实时更新,很方便。
当你准备发布时,使用
npm run build
进行打包,会生成一个最小化的build。
另外你不需要安装或者配置像Webpack或者Babel之类的工具,它们在create-react-app中已经提前配置好了并且隐藏了起来。
输出目录结构
my-app
–README.md //说明文件
–node_modules //安装的依赖包位置
–package.json
–.gitignore
–public
----favicon.ico
----index.html //主页面,不能修改名字,这里面引用的文件都需要放在public文件夹下
----manifest.json
–src //Webpack只会处理src下的文件,js和css都需要放在这下面
----App.css
-----App.js
----App.test.js
-----index.css
-----index.js //JS入口,不能修改名字
-----logo.svg
-----serviceWorker.js
可用命令
npm start //进入开发者模式,修改实时展示
npm test //进入调试模式
npm run build //打包
npm run eject //将隐藏的webpack、babel等配置暴露出来,供个性化配置,这是单向操作,不能恢复
编辑器设置
笔者使用VS code
语法高亮
VScode中安装Sublime Babel扩展
lint
VScode中安装ESlint扩展
项目根目录下添加文件 .eslintrc.json
修改内容:
{
"extends":"react-app"
}
编辑器中Debug
需要安装VSCode Chrome Debugger Extension
在项目根目录下新建文件夹.vscode,文件夹中加入文件launch.json,写入以下代码块:
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
在VSCode中F5进入调试
(一开始报错
Can’t find Chrome - install it or set the " “runtimeExecutable” field in the luach config,
重新安装了一次Chrome就好了,可能之前安装的chrome有问题)
自动代码排版
npm install --save husky lint-staged prettier
在package.json中加入
"husky":{
"hooks":{
"pre-commit":"lint-staged"
}
}
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --single-quote --write",
"git add"
]
},
当你commit到git上时,会自动排版。
VSCode上使用Prettier:
安装Prettier - Code - formatter扩展
安装后快捷键Shift+Alt+F就可以排版文件
css
导入css文件
在JS文件中:
import './Button.css' //将Button.css中的样式全都导入
或者在index.css中写入你的样式
传统的link方式在html文件中加入css也是可行的。
加入Sass
可以通过Sass方式使用css
首先需要安装 node-sass
npm install node-sass --save
安装依赖
npm install --save dependence-name
导入组件
可以使用require()和module.exports
推荐ES6新模块import和export
例子:
import React,{Component} from 'react'
class Button extends Component {
render(){
//……
}
}
export default Button; //不要忘记使用export default
默认和命名export
export default A;//别的文件可以import AnyName from “./A”
export A; // 别的文件import {A} from “./A”
一个文件中可以有一个export default和多个命名export,导入时可以import A, {B,C} from './A’的形式导入
(参考官方文档
https://facebook.github.io/create-react-app/docs/getting-started)