美文网首页
第九节:React 脚手架

第九节:React 脚手架

作者: 时光如剑 | 来源:发表于2020-06-11 14:30 被阅读0次

    1. React脚手架

    1.1 react 脚手架的理解
    1. 脚手架: 用来帮助程序员快速创建一个模板项目,包含了所有需要的依赖配置,和工程配置

    2. react 提供了一个用于创建react项目的脚手架库 create-react-app

    3. 项目的整体技术架构: react + webpack + es6 + eslint

    4. 使用脚手架开发项目的特点: 模块化,组件化,工程化

      工程化: 就是通过一个命令 就能将项目打包编译

    1.2 使用create-react-app 创建基于脚手架的react运用
    1. 全局安装

      npm install create-react-app -g
      
    2. 创建项目

      create-react-app hello
      

    也可以使用npx命令进行安装

    $ npx create-react-app myreact
    

    2. 工程目录

    2.1 工程目录了解
    |-- node_modules        // 工程所依赖的包目录
    |-- public              // 静态资源目录
        --| index.html      // 项目主页面
        --| favico.io       // 项目图标
        --| mainifest.json // 移动端配置文件
    |-- src                 // 项目开发目录, 内部的代码会被webpack编译
        --| index.js        // 应用的入口文件
        --| App.js          // 应用的根组件
        --| index.css       // index.js入口模块里的CSS
        --| App.css         // APP组件的样式文件
    |-- .gitignore          // git管理忽略文件
    |-- package.json        // 应用描述文件
    |-- README.md           // 应用说明文件
    
    2.2 package.json

    作用(当前项目的描述文件)

    1. 标识, 标记当前项目信息(name, version)
    2. 依赖, 当前项目所有需要依赖的包(dependencies,运行依赖, devDependencies开发依赖)
    3. 打包/运行, 项目打包运行的命令(script ,脚本命令,通过 npm run .. 来运行)

    3. 脚手架的脚本命令

    1. yarn start: 启动一个开发环境下的应用服务器, 方便开发调试
    2. yarn build: 用于构建发布项目的命令
    3. yarn test: 用于测试代码,一般不推荐使用
    4. yarn eject 反编译当前项目, 获取webpack控制权, 一但使用就回不去为了,一般不推荐使用

    相关文章

      网友评论

          本文标题:第九节:React 脚手架

          本文链接:https://www.haomeiwen.com/subject/eksbtktx.html