react练习项目

git-clone 出错
curl 56 OpenSSL SSL_read: error:14095126:SSL routines:ssl3_read_n:unexpected eof while reading, errno 0

https://www.cnblogs.com/qianshouxiuluo/p/11662616.html

大概实现了一下，用到express做后台，基础布局，和react-markdown

参考码云项目：
https://gitee.com/hancl/react_practice_demo
界面：

强制删除：
npm install rimraf -g
rimraf node_modules

三栏布局：

1、float

.bgColor(@color){
  background-color: @color;
}

.fix{
  width: 18.75rem;
  height: 100vh;
  float: left;
  padding: 0;
  margin: 0;
}

.mainApp{
  width: 100vw;
  height: 100vh;
}

.siderA{
  .bgColor(rgba(218, 155, 38, 0.3));
  .fix;
}

.siderB{
  .bgColor(rgba(122, 236, 128, 0.438));
  .fix;
  left: 18.75rem;
}

.siderC{
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 100vh;
  float: left;
  width: calc(100% - 37.5rem);
}

2、flex

.bgColor(@color){
  background-color: @color;
}

.fix{
  width: 18.75rem;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.mainApp{
  display: flex;
  flex-direction: row;
}

.siderA{
  .bgColor(rgba(218, 155, 38, 0.3));
  .fix;
}

.siderB{
  .bgColor(rgba(122, 236, 128, 0.438));
  .fix;
  left: 18.75rem;
}

.siderC{
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 100vh;
  flex: 1;
}

经过几次修改，成了，侧边栏fix布局，现在怎么滑动边上的滚动条，导航栏都固定位置。

html{
  @media screen and (max-width:576px) {
    font-size: 11px;
  }

  @media screen and (min-width:576px) {
    font-size: 13px;
  }

  @media screen and (min-width:992px) {
    font-size: 16px;
  }
}

.bgColor(@color){
  background-color: @color;
}

.mainApp{
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
}

.fix-site{
  width: 30rem;
  height: 100vh;
  left: 0;
  padding: 0;
  margin: 0;
}

.sidediv{
  width: 15rem;
  height: 100%;
  float: left;
  position: fixed;
}

.siderA{
  .bgColor(rgba(218, 155, 38, 0.3));
  .sidediv;
}

.siderB{
  .bgColor(rgba(122, 236, 128, 0.438));
  .sidediv;
  left: 15rem;
}

.siderC{
  .bgColor(rgba(131, 89, 209, 0.3));
  height: 140vh;
  flex: 1;
}

关于使用node搭建服务器：https://blog.csdn.net/itkingone/article/details/79259490

axios：
cnblogs.com/zxk5211/p/web_21.html