react入门

1、项目代建 - create-react-app

npm install create-react-app -g  // 全局安装create-react-app，如果不想全局安装，则不要-g。可能会很慢，可以使用cnpm来安装

create-react-app my-app  // my-app是项目名

cd my-app  

npm start  // 启动项目

2、接下来要说的是react-router 4.x路由配置。

准备工作：安装react-router-dom

（1）、在src文件夹下创建pages文件夹，用来存放组件。例如我的是这样的：

 （2）在src文件夹下面新建路由文件router.js

import {News, JoinUs, Home} from './pages'
import {Course} from './pages/Course'
const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/news',
        component: News,
    },
        {
        path: '/joinUs',
        component: JoinUs
    },
        {
        path: '/course',
        component: Course
    }]
export default routes

（3）在主页面src文件夹下的index.js中依次导入要使用的组件以及路由需要使用的组件。如我的配置是这样的：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

import {
    BrowserRouter as Router,
    Route,
    NavLink,
    Switch
} from 'react-router-dom'

import News from './pages/News'
import Course from './pages/Course/Course'
import JoinUs from './pages/JoinUs'
import Home from './pages/Home'

const App = () => (
    <Router>
        <div>
            <header>
                <nav>
                    <ul>
                        <li><NavLink exact to="/">首页</NavLink></li>
                        <li><NavLink activeClassName="active" to="/news">新闻</NavLink></li>
                        <li><NavLink activeClassName="active" to='/course'>课程</NavLink></li>
                        <li><NavLink activeClassName="active" to="/joinUs">加入我们</NavLink></li>
                    </ul>
                </nav>
            </header>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route path="/news" component={News}/>
                <Route path="/course" component={Course}/>
                <Route path="/joinUs" render={(props) => <JoinUs {...props}/>}/>
            </Switch>
        </div>
    </Router>
)

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

在这里，News,Course,以及JoinUs中只写了一些简单的东西，示例如下

import React from 'react';

class News extends React.Component{
    render(){
        return(
            <div>
                <div>This is News!</div>
            </div>
        );
    }
}

export default News;

界面示例如下：

 这只是刚开始入门搭起来写了点简单的东西，方便自己回顾，也希望能够帮助到想要了解react的朋友