React从零开始，小白式建立商城 一

第一次写博客，第一次写教程，之前从来没有搞过react，但是年纪越大危机感越大，三大框架都要学，学无止境啊，然而网上的教程超多不会的，自己写一下自己的学习过程吧

搭建基本的react框架

https://blog.csdn.net/dayexiaofan/article/details/88551952 我开始学习时看到这个博主，直接跟着学，对于什么都不懂目录也不知道该怎么写比较好的我，真是帮了大忙了，以下有些截图我懒得自己去弄了直接搬了这个博主，另外对搭建过程中，我碰到的问题内容进行一些补充

我使用了react-create-app来搭建基本框架，这玩意就跟vue-cli和angular-cli一个东西，脚手架

npm install -g create-react-app 先装脚手架
create-react-app projectName 这样就可以生成一个名为projectName 的react初始框架了
这两个没啥好说的吧，接下来开始进行构建系统

1. 创建目录

这部分跟之前写vue的时候结构差不多，我喜欢将资源文件叫做assets,里面包含img文件，随意吧，这个无所谓按照个人习惯来

2. 创建布局主框架并创建router.js

安装react-router-dom

yarn add react-router-dom

这里我遇到了两个学习点:

• yarn和npm什么区别?
  https://www.jianshu.com/p/254794d5e741 有兴趣可以看这篇
  总结一下： 在npm5.0之前，yarn优势很明显，但5.0之后，优势差距被缩短了

  1. npm在install的时候，按照顺序去加载是同步，yarn是异步，yarn速度上取胜(cnpm的话速度还可以)
  2. npm install的时候一个包抛出了一个错误，但是npm会继续下载和安装包，这样这个错误信息就会在一大堆信息中丢失掉，不容易查

  补充一下关于npm与yarn命令语义化的问题。yarn的add与remove比起install与uninstall更直观，但是我尝试之后发现,npm现在也可以用add与remove命令啦

• 为什么路由要用react-router-dom?
  使用路由前发现，还有一个react-router这个路由，那为什么要用react-router-dom呢
  因为react-router-dom是在react-router基础上，多了<link> <BrowserRouter>这样的 DOM 类组件
  可以说对于pc和手机端，react-router针对出了react-router-dom和react-router-native这两个

3. 新建Login组件

写组件有两种方式，函数组件与class组件,我这里用的是class组件
函数组件看了点，还没搞明白怎么回事，有兴趣的自己去了解，我先搁一下

4. 给登录页面写入路由

文件夹Routes下面建一个Router.js的文件，在里面添加

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import Login from "../Component/Login/Login";

class Router extends Component{
    render() {
        return (
            <div>
                <HashRouter>
                    <Switch>
                        <Route exact path="/" component={Login}/>
                        <Route path="/login" component={Login}/>
                    </Switch>
                </HashRouter>
            </div>
        );
    }
}
export default Router;

• path="/" 就是为了在路由没有明确路径的时候，自动跳到登录页
  比如http://localhost:3000/#/ 就直接显示登录页的内容，等同于http://localhost:3000/#/login
  发现这个react页面虽然跳到login页面，但是url没有变仍然是http://localhost:3000/#/，而vue和angular的url则是会变成http://localhost:3000/#/login

然后修改index.js里的内容

这个路由我是搞不懂怎么回事，一开始去直接搜索api发现怎么都是大家自己整理出来的学习笔记，官方的都好难找，后来终于找到了发现…emmmmm反正我现在不想看 附上链接 https://reacttraining.com/react-router/web/guides/quick-start

我看了https://blog.csdn.net/debbyDeng/article/details/84555817 这位大大的整理api

1.为什么根节点是 <HashRouter>

https://blog.csdn.net/gwdgwd123/article/details/85029121 学习原博
路由有history与hash两种模式，那么<BrowserRouter>与<HashRouter>对应的就是这两种

2.<Switch>是什么东西啊

有<Switch>标签，则其中的<Route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；
这个就相当于switch…case…这个函数，匹配到就不再进行匹配了
打个比方

<Route path="/Guide/" component={ About} ></Route>
<Route path="/Guide/ContactUs" component={ ContactUs } ></Route>

直接这么写,那 ‘/Guide’就匹配了两个页面了，显示两个页面的内容…很显然不是我们想要的

5. 运行吧 yarn start

第一次写，第一次学，如果有错误希望大家能够指出谢谢~