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. tomcat/Java指定加载jar包的路径

    背景:部署的web站点,应用默认加载工程的/webapps/工程名/WEB-INF/lib下的jar包   但是我需要提供一个和web工程没关系的的jar包管理目录   解决方法: 执行java方法时 ...

  2. Python设计模式 - UML - 用例图(Use Case Diagram)

    简介 用例图主要是从用户的角度出发对软件产品的功能及执行者进行描述的. 用例图是从需求分析到软件交付的第一步,图示化展示参与者与参与者之间.参与者与用例之间.用例与用例之间的关系,帮助开发人员更好的理 ...

  3. js学习(5)语法专题

    Js是一种动态类型语言,变量没有类型限制,可以随时赋值 强制转换: 主要指使用Number(),String()和Boolean()三个函数,手动将各个类型的值,分别转换为数字,字符串或布尔值 Num ...

  4. javaweb开发3.基于Servlet+JSP+JavaBean开发模式的用户登录注册

    转载孤傲苍狼博客http://www.cnblogs.com/xdp-gacl/p/3902537.html 1.层次比较分明的项目结构图

  5. MySQL优化(二) 优化诀窍

    一.索引的使用 (1)查询要使用索引最重要的条件是查询条件中的字段建立了索引: (2)下列几种情况可能使用到索引: <1> 对于创建的多列索引,只要查询条件使用了最坐边的列,索引一般就会被 ...

  6. SSD性能测试第一神器:FIO

    SSD性能测试第一神器:FIO  2017年8月12日 syswift 0 对于SSD性能测试来说,最好的工具莫过于FIO了. 上面这个可爱的小伙子名字叫Jens Axboe,他是丹麦哥本哈根大学计算 ...

  7. ef core中使用code first

    这个配置还是挺坑,照这个一步步做倒是可以 https://www.cnblogs.com/chenzhaoyu/p/7831980.html

  8. [uboot] (番外篇)uboot之fdt介绍

    http://blog.csdn.net/ooonebook/article/details/53206623 以下例子都以project X项目tiny210(s5pv210平台,armv7架构)为 ...

  9. # 2019-2020-3 《Java 程序设计》第五周学习总结

    2019-2020-3 <Java 程序设计>第五周知识总结 1.使用interface来定义一个接口.接口定义同类的定义类似,也是分为接口的声明和接口体,其中接口体由常量定义和方法定义两 ...

  10. C++ MFC棋牌类小游戏day5

    先整理一下之前的内容: 1.画了棋盘,把棋盘的每个点的状态都保存起来. 2.画棋子,分别用tiger类和people类画了棋子,并且保存了棋子的初始状态. 下面开始设计棋子的移动: 1.单机棋子,选中 ...