用 React + React Router写了一个纯前端的电商项目，进来看看？

前言

学习React后，对其中的一些基础知识有所了解，开始了自己的第一个小项目，这个项目并没有涉及到数据的请求，因为完全是模仿小米有品的UI来做的，所以很大程度上是用来练练手，熟悉熟悉React的开发，对样式保证高保真还原。

概述

  • React & React-Router 前端框架
  • SPA单页面应用
  • 高保真还原设计图
  • 移动端Felxible设备兼容
  • 定制化Ant Design UI组件
  • ESlint书写格式规范
  • styled-components实现CSS In JS样式组件化方案

Ant Design

这里我选用的是antd-mobile这个UI库，其中封装了很多较为成熟的CSS库，很大程度上提高了开发效率，尽管如此，项目中对其进行了较多的“私人定制”，比如说tab-bar的颜色以及border的宽度，都进行了很大的调整，方法是直接在index.css中假如需要定制的样式：

1
2
3
4
5
6
7
8
9
.am-tab-bar-tab-title{
  color:#ab927d
}
.am-tabs-default-bar-tab{
  font-size: 10px;
}
.am-modal-content{
  text-align:start ;
}

styled-components

这是一个新出的CSS In JS的方案，它可以让写React样式就像写React组件一样，styled-components只需要安装一次，便可以像一个组件一样在任何地方使用，并不需要配置webpack，这一点充分体现出开箱即用的优点，相比于繁琐的css-moudule，styled-components写起来非常优雅，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
render() {
    const Wrapper = styled.div`
      margin: 10px auto;
      width: 300px;
      height: 100px;
      border: 1px solid pink;
      text-align: center;
    `;
    const Button = styled.button`
      width: 100px;
      background: yellow;
    `;
    return (
      <Wrapper>
        <Button>Hello World</Button>
      </Wrapper>
    );
  }

GIF图展示：

  • 主页：

image

  • 分类页：

image

  • 其他页：

image

  • 登录注册页：

image

  • 商品详情页：

image

使用

1
2
3
4
5
6
7
8
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

总结

虽然这个项目并没有向后台获取数据，是一个静态页面。不过虽然如此，经过这次开发，对React的使用进一步巩固，对如何在React写CSS有了一些自己的心得，但是还有一点比较遗憾，就是没有后端的支持，整个项目也就是一个展示页，之后我将会在后端方面进进一步的探索。