React入门实例:组件化+react-redux实现网上商城(1)

项目运行

    1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop
    2.cd React_demo_onlineShop(文件目录)
    3.npm install(安装依赖)
    4.npm start(项目启动)

功能一览

1.购买产品
2.查看购买的产品
3.删除购买的产品
功能gif图:

实现过程

---

一、创建项目(脚手架方式)

通过使用create-react-app创建项目，可以免去安装和配置webpack和babel等工具，使得创建项目变得便捷许多，因为他们已经被预先安装和配置了。
npm install -g create-react-app //安装React脚手架
好了,开始构建项目！

    create-react-app react-demo-shop //最后面的是项目文件夹名字
    cd react-demo-shop //进入文件夹
    npm start //启动

简单解释一下自动生成的各文件的含义

react-demo-shop/
  node_modules/           //依赖包
  public/               
    index.html              //页面模板
    favicon.ico        //react的ICON图标
  src/              //开发源码
    App.css
    App.js
    App.test.js
    index.css
    index.js        //js入口文件
    logo.svg
  package.json      //定义了这个项目所需要的各种模块,以及项目的配置信息
  README.md   //备注

二、分析公共组件和路由组件

公共组件总共有两个,一个是顶部的React_Demo:小商城(topInfo);另一个是左侧的导航栏(leftNavigator)

现在对页面结构进行一些更改：
1. 删除自动生成的App文件,同时删除index.js里App的内容。
2. 新增images、pages、router文件夹
3. images用于放置后面需要用到的两张图片:icebox.png、tv.jpg
4. router用来实现代码的路由功能
5. pages用来放公共组件(common)和路由组件

现在页面结构如下:

react-demo-shop/
  node_modules/
  public/               
  src/              //开发源码
    images/         //图片
        tv.jpg
    pages/
        common/     //公共组件
            topInfo.js          //顶部组件
            leftNavigator.js    //左侧导航栏
            Product.css         //产品界面样式
        modules/    //路由组件
            allProducts/    //所有产品
            myProducts/     //我的产品
    router/
        index.js
    index.css       //公共css
    index.js        //js入口文件
  package.json 
  README.md

三、给页面添加公共组件

//topInfo.js
import React,{Component} from 'react' //添加react模块
export default class TopInfo extends Component{
   
    render(){
        return(
            <div>
                <p>React组件Demo:小商城</p>
            </