React项目一、React cli 全局安装 create-react-app yarn global add cre

一、React cli

全局安装 create-react-app yarn global add creat-react-app
指定安装版本 yarn global add creat-react-app@版本号
官网：create-react-app.dev

二、项目依赖

1. TypeScript

在当前目录添加：create-react-app . --template typescript

2. 运行项目：`yarn start`

阻止yarn start 自动打开浏览器：在src目录外创建一个 .env文件，输入BROWSER=none

3. 处理报错！

import React from 'react';ts 提示不是模块 ，原因是ts不认识react和react-dom的类型
解决方法： 安装 yarn add @types/react @types/react-dom ****ts 依赖

4. 使import @表示 src目录

在tsconfig.json 文件中加入如下配置

{
  "compilerOptions": {
    	"baseUrl": "src",
  },
	"include": [
    	"src"
  ]
}

三、目录说明

对比Vue：react更加简洁，cli生成的几乎只有src目录和public

内置功能更少，没有自带的Router，Redux，Scss

文件导入： 在vue中，可以使用@来表示Src目录，在react中src下的文件可以直接书写路径

//在tsconfig.json中进行配置
{
  "compilerOptions": {
    "baseUrl": "src", 
    ...
  },
  "include": [
    "src"
  ]
}

四、CSS相关

1. `@import-normalize`

作用： 添加至index.css 首行，可以使页面在所有浏览器的样式基本保持一致，vscode报错无视即可。

缺点： 默认样式会被覆盖

区别：normalize使所有浏览器的样式保持一致，css reset 是将默认样式重置.

2. scss

官网推荐：node-sass ****window可能会出现安装失败的错误（下载慢，本地编译容易失败）

其他推荐： dart-sass ****更加稳定，但不可以直接安装

安装方式： yarn add node-sass@npm:dart-sass 含义：安装node-sass时用dart-sass替换

3. css component

安装：yarn add styled-components
安装 TypeScript依赖： yarn add --dev@types/styled-components 或 npm i @types/styled-components
vscode安装插件: vscode-styled-components

CSS-in-Js的方案：使用styled-components，可以将css直接写js 文件里

//使用前需要先导入
import styled from 'styled-components' 

//声明一个自带样式的button按钮
const Button=styled.button`
  color:red;
  border:none;
  background：green；
  &：hour{
    background:black;
  }
`；
//使用button
function App(){
  return(
    <div>
      <Button>你好</Button> 
      //可以直接使用这个Button变量
    </div>
  )；
}；

五、React Router

官网： v5.reactrouter.com/web/guides/…
安装：yarn add react-router-dom
安装 TypeScript依赖：yarn add --dev @types/react-router-dom****
React-router V6 版本使用方法发生了较大的变化，使用时需注意！！！
React-router有两种模式，History 和 Hash ，没有后台服务器只能用Hash，有后台配置所有路径到首页才能用History

处理报错：模块“"react-router-dom"”没有导出的成员“Switch”。

原因：由于版本原因Switch在版本6中被替换为 Routes ,安装时会默认最新的版本

import React from "react";
import {
  BrowserRouter as Router,
  Routes,  //使用Routes替换Switch  
  Route,
  Link
} from "react-router-dom";

yarn add react-router-dom@5.1.2
//使用v5版本可以去除报错

处理报错：React 18 版本，使用react-router-dom V5 版本，路由改变，页面不会刷新

原因：React 18 在默认dev 环境下，执行两次useEffect 钩子函数

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <App />
);
// 去掉严格模式 React.StrictMode

active class ：可以根据selected类来修改NAVLink标签选中后的样式

<NavLink to="/faq" activeClassName="selected">
     user code
</NavLink>

附录：react router 使用方法 V5

exact 关键字表示路径为精确匹配，省略表示为模糊匹配

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

六、自定义loder处理svg格式icon

显示隐藏的webpack配置文件：yarn eject
安装： yarn add svg-sprite-loader
安装： yarn add --dev svgo-loader

<svg fill="red " className="icon" >
  <use xlinkHref="#money" />
</svg>

//  fill 属性可以指定svg的颜色， xlinkHref 属性指定svg的路径

自动导入多个icon，Ts 报错请安装声明文件：yarn add --dev @types/webpack-env

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('icons', true, /.svg$/));} catch (error) {console.log(error);}
// 注意路径

svgo-loader 的webpack配置，示例删除了svg自带的fill属性

oneOf:[
  {
      test:/.svg$/,
      use:[
          {loader:'svg-sprite-loader',option:{}},
          {
              loader:'svgo-loader',option{
                plugins:[
                   {name:'removeAttrs',params:{attrs:'fill'}}
                  ]
                }
            }
        ]
    },
]

七、处理报错

在react 中，import 导入的文件必须使用否则就会报错，因此在引用时候可以使用require代替。

错误： 使用require，eslint报错 Search for the keywords to learn more about each error.

解决方法： 在文件首行加上 ****/*eslint-disable*/ ****禁用提示

import a from "路径"
console.log(a)  // 必须有这句引用，否则react会删除未引用的代码

require('路径') // 这种方式引入不会报错

使用字符串作为对象key，Typescrpt 报错 '元素隐式具有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型'

// tsconfig.json文件增加配置可以忽略报错:

{
  "compilerOptions": {
    "suppressImplicitAnyIndexErrors": true,
  }
}

八、回退功能

window.history.back()
back() 方法会在会话历史记录中向后移动一页，如果没有上一页，则此方法不会执行任何操作。
使用React 封装的 api.

import {  useHistory } from "react-router-dom";
const history=useHistory();
const  demo=()=>{
  history.goBack()
}

React项目