react学习第五天

最新推荐文章于 2022-08-17 11:11:44 发布

山顶哥

最新推荐文章于 2022-08-17 11:11:44 发布

阅读量188

点赞数

分类专栏： javascript 文章标签： react.js javascript

本文链接：https://blog.csdn.net/qingsemengshou/article/details/120382107

版权

javascript 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

使用react脚手架创建react应用

一react脚手架

1.xxx脚手架:用来帮助程序员快速创建一个基于xxx库的模版项目

1.包含了所有需要的配置(语法检查，jsx编译，devServer...)

2.下载好了所有相关依赖

3.可以直接运行一个简单效果

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

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

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

二.创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目:npm start

项目目录

my-app
├── README.md //项目介绍
├── node_modules //第三方库
├── package.json //配置文件
├── .gitignore   //git忽略文件
├── public
│   ├── favicon.ico //页签图标
│   ├── index.html    网页
│   └── logo192.png    //logo图
│   └── logo512.png    //logo图
│   └── manifest.json    //应用加壳的配置文件
│   └── robots.txt    //爬虫协议文件
└── src
    ├── App.css //App组件的样式
    ├── App.js    ---- App组件
    ├── App.test.js ---- 用于给App做测试
    ├── index.css    -----样式
    ├── index.js //入口文件
    ├── logo.svg    ---- logo图
    └── reportWebVitals.js --- 页面性能分析文件（需要web-vitals库的支持）
    └── setupTests.js //组件单元测试的文件（需要jest-dom库的支持)

这个create-react-app的用法看GitHub - facebook/create-react-app: Set up a modern web app by running one command.就行了

我这里主要记录一下public/index.html文件里的内容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL代表public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口，用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 用于配制浏览器页签+地址栏的颜色（仅支持安卓手机浏览器） -->
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 用于指定网页添加到手机主屏幕后的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>

<React.StrictMode/>组件可以检查子组件代码规范

import React,{Component} from 'react'

说明默认导出是React export default React;

分别导出是Component export class Component

组件文件后缀可以写成jsx，方便识别，并且导入时文件后缀是js或者jsx的话，文件后缀不需要写

实现页面局部功能的叫组件,react组件都放在一个文件夹里，文件夹名字就是组件的名字

react使用module.css的方式隔离样式

vscode 安装ES7 React插件，rcc一键生成react组件

四。功能界面的组件化编码流程（通用）

1.拆分组件：拆分界面，抽取组件

2.实现静态组件:使用组件实现静态页面效果

3.实现动态组件