使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置
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. React介绍 React开发环境搭建 React第一个程序
什么是 React React 是 Facebook 发布的 JavaScript 库,以其高性能和独特的设计理念受到了广泛关注. React的开发背景 Faceboo ...
- Windows下快速搭建安卓开发环境android-studio
Windows下快速搭建安卓开发环境android-studio 发布时间:2018-01-18 来源:网络 上传者:用户 关键字: 安卓 搭建 Android Windows 快速 环境 Studi ...
- 五分钟用Docker快速搭建Go开发环境
挺早以前在我写过一篇用 `Docker`搭建LNMP开发环境的文章:[用Docker搭建Laravel开发环境](http://mp.weixin.qq.com/s?__biz=MzUzNTY5MzU ...
- 快速打造跨平台开发环境 vagrant + virtualbox + box
工欲善其事必先利其器,开发环境 和 开发工具 就是 我们开发人员的剑,所以我们需要一个快并且好用的剑 刚开始做开发的时候的都是把开发环境 配置在 自己的电脑上,随着后面我们接触的东西越来越多,慢慢的电 ...
- CentOS 7快速搭建Nodejs开发环境
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好.学习Nodejs首先需要会安装环境.这里我介绍如 ...
- 使用Intellij IDEA构建spark开发环境
近期开始研究学习spark,开发环境有多种,由于习惯使用STS的maven项目,但是按照许多资料的方法尝试以后并没有成功,也可能是我环境问题:也可以是用scala中自带的eclipse,但是不太习惯, ...
- XamarinForms教程构建XamarinForms开发环境
构建XamarinForms开发环境 所谓Xamarin.Forms的开发环境,就是指在基本硬件和数字软件的基础上,为支持系统软件和应用软件的工程化开发和维护而使用的一组软件,简称SDE.对于任何的程 ...
- 利用CodeBlocks结合freeglut快速搭建OpenGL开发环境
利用CodeBlocks结合freeglut快速搭建OpenGL开发环境 2018-12-19 10:15:48 再次超越梦想 阅读数 180更多 分类专栏: 我的开发日记 版权声明:本文为博主原 ...
- 从0构建webpack开发环境(一) 一个简单webpack.config.js
本文基于webpack4.X,使用的包管理工具是yarn 概念相关就不搬运了,直接开始 首先项目初始化 mkdir webpack-demo && cd webpack-demo ya ...
- 使用Docker快速搭建PHP开发环境
最近有个同事找过来,希望我对在很早之前写的一个PHP网站上增加一些功能,当时开发使用xampp构建的本地开发环境,但是现在我的笔记本电脑已经更新,没有当时的开发环境.本着尽量不往电脑上装无用软件的原则 ...
随机推荐
- mysql 按出现次数排序
SELECT * FROM table a LEFT JOIN (SELECT key,count(*) as c FROM table GROUP BY key ) b on a.key=b.k ...
- 3. Go语言基本类型
Go语言基本类型如下: bool string 数值类型 (int8, int16, int32, int64, int, uint8, uint16, uint32, uint64, uint, f ...
- Linux云服务器
1. 第一步:前往阿里云官网注册账号,实名认证.进去云服务器,创建实例! 第二步:选配置,**公网IP地址选择“分配”!**如果你是首次购买主机,安全组先不必勾选,或者勾选默认的 .后面,会有安全组的 ...
- 20175234 2018-2019-2 《Java程序设计》第三周学习总结
20175234 2018-2019-2 <Java程序设计>第三周学习总结 教材学习内容重难点总结 关于驼峰式的认识 为了增加程序的可读性,除了在代码之间增加注释之外,程序员大都把代码中 ...
- Python3,x:Fiddler抓包工具如何进行手机APP的数据爬取
示例一:苹果手机抓取教程 https://www.cnblogs.com/lizm166/p/8693085.html https://blog.csdn.net/cui130/article/det ...
- zookeeper 服务挂掉重启后,dubbo 服务是不会自动重新注册上的
今天遇到一个问题: 系统初始有两个dubbo 服务 , A 和 B , 都是正常注册到zookeeper 上的, 但是zookeeper 服务机房 断电导致 服务宕机, 那就重启吧. 一切正常. 但是 ...
- Maven依赖及范围
一.依赖范围(scope): 共5种,compile (编译).test (测试).runtime (运行时).provided.system compile:编译依赖范围,在编译,测试,运行时都需要 ...
- JQUERY-定义-查找
正课: 1. 什么是jQuery 2. 如何使用jQuery 3. 查找 1. 什么是jQuery 第三方开发的 执行DOM操作的 极简化的 函数库 第三方: 下载 执行DOM操作: 学习jQuery ...
- ABP框架系列之二十五:(Embedded-Resource-Files-嵌入式资源文件)
Introduction ASP.NET Boilerplate provides an easy way of using embedded Razor views (.cshtml files) ...
- CPU寻址
CPU组成和寄存器 1)CPU由运算器.控制器.寄存器等器件组成,这些器件靠内部总线相连 2)寄存器是CPU的组成部分,用来暂存指令.数据和地址,CPU对其读写速度是最快的,不需要IO传输 存储单元 ...