React飞行日记(一)- 脚手架的基本使用(create-react-app)

基础使用

React是FaceBook公司研发的一款JS框架(MVC)

1. 【React的脚手架】简介

   配置webpack是一个比较复杂的工作, 需要自己安装许多的包, 还要写复杂的配置文件, 使用脚手架能帮我们快速的构建一套自动化工程项目结构, 有助于提高开发效率(自动配置开发前所有的依赖和设置)

2. 【CREATE-REACT-APP】 的使用

   1. 安装

      npm install create-react-app -g	  // 安装在全局
      

   2. 使用

      create-react-app [项目名称]
      
      // 项目名称: 小写字母 | 数字 | - | _
      // 如果之前没有安装React
      /*
       *	cnpm install packages
       *	cnpm install react
       *	cnpm install react-dom
       *	cnpm install cra-template
       */
      

3. 【项目目录】

   

   node_modules 项目依赖

   public 存放的是当前项目的HTML文件

   ​ .html 文件中中文件的导入

   • <!-- 
     在React中, 所有逻辑都是在JS中完成的, 包括页面的创建, 
     	如果想给页面导入CSS或者JS,有两种方式导入
     1. 在JS中基于ES6 Module模块规范, 会使用import导入, 这样webpack在编译时候, 就会把对应的资源导入到页面中
     	<link rel="apple-touch-icon" href="%PUBLIC_URL%/log o192.png" />
     2. 如果不想在JS中导入, 也可以把资源手动在HTML中导入, 但是HTML也要基于webpack编译要把%PUBLIC_URL%写成绝对地址
     	<link rel="manifest" href="C:/index/data/manifest.json" /> 
     -->
     

   src 项目最重要的目录, 所有JS, 路由, 组件都是放在这个里面(包括css, 图片等)

   .gitignore git提交时忽略的文件目录

   package.json 当前项目的依赖清单

   1. dependencies : 项目依赖
   2. scripts : 当前可运行的脚本
      1. yarn start : 默认监听3000端口, 并且打开浏览器, 代码一旦改动就刷新页面
      2. yarn start : 编译项目, 使用这个命令可以打包压缩项目

深入配置

1. webpack第三方模块安装

   create-react-app脚手架为了让目录结构清晰, 把安装的webpack配置项都放在了node_modules/react-scripts模块中

   但是 !

   在真实的项目中， 我们需要在脚手架默认的安装的配置基础上加自己的东西， 例如

   react-ruter-dom/axios...这些默认配置没有的东西, 那怎么办呢?

   1. 如果我们安装其他的组件, 但是安装后不需要被webpack处理, 此时可以直接安装使用

      

   2. 如果安装的插件是基于webpack处理的, 也就是需要把模块配置到webpack中(就需要重新修改webpack配置了)

      具体操作:

      • 首先要把隐藏到node_module中的配置暴露到项目中
      • 再去修改对应的配置项

      比如 less, 我们预览项目的时候, 看到的是webpack编译后的内容, 如果使用了less, 需要在webpack中修改配置项, 在配置项中加入less的编译工作, 这样后期查看项目, 里面less才会生效

      1. 在项目根目录下输入命令

         > $ yarn eject			# 过程不可逆转
         

      2. 项目下会暴露两个文件

         config webpack配置文件

         scripts 可执行的js脚本文件

      3. 安装less加载器

         > $ yarn add less-loader
         

      4. 生产环境, 开发环境下的webpack都要修改

         在 module -> rules -> oneOf 下添加

         

2. 修改配置命令

   修改默认端口

   set HTTPS=true&&npm start
   

   修改协议

   set PORT=3000&&npm start