react介绍

react一个专注于构建用户界面的javascript库，和vue、anaular并称为前端三大框架

React英文文档（ reactjs.org/ ）

声明式UI（JSX）

写UI就和写普通的HTML一样，抛弃命令式的繁琐实现
组件化

组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性
跨平台

react既可以开发web应用也可以使用同样的语法开发原生应用（react-native），比如安卓和ios应用，甚至可以使用react开发VR应用，想象力空间十足，react更像是一个元框架为各种领域赋能

脚手架学习

基础

安装、创建、启动

// 安装
npm i -g create-react-app

// 查看
create-react-app --version

// 创建
create-react-app 项目名  // 项目名规则：数字、小写字母、_

// 启动
yarn start  // 或者 npm start

目录介绍、调整

目录说明
- src 目录是我们写代码进行项目开发的目录
- public 放页面模版
- package.json 中两个个核心库：react 、react-dom
目录调整
- 删除src目录下自带的所有文件
- 在src目录下创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可

入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <div>React</div>
    </React.StrictMode>
);

基础命令介绍

// package.json
"scripts": {
    "start": "node scripts/start.js",  // 开发环境：在本地启动web服务器，预览打包内容
    "build": "node scripts/build.js",  // 生产环境：打包部署，打包的内容输出到dist目录中
    "test": "node scripts/test.js",  // 单元测试
    "eject": "react-scripts eject"  // 暴露webpack配置规则【修改默认的打包规则】
  },

进阶应用

暴露webpack配置文件

yarn eject  // 注意：此命令不可逆

执行此命令后，项目文件会自动生成 config和scripts文件夹

截屏2023-02-25 14.05.42.png

截屏2023-02-25 14.09.50.png

修改webpack配置文件

将sass改为less

// 安装
yarn add less less-loader@8
// 卸载
yarn remove sass-loader

修改默认sass规则

截屏2023-02-25 14.29.02.png

截屏2023-02-25 14.31.32.png

配置 @ 符

截屏2023-02-25 14.34.39.png

修改域名与端口

// start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;  // 将 3000端口修改为自己想设置的端口
const HOST = process.env.HOST || '0.0.0.0';  // 将 0.0.0.0 修改为自己想要设置的ip

通过修改环境变量修改端口号

// 安装
yarn add cross-env

// 修改 package.json 中 start 命令
"start": "cross-env PORT=8008 node scripts/start.js",

浏览器兼容

截屏2023-02-25 14.46.11.png

// 入口文件

// 对ES6内置API做兼容处理
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'

处理Proxy跨域

在 src目录中，新建 setupProxy.js
安装 http-proxy-middleware

yarn add http-proxy-middleware

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/zhi', {
            target: 'https://news-at.zhihu.com/api/4',
            changeOrigin: true,
            ws: true,
            pathRewrite: { '^/zhi': '' },
        })
    );
};

测试

fetch('/zhi/news/latest')
    .then((response) => response.json())
    .then((value) => {
        console.log(value);
    });

截屏2023-02-25 15.28.29.png

React教程 - 基础及脚手架