CRA

1.CRA介绍

全称： create-react-app
React应用程序快速创建脚手架： 底层： webpack
创作团队： Facebook

2. CRA应用

全局安装

$ npm i create-react-app -g
$ create-react-app app
$ cd app
$ yarn start
or
$ cnpm i create-react-app -g
$ create-react-app app
$ cd app
$ yarn start

npx创建CRA项目

3. CRA 命令介绍

yarn start -- 表示开发环境下运行整个项目
yarn build -- 表示生产环境打包，进行编译、压缩等操作
yarn eject -- 配置文件抽离，将项目的webpack配置和项目运行文件从node_modules的react-script中抽离到项目根目录

4. CRA项目内容介绍

  1. 目录介绍

    ├── README.md 使用方法的文档
    ├── node_modules 所有的依赖安装的目录
    ├── yarn-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
    ├── package.json 项目依赖配置记录文件 、 记录项目脚本命令
    ├── public 静态公共目录（ 生产环境 ） 不会被webpack编译
    ├── config 项目webpack配置文件
    ├── scripts 项目wepback脚本命令执行文件
    └── src 开发用的源代码目录
    └──── index.js 项目入口文件
    └──── index.css 项目全局样式
    └──── App.js 构建了一个App组件，是项目最大的组件 【 类似根组件 】
    └──── App.css 是App组件的样式文件
    └──── App.test.js 是App组件测试文件
    └──── logo.svg 初始项目的界面logo
    └──── serverWorker 内部文件，我们不操作

  2. 项目解读

    1. 先查看 package.json 文件，通过npm脚本来确定项目启动命令
    2. 在查看项目入口文件 src/index.js
    3. 查看项目最大的组件App.js

results matching ""

    No results matching ""