react，react-router，redux+react-redux 构建一个React Demo

创建初始化应用

加速我们的npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

利用create-react-app 创建项目，执行下面创建我们的demo-react应用：

cd ......到你自己的路径
create-react-app reactdemo

我习惯使用VSCode，我用vscode打开这个文件夹，目录结构如下。

安装需要的依赖

我们的项目需要:

react-router:

react-router-dom

redux

react-redux

在VSCode中打开powershell（Ctrl+`）

依次安装

cnpm install react-router --save
cnpm install react-router-dom --save
cnpm install redux --save
cnpm install react-redux --save

打开package.json可以看到我们使用的版本：

 

不同的版本使用是有一些区别的，尤其路由使用上

 

创建几个组件页面

在src下创建几个文件夹存放我们使用的组件

 

在各自文件夹下创建组件js

Login.js

import React,{ Component } from 'react';

//=====组件=====
class Login extends Component {
    
    render() {
        return (
            <div>
                <h3>登录页面</h3>
                <div>
                    用户名<input type="text" />
                </div>
                <div>
                    密码<input type="text" />
                </div>
                <div>
                    <button onClick={this.goLogin}>登录</button>
                </div>
            </div>
        );
    }    
    goLogin(){
        alert("开始登录")
    }
    
    componentDidMount() {
          console.log("Login渲染完毕")
    }    
}

export default Login

 

Home.js

import React, { Component } from 'react';

//=====组件=====
class Home extends Component {    
    render() {
        return (
            <div>
                <h3>主页</h3>
            </div>
        );
    }    
    componentDidMount() {
          console.log("Home渲染完毕")
    }
}

export default Home

About.js

import React,{ Component } from 'react';

//=====组件=====
class About extends Component {    
    render() {
        return (
            <div>
                <h3>关于我们</h3>
            </div>
        );
    }
    
    componentDidMount() {
          console.log("About渲染完毕")
    }    
}

export default About

 

News.js

import React,{ Component } from 'react';

//=====组件=====
class News extends Component {    
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            list: [
                {id:1,title:"a",con:"caaaaaaaaaaaaaaaa"},
                {id:2,title:"b",con:"cbbbbbbbbbbb"},
                {id:3,title:"c",con:"cccccccccccccc"},
                {id:4,title:"d",con:"cddddddddddddd"},
                {id:5,title:"e",con:"ceeeeeeeeeeee"}
            ]
        };
    }
    
    render() {
        return (
            <div>
                <h3>新闻页面</h3>
                <ul>
                    {
                        this.state.list.map(function(item,i){
                            return <li key={item.id}>
                                <a>{item.title}</a>
                                <span>{item.con}</span>
                            </li>                        
                        })    
                    }
                </ul>
            </div>
        );
    }
    
    componentDidMount() {
          console.log("News渲染完毕")
    }
    
}


export default News

搭载路由

我们把页面创建完毕，修改index.js配置路由：

src/index.js:

 

 1 import React from 'react';
 2 import ReactDOM from 'react-dom';
 3 import {BrowserRouter as Router} from 'react-router-dom';
 4 import './index.css';
 5 import App from './App';
 6 import * as serviceWorker from './serviceWorker';
 7 
 8 ReactDOM.render(
 9     <Router>
10         <App />
11     </Router>    
12 , document.getElementById('root'));
13 
14 // If you want your app to work offline and load faster, you can change
15 // unregister() to register() below. Note this comes with some pitfalls.
16 // Learn more about service workers: https://bit.ly/CRA-PWA
17 serviceWorker.unregister();

View Code