react 脚手架
1. 按装
npm i -g create-react-app2.创建项目
create-react-app my-appmy-app是自己设置的项目名称（遵循npm模块发布时的要求，例如，名字中布恩那个出现大写字母或者汉字以及特殊字符等）
3.进入项目暴露配置
cd my-app
npm start
npm init -y
生产的结构目录
my-app
|--build //构建目录，遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件
|
|-- node_modules //项目组件文件夹：所有安装的组件都在这
|
|--src //源码目录
| |--index.js //入口文件(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|--public //静态页面目录
| |--index.html //主页面(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|-- .gitignore //git提交的忽略文件，我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发，生成的文件)
|--package.json //项目依赖项及项目基础信息
|--README.md //项目描述
|-- ...复制代码
生成的package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": { //=>生产依赖项
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": { //=>可执行脚本
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
/** 可执行脚本注释:
* $ npm run start 启动服务，自动编译项目，可以实现边开发，边自动编译刷新，看到最新开发的效果
*
* $ npm run build 把项目整体进行编译，最后再bulid目录中生成项目编译后的文件，我们上传服务器的就是这些文件
*
* $ npm run test 使用Jest作为测试运行程序（不常用）
*
* $ npm run eject 下文具体介绍使用
*
* 当然以上操作也可以基于yarn来完成
*/npm run eject 上面提到，脚手架为了"优雅",隐藏了所有的webpack相关配置文件，如果我们想要基于原来的基础再次增加一些自己的东西，首先就要找到这些隐藏文件并且进行修改。
有的开发者直接到node_modules中去搜索webpack.config...等文件，然后进行修改，修改后发现生效了，但是当修改后，我们又安装了一些其它项目模块，重新编译的时候，又回到了原有的配置信息(很头疼的问题，总不能每一次安装新模块后，都重新改一次需要修改的配置吧...)
基于create-react-app创建完成项目后，会提供一个eject命令($ yarn eject)，基于这个命令，可以把隐藏的webpack文件展示出来，方便我们二次进行配置。
$yarn eject或者npm run eject 此命令执行完成不可逆转(慎重使用)
执行完成后，我们可以看到原有的结构目录发生了一些变化(新增两个文件夹,package.json中的内容也跟着发生改变)
创建了my-app目录，这个时候，使用下面的命令就可以开始开发应用了。
npm start
默认情况下，会在开发环境下启动一个服务器，监听在3000端口，它会主动给你打开浏览器的，可以立刻就看到这个app的效果。
4.线上编译
npm run build运行下面两条命令，可以查看线上生产环境的运行效果。
npm install -g pushstate-server
pushstate-server build
5.同端口问题
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'但是这样搞起来，还是有些复杂，然而，create-react-app提供了一个超级简单的方法，只需要在package.json文件中，加一个配置项就可以了。
比如：
"proxy": "http://localhost:3001/"Node.js安装
记得把导入的语句一同删除（删除后文件不存在导入会报错）
App.js
import React from 'react';
function App() {
return (
<div >
hello world
</div>
);
}
export default App;
简单的函数组件
function Header(){
return <h1>我是头部</h1>;
}function App() {
return (
<Header/>
);
}简单的类组件
import React, {Component} from 'react'
class App extends Component{
render(){
return (
<div>
hello world
</div>
)
}
}
export default App;
import React from 'react';
const Component = React.Component;
class App extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default App;
constructor(props){
super(props)
this.fun = this.fun.bind(this)
}
onClick = {() => ()} //绑定的事件名小驼峰写法
onClick = {this.fun.bind(this)}
如果写行内样式用双花括号{
{}} <p style={
{color:"red"}}>hello</p>
错误写法
