Reasct项目笔记

react项目标记

创建react项目

安装create-react-app

yarn create react-app my-app

查看版本

create-react-app --version

创建react项目

create-react-app 项目名
//支持typescript的react项目创建
create-react-app 项目名 --template typescript

打开react项目

cd 项目名
yarn start

项目目录

设置路径

//如果想这样引入 import 'app.css'
//tsconfig.js添加如下
"baseUrl": "src",

项目scss安装dart-sass

因为react只支持node-sass，所以这样安装

yarn add --dev node-sass@npm：dart-sass 

css normalize（统一浏览器样式）

//index.css中引入
//统一浏览器样式
@import-normalize

使用css-in-js方案完成项目

安装styled-components，@type/styled-components

//安装style-components
yarn add styled-components 
//安装style-components代码提示
yarn add @types/style-components

使用

import {Lagout} from "./components/Lagout";
import styled from "styled-components";
const Lagout = styled.div`
      background: red;
`
function App() {
  return (
    <div className="App">
      <Lagout>
          小红
      </Lagout>
    </div>
  );
}
export default App;

使用react-router-dom设置路由官方文档

安装

yarn add react-router-dom

使用

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

//App/tsx文件
import {Routes, Route, Link, NavLink} from "react-router-dom";
import {Home} from "./components/Home";
import {About} from "./components/About";
function App() {
  return (
    <div className="App">
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
        </Routes>
    </div>
  );
}
export default App;

//Home.tsx文件
import React from "react";
import {Link} from "react-router-dom";
const About = ()=>{
    return(
        <>
            <main>
                <h2>Who are we?</h2>
                <p>
                    That feels like an existential question, don't you
                    think?
                </p>
            </main>
            <nav>
                <Link to="/">Home</Link>
            </nav>
        </>
    )
}
export {About}

import React from 'react';
import {Link} from "react-router-dom";
const Home = ()=>{
    return(
        <>
            <main>
                <h2>Welcome to the homepage!</h2>
                <p>You can do this, I believe in you.</p>
            </main>
            <nav>
                <Link to="/about">About</Link>
            </nav>
        </>
    )
}
export {Home}

路由传参

<Route path="about:id" element={<About />} />

使用useParams()接受参数

import React from "react";
import {Link, useParams} from "react-router-dom";

const About = ()=>{
    console.log(useParams().id)
    return(
        <>
            <main>
                <h2>Who are we?</h2>
                <p>
                    That feels like an existent
                </p>
            </main>
            <nav>
                <Link to="/">Home</Link>
            </nav>
        </>
    )
}
export {About}

路由模式

我使用的是react-router-dom

路由的模式有两种

• 老浏览器提供的 hash模式， 我们称之为： HashRouter #/
• H5提供的的 history 模式，我们称之为 BrowserRouter / 注意： H5模式的路由需要后端支持

ReactDOM.render(
    <HashRouter>
        <App />
    </HashRouter>,
    // <BrowserRouter>
    //     <App />
    // </BrowserRouter>,

  document.getElementById('root')
);

使用SVG

• 首先yarn eject拿到Webpack配置

//提交之后才能运行
yarn eject
或者
npm run eject

• 然后安装svg-sprlte-loader进行配置

yarn add --dev svg-sprlte-loader

• 安装svgo-loader

yarn add --dev svgo-loader

• Configuration配置

{
              test: /\.svg$/,
              use: [
                { loader: 'svg-sprite-loader', options: {} },
                {loader: 'svgo-loader', options:{
                    //去除fill属性
                    plugins: [
                      {
                        name: "removeAttrs",
                        params: {
                          attrs: "(fill|stroke)"
                        }
                      }
                    ]
                  }}
              ]
            },

• Icon组件

import React from "react";

//这里有报错
let importAll = 
    (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {
    importAll(require.context('icons', true, /\.svg$/));
} catch (error) {
    console.log(error);
}

type Props ={
    name: string
}
const Icon:React.FC<Props> = (props) =>{
    return(
        <svg className="icon">
            <use xlinkHref={"#"+props.name}/>
        </svg>
    )
}
export default Icon

安装 @types/webpack-env解决报错

yarn add --dev @types/webpack-env

引入Icon组件即可使用图标

<Icon name='Chart'></Icon>