React 项目搭建起步安装和运行 CSS 配置 css normalize 在index.css添加@import-

起步

安装和运行

yarn global add create-react-app（亦可用 npm 全局安装）
create-react-app APP --template typescript（项目名可以自定）
yarn start（会自动打开浏览器）
不喜欢自动，就运行 echo 'BROWSER=none' > .env 再 yarn start

CSS 配置

css normalize

在index.css添加@import-normalize 即可（但webstorm里会有报错，关闭即可）

与css reset 的区别

css normalize 作用是保证页面在不同浏览器上默认样式相近，而css reset是重置默认样式

scss支持

需要使用dart-sass 代替 node-sass 可以使用 yarn add --dev node-sass@npm:dart-sass@1.25.0
但React最新版使用yarn add sass即可\

React 引入方式简化

@import 'xxx/yyy'表示引入src/xxx/yyy

使用TypeScript还要在 tsconfig.json 文件引入

"compilerOptions": { 
"baseUrl": "src",
}

让CSS in JS

使用 `styled-components`

安装

yarn global add styled-components 和 yarn global add @typesstyled-components

运行

const Button = styled.button`
  color: grey;
`;

React Router

安装

yarn add react-router-dom

yarn add --dev @types/react-router-dom

运行

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>

        <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>;
}

设置某一页为主页

<Redirect exact from="/" to="/money"/>

设置404页面

<Route path="*"> 
    <NoMatch/> 
</Route>

function NoMatch() {
  return (
    <div>页面不存在</div>
  );
}

Router有两种模式

Hash：没有后台服务器只能用Hash History：有后台服务器，配置所有路径都到首页才能用

使用SVG

yarn eject拿到 webpack配置
根据svg-sprite-loader 的文档进行配置需要先安装svg-sprite-loader和svgo-loader

 oneOf: [
            {
              test: /\.svg$/,
              use: [
                {loader: 'svg-sprite-loader', options: {}},
                {loader: 'svgo-loader', options: {}}
              ]
            }
           ]

以下代码可以使一个文件引入所有svg,不需要多次import

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

//如报错需要
yarn add @types/webpack-env --dev

React 项目搭建

起步