如何搭建React项目详解

一、环境配置

1、安装 Node.js >=10（选择自己需要的版本）
运行 node -v查看版本，如果不是 10，请先卸载当前版本去 Node.js 官网下载10.12.0版的安装包，一路点击下一步，注意安装目录可以改，一定不要在路径中出现中文和空格。
注意重装 Node.js 后，你以前用 npm 或 yarn 全局安装的命令可能都会消失不见，如果你需要，可以需要重新全局安装这些命令。打开 Git Bash或cmd，依次输入以下命令，按回车：
npm config set registry https://registry.npm.taobao.org/
npm config set loglevel http
npm config set progress false

2、安装yarn（yarn比npm更加好用）
打开 Git Bash，输入以下命令，按回车。
npm install -g yarn

3、安装yarn淘宝源（下载依赖更快，否则你就体验一下等待痛苦）
yarn设置镜像:
yarn config set registry https://registry.npm.taobao.org -g

二、开始搭建React项目

（1）、安装和运行
yarn create react-app morney --template typescript创建目录morney，添加template typescript说明项目需要用TS进行，看你是否需要用TS，不用则不用写。
cd morney进入项目
yarn start运行项目(自动打开浏览器)

注意：当有一个项目打开了，如果不喜欢再次运行再打开一个浏览器，就运行
echo 'BROWSER=none' > .env 再 yarn start
git rm -rf --cached .idea如果用 WebStorm，就在 .gitignore 添加 /.idea
git rm -rf --cached .vscode如果用 VSCode，就在 .gitignore 添加 /.vscode

（2）、目录说明

3.png

4.png

（3）、配置css normalize
做法就是在index.css添加@import-normalize,作用是保证页面在不同浏览器上默认样式相近，编辑器有可能不认识这个语法会报错，无视即可。

（4）、配置scss
使用dart-sass代替node-sass(后者经常被墙，在react项目中经常存在各种问题需要解决才能正常使用)
yarn add --dev node-sass@npm:dart-sass
上述命令作用是用dart-sass代替node-sass,安装完成之后，将所有 .css改成 .scss即可。如果你想用node-sass，也是可以的，出了问题自行搜索解决问题即可。

对比：在Vue项目中用@表示src/目录，而在Reac项目中不一样：
1、css引入：可以直接用@import 'xxx/yyy'来引入src/xxx/yyy.scss（webstorm编辑器中如果路径出现红色，右键点击src,选择mark direcotory as Resource Root ）
2、js引入：在tsconfig.json 添加一行"baseUrl":"src",就可以直接引用 import 'xxx/yyy.tsx'来引入src/xxx/yyy.tsx

(5)、配置styled-components(css-in-js的一种方案比scss更好玩的css写法)

yarn add styled-components
yarn add --dev @types/styled-components
前者是 styled-components源码，后者安装的是TS对应的类型声明文件。同时WebStorm最好安装一个插件：Styled Components & Styled JSX，如果是VScode则安装插件：vscode-styled-components

（6）、配置路由
官方文档
yarn add react-router-dom
yarn add --dev @types/react-router-dom

前者是 react-router-dom源码，后者安装的是TS对应的类型声明文件。安装完成之后，直接按照文档给的APP的例子，复制到自己项目APP中运行一次是否正常，然后修改成自己路由路径。

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>
          </ul>
        </nav>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

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

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

注意是的是：react-router-dom版本是6的，就没有switch这个需要改成Routes，另外<Route path="/about"><About /></Route>改成<Route path="/About " element={<About />}/>。另外一个解决方法删除当前版本，选择低版本5进行就行。

import React from "react";
import {BrowserRouter as Router,Routes,Route,Link} from "react-router-dom";
function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          </nav>
        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/about" element={<About/>}/>
        </Routes>
      </div>
    </Router>
  );
}
function Home() {
  return <h2>Home</h2>;
}
function About() {
  return <h2>About</h2>;
}
export default App;

Router 有两种模式:History 和 Hash
如果你没有后台服务器，就只能用 Hash
如果你有后台服务器，配置所有路径都到首页才能用 History

要改成Hash模式可以将引入的browserRouter as Router改成HashRouter as Router。改完之后区别就是看路径有没有多出一个#号，修改路径也只能改#号后面内容