从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）