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：

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

从0体验创建过程:

• es6导入导出

  //情形一
  export function sum(a,b){
  return a+b
  }
  export function mul(a,b){
  return a*b
  }
  //在另外的文件中引用
  import{sum,mul} from './xxx'

  //情形二
  export default function sum(a,b){
  return a+b
  }
  //引用
  import sum from './xxx'

• 标签自动补全插件:htmltagwrap

• 正式开始新建工程

  1.创建完后删除不必要的文件，值保留public文件夹下index.html，src目录下全删，然后新建index.js空白文件

  
  空白工程

  2.我们知道项目的入口是index.js，现在里面是空白的，运行项目页面肯定是空白的，接下来在里面添加内容。

  import React from 'react';// 渲染jsx

  Hello,World

  ,实际上是react.createElement，所以React也是要导入
  import ReactDOM from 'react-dom';//ReactDOM.render需要，所以得导
  ReactDOM.render(

  Hello,World

  ,document.getElementById("root"))

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

• 优化第一步:
  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"))

此时模块化已经初具雏形

---

• 优化第三步
  app.js

  // import React from 'react';
  // const {Component} = React;
  import React, {Component} from 'react';//这样更加简洁,并且import React 这不可省略，因为下面render函数需要用
  export default class App extends Component{
  constructor(){
  super();
  this.state={
  counter:10
  }
  }
  render(){
  return (
  

  
  

  {this.state.counter}

  
  
  
  )
  }
  }

完工!
最后编辑于：2025-06-15 11:02:58
© 著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务