React教程(十一) : 模拟一个销售网站

步骤一：使用React + Styled Component + Type Script实现响应式布局，效果如下
PC模式

Mobile模式

以上效果没有使用三方控件，都是原生css实现。代码示例：https://github.com/992990831/modernization/tree/main/responsive-layout

步骤二：添加路由子组件
步骤一的菜单并没有实现路由，先：npm install react-router-dom @types/react-router-dom --save
再为每个菜单项添加子组件，修改nav中的路由。

步骤三：transition - 组件切换时的过渡效果
React-router只是路由功能，没有提供组件切换时的过渡效果，不太美观。
npm install react-transition-group @types/react-transition-group --save
实现后的效果如下图：

要注意子组件样式中的这段：

如果没有position:absolute的话，会导致动画过程中两个组件上下排列，而不是并行排列。

完整的代码示例：https://github.com/992990831/modernization/tree/main/full-demo

参考：
https://reactjs.org/docs/animation.html
http://reactcommunity.org/react-transition-group/with-react-router/
https://www.jianshu.com/p/98fb143ac719