这是我参与「第五届青训营 」伴学笔记创作活动的第 18 天
这篇笔记记录了React脚手架的知识
一、本堂课重点内容
- React脚手架
二、详细知识点介绍
1、React脚手架使用
npm i create-react-app -g：全局安装create-react-appcreate-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：入口文件
- public
- 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>
);
}
}
四、课后个人总结
- 务必搞清楚脚手架中每个文件的含义和作用，并能够根据项目框架自己写出脚手架文件中的内容
