react_05create-react-app脚手架详细解析(export)

是一种工具:快速生成项目的工程化结构，让项目从搭建到开发，到部署，整个流程变得快速和便捷。

1.安装node,安装完成后验证版本,出现对应版本就表示成功

复制代码

node --version
npm --version

2.React脚手架默认是使用yarn 管理,故还需要安装yarn(建议全局安装)

复制代码

npm install -g yarn

3.安装淘宝镜像

复制代码

npm install -g cnpm  --registry=https://registry.npm.taobao.org

4.安装React脚手架

复制代码

npm install -g create-react-app

1.通过终端命令运行:create-react-app react-demo

2.yarn start 可以将项目跑起来

目录结构分析

manifest.json 与serviceWorker.js这两个文件都是与PWA(Web App)有关,一般可以不用理会，除非你要做离线功能。

在目录中并看不到相关webpack的相关配置，因为脚手架默认隐藏了配置，若你需要看到相关配置信息，则可以通过package.json中的命令:yarn eject 来进行查看，并且此操作不可逆(执行后目录结构会改变，无法变回来)

此时运行项目发现页面可以正常展示项目了,但是我们一般会采用组件化方式来开发,需要进行部分修改

优化第一步:
index.js

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
constructor(){
super();
this.state={
counter:10
}
}
render(){
return (

{this.state.counter}

)
}
}
ReactDOM.render(<App/>,document.getElementById("root"))

此时重新运行项目，项目正常，只不过由原来的小段jsx变为渲染app组件。

优化第二步:
抽离出app.js

import React from 'react';
export default class App extends React.Component{
constructor(){
super();
this.state={
counter:101
}
}
render(){
return (

{this.state.counter}

)
}
}

index.js

复制代码

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(<App/>,document.getElementById("root"))

此时模块化已经初具雏形

Hello,World