使用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构建的本地开发环境,但是现在我的笔记本电脑已经更新,没有当时的开发环境.本着尽量不往电脑上装无用软件的原则 ...
随机推荐
- Quartz基础知识了解(一)
一.QuartZ是什么? 二.获取 三.核心接口 Scheduler - 与调度程序交互的主要API. Job - 由希望由调度程序执行的组件实现的接口. JobDetail - 用于定义作业的实例. ...
- 设置同一个域名同一个源通过cdn用不同的端口访问网站设置
下图例子是设置80和88访问,因为80是默认的访问,所以只要设置88就行 进入站点管理-->应用防火墙-->高级设置 这个设置用到了url和host模块 在站点设置里设置要用到的端口:
- 关于.gitignore无法过滤某些文件
.gitignore文件用于忽略那些无需添加到版本管理的文件.但最近发现有些文件即使被加入到了.gitignore文件中,push时仍会被上传. 原因:如果某些文件已经被纳入了版本管理中,就算是在.g ...
- mysql5.5升级到5.7
一.首先把mysql服务停止,复制mysql5.5中的data文件夹中的内容(你需要的数据库),放在mysql5.7的data文件夹中; 二.启动切换mysql5.7版本,(我这用的是phpwamp, ...
- etcd集群部署与遇到的坑
在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一下,为了以后更好操作. ETCD参数说明 —data-dir 指定节点的数据存储目录,这些数据包括节点ID,集群ID,集群 ...
- (转)C# Windows服务 弹出消息提醒框
出处:http://blog.csdn.net/donghui6116773/article/details/53467069 服务(Service)对于大家来说一定不会陌生,它是Windows 操作 ...
- sql-多表查询
一:外连接 1.左外连接(left join) select * from A left join B on A.id=B.a_id 结果如下 很明显,A表的所有数据都显示出来了 ...
- java读取jar包中的文件
随手写了一个java小工具,maven打包成功后,发现工具总是读不到打在jar包中的文件信息,要读取的文件位于 /src/main/resources 目录下,打包成功后,文件就在jar包中根目录下, ...
- LB+ECS+RDS经典架构图例及注意事项
LB+ECS+RDS经典架构图例及注意事项
- Java:ConcurrentHashMap
ConcurrentHashMap的目的 多线程环境下,使用Hashmap进行put操作会引起死循环,导致CPU利用率接近100%,所以在并发情况下不能使用HashMap.虽然已经有一个线程安全的Ha ...