首页 > 其他 > 详细

react入门

时间:2019-09-04 13:39:37      阅读:76      评论:0      收藏:0      [点我收藏+]

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的朋友

react入门

原文:https://www.cnblogs.com/yangxiaoying/p/11458553.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!