create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

  create-react-app 自动创建的项目是基于 Webpack + ES6

  执行命令如下:

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

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

cd my-app  

npm start  // 启动项目

  这里按部就班来执行就行了,没啥可说的。

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

  之前是按照react-router 4.x以下版本来配置,结果发现老报错,死活运行不出来,网上查资料一看,坑爹的,原来3.x与4.x路由配置是完全不一样的。

  4.x的版本需要安装react-router-dom

  

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

   npm install react-router-dom --save // --save 会把依赖包名称添加到 package.json 文件 dependencies 键下,运行时依赖

  

  (1)、在src文件夹下创建components文件夹,用来存放组件。例如我的是这样的:

        

    其中index.js是路由配置文件。

  (2)、在路由配置文件index.js中依次导入要使用的组件以及路由需要使用的组件。如我的配置是这样的:    

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Link
}from 'react-router-dom';
import './index.css';
import App from './components/App'; // 导入App组件
import About from './components/About'; // 导入About组件
import Inbox from './components/Inbox'; // 导入Inbox组件
import registerServiceWorker from './registerServiceWorker'; export default class Hello extends Component{
render(){
return (
<Router>
<div>
<ul className="nav">
      <li><Link to="/">App</Link></li>
      <li><Link to="/About">About</Link></li>
      <li><Link to="/Inbox">Inbox</Link></li>
       </ul>
<hr />
<Route exact path="/" component={App} />
<Route path="/About" component={About} />
<Route path="/Inbox" component={Inbox} />
</div>
</Router>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'));
registerServiceWorker();

  其中exact是用来”/”做唯一的匹配。如果没有这个的话,在匹配其他的同时也会匹配到当前

  运行效果如下:

      

      

      

  

  

  

使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置的更多相关文章

  1. 1. React介绍 React开发环境搭建 React第一个程序

    什么是 React         React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景         Faceboo ...

  2. Windows下快速搭建安卓开发环境android-studio

    Windows下快速搭建安卓开发环境android-studio 发布时间:2018-01-18 来源:网络 上传者:用户 关键字: 安卓 搭建 Android Windows 快速 环境 Studi ...

  3. 五分钟用Docker快速搭建Go开发环境

    挺早以前在我写过一篇用 `Docker`搭建LNMP开发环境的文章:[用Docker搭建Laravel开发环境](http://mp.weixin.qq.com/s?__biz=MzUzNTY5MzU ...

  4. 快速打造跨平台开发环境 vagrant + virtualbox + box

    工欲善其事必先利其器,开发环境 和 开发工具 就是 我们开发人员的剑,所以我们需要一个快并且好用的剑 刚开始做开发的时候的都是把开发环境 配置在 自己的电脑上,随着后面我们接触的东西越来越多,慢慢的电 ...

  5. CentOS 7快速搭建Nodejs开发环境

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.学习Nodejs首先需要会安装环境.这里我介绍如 ...

  6. 使用Intellij IDEA构建spark开发环境

    近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...

  7. XamarinForms教程构建XamarinForms开发环境

    构建XamarinForms开发环境 所谓Xamarin.Forms的开发环境,就是指在基本硬件和数字软件的基础上,为支持系统软件和应用软件的工程化开发和维护而使用的一组软件,简称SDE.对于任何的程 ...

  8. 利用CodeBlocks结合freeglut快速搭建OpenGL开发环境

    利用CodeBlocks结合freeglut快速搭建OpenGL开发环境 2018-12-19 10:15:48 再次超越梦想 阅读数 180更多 分类专栏: 我的开发日记   版权声明:本文为博主原 ...

  9. 从0构建webpack开发环境(一) 一个简单webpack.config.js

    本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...

  10. 使用Docker快速搭建PHP开发环境

    最近有个同事找过来,希望我对在很早之前写的一个PHP网站上增加一些功能,当时开发使用xampp构建的本地开发环境,但是现在我的笔记本电脑已经更新,没有当时的开发环境.本着尽量不往电脑上装无用软件的原则 ...

随机推荐

  1. mysql 按出现次数排序

    SELECT * FROM table a LEFT  JOIN (SELECT key,count(*) as c FROM table GROUP BY key )  b on a.key=b.k ...

  2. 3. Go语言基本类型

    Go语言基本类型如下: bool string 数值类型 (int8, int16, int32, int64, int, uint8, uint16, uint32, uint64, uint, f ...

  3. Linux云服务器

    1. 第一步:前往阿里云官网注册账号,实名认证.进去云服务器,创建实例! 第二步:选配置,**公网IP地址选择“分配”!**如果你是首次购买主机,安全组先不必勾选,或者勾选默认的 .后面,会有安全组的 ...

  4. 20175234 2018-2019-2 《Java程序设计》第三周学习总结

    20175234 2018-2019-2 <Java程序设计>第三周学习总结 教材学习内容重难点总结 关于驼峰式的认识 为了增加程序的可读性,除了在代码之间增加注释之外,程序员大都把代码中 ...

  5. Python3,x:Fiddler抓包工具如何进行手机APP的数据爬取

    示例一:苹果手机抓取教程 https://www.cnblogs.com/lizm166/p/8693085.html https://blog.csdn.net/cui130/article/det ...

  6. zookeeper 服务挂掉重启后,dubbo 服务是不会自动重新注册上的

    今天遇到一个问题: 系统初始有两个dubbo 服务 , A 和 B , 都是正常注册到zookeeper 上的, 但是zookeeper 服务机房 断电导致 服务宕机, 那就重启吧. 一切正常. 但是 ...

  7. Maven依赖及范围

    一.依赖范围(scope): 共5种,compile (编译).test (测试).runtime (运行时).provided.system compile:编译依赖范围,在编译,测试,运行时都需要 ...

  8. JQUERY-定义-查找

    正课: 1. 什么是jQuery 2. 如何使用jQuery 3. 查找 1. 什么是jQuery 第三方开发的 执行DOM操作的 极简化的 函数库 第三方: 下载 执行DOM操作: 学习jQuery ...

  9. ABP框架系列之二十五:(Embedded-Resource-Files-嵌入式资源文件)

    Introduction ASP.NET Boilerplate provides an easy way of using embedded Razor views (.cshtml files) ...

  10. CPU寻址

    CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...