前端

这篇笔记记录了React脚手架的知识

一、本堂课重点内容

  • React脚手架

二、详细知识点介绍

1、React脚手架使用

  • npm i create-react-app -g：全局安装create-react-app
  • create-react-app <filename>：创建项目
  • cd <filename>：进入项目目录下
  • npm start：启动项目

2、React脚手架自带文件解析

  • 主要文件
    • public
      • favicon.ico：网站页签图标
      • index.html：主页面
    • src
      • App.css：App组件的样式
      • App.js：App组件
      • index.css：样式
      • index.js：入口文件
  • index.html
    • <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />：项目的图标，%PUBLIC_URL%代表public文件夹的路径
    • <meta name="viewport" content="width=device-width, initial-scale=1" />：开启理想视口，用于做移动端网页的适配
    • <meta name="theme-color" content="red" />：用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器)
    • <meta name="description" content="..."/>：网站的描述，便于搜索引擎查询定位
    • <link rel="apple-touch-icon" href="..." />：用于指定网页添加到手机主屏幕后的图标，仅适用于苹果手机
    • <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />：应用加壳时的配置文件
      • Web应用加壳：一般在开发移动端时，开发者要使用Java（安卓开发）或Swift（iOS开发），而使用web开发再加壳也能做移动端应用。不过移动端使用加壳应用会导致性能差，因此在做大型移动端应用时仍然推荐使用原生开发语言进行开发
  • *知识点补充
    • import React, {Component} from 'react'：这种引入方式并不是解构赋值，Component并不是从React上取下来的，而是在定义React的文件中就已经通过分行暴露的方式暴露了Component这个对象
    • 一个冷门但是有用的知识点：如果两个组件内部定义了相同名称的类名，后引入的组件会覆盖之前引入的类名相同的组件的样式。比如Hello组件和World组件都有一个className为title的标签，而World组件比Hello组件后引入，则所有title类名的标签样式均与World组件中定义的一致。
      • 以Hello组件为例，可以通过将css文件重命名为<filename>.module.css，在index.jsx引入时按如下语句：import hello from index.module.css，使用时采用诸如<h2 className={hello.title}>xxx</h2>的语法
      • 由于在开发时使用less较多，因此不必过多考虑css模块化
    • 快捷键
      • rcc：创建类组件
      • rfc：创建函数式组件

三、实践练习例子

  • @/src/App.js
import React, { Component } from "react";
import Hello from "./components/Hello";
import World from "./components/World";

export default class App extends Component {
  render() {
    return (
      <div>
        <Hello />
      </div>
    );
  }
}
  • @/src/components/Hello/index.jsx
import React, { Component } from "react";
import "./index.css";

export default class Hello extends Component {
  render() {
    return (
      <div>
        <h1 className="hello">Hello World</h1>
      </div>
    );
  }
}

四、课后个人总结

  • 务必搞清楚脚手架中每个文件的含义和作用，并能够根据项目框架自己写出脚手架文件中的内容

五、引用参考