React项目构建和路由
DreamFive
这个作者很懒,什么都没留下…
展开
-
第02节、构建:generator-react-webpack
最近公司又开始了新的项目,所以博客更新会不那么及时,另外晚上回家还在看 HTTP 相关的知识,整理的都是相关的东西。React当然还会继续更新。好了,废话不多说。react的生态圈非常庞大,第三方的构建工具也有很多种,这节介绍一个在业内比较流行的构建工具generator-react-webpack,它是需要yeoman的支持的。优点介绍:基于webpack构建,可以很容易的配置自己需要的webp...转载 2018-03-16 16:34:15 · 741 阅读 · 1 评论 -
第08节、路由:通过路由传值的方法
目录目录最常见的传值多参数传值在开发中路由之间的传值是必不可少的,虽然React有更优雅的方式。最常见的传值传值是比较简单的。在传值时,主要依靠props进行接收。路由和页面之间的传值也很类似。代码还是接着上节进行编写。先在nav.js页面传送值,看下面的代码,传送的值为ILoveWeb。<NavLink to="/Jscomponentc/...转载 2018-03-22 11:28:22 · 658 阅读 · 0 评论 -
第07节、路由:404设置和跳转设置
项目中都要设置 404 页面,也就是当找不到这个路由时跳转的页面。React 中的404主要靠 Switch 组件来完成。Switch组件的使用在index.js页面中,在引入路由的地方,我们加入Switch的引入。1import {BrowserRouter as Router , Route , Switch} from 'react-router-dom';编写404页面现在需要一个统一的4...转载 2018-03-21 14:02:32 · 1902 阅读 · 0 评论 -
第06节、路由:NavLink中的常用选项
上一节,初步使用了 React 路由。这节是针对 NavLink 标签上的选项。Route和NavLink的exact选项上一节中,代码中有一个 exact 选项。这个是精确匹配使用,一般而言React会匹配所有能匹配的路由组阶,exact可以使我们的匹配更精确。exact的值为bool型,为true是表示严格匹配,为false时为正常匹配。123 <Route path="/" comp...转载 2018-03-21 11:04:01 · 8483 阅读 · 0 评论 -
第05节、路由:Hello React路由
由在开发中时刻都会用到,它是SPA(单页应用)的基础,可以说不会路由系统基本就无法用React进行编程。其实路由可以简单的看作我们平时访问的网址或者路径,这样看有助于你的理解,但是并不正确。Router包安装:安装包还是要打开命令行工具,使用npm来进行安装。1npm install --save react-router react-router-domreact-router:是基本的rout...转载 2018-03-20 15:14:43 · 206 阅读 · 0 评论 -
第04节、构建:webpack一步一步构建02
上节已经对webpack进行了基本配置,而且已经能打包到页面中了,这节主要针对我们的ES6和React进行配置。在学习之前,请保证你上节的内容已经配置完成,如果你没有配置完成,这节将不能继续下去。Babel安装配置在webpack中配置Babel需要先加入babel-loader,这里我们继续使用npm来进行安装,但是我们一般还需要支持es2015和React,所以要安装四个包。1cnpm ins...转载 2018-03-20 11:20:40 · 181 阅读 · 0 评论 -
第03节、webpack构建项目01
如果你对webpack很精通,完全可以自己随心所欲的用webpack自己构建一个React的开发环境,这节从头开始自己构建一个简单的React开发环境。这节课开始之前,你要会基本的webpack的开发。在安装webpack之前,先建立一个文件夹并进入(我这里使用cmd命令了)12mkdir react-webpackcd react-webpack进入文件夹后对我们的webpack项目进行初始化,...转载 2018-03-19 20:26:20 · 344 阅读 · 0 评论 -
第 10 节、路由:prompt 用法讲解
在很多网站应用中,当你想离开页面时都会弹出一个提示框(alert),让你选择是否残忍离开。React路由也为我们准备了这样的组件,就是prompt。标签要使用标签先要用import进行引入,我们在Jscomponentb.js里引入。import React from "react";import {Prompt} from "react-router-dom";expo...转载 2018-03-22 14:56:50 · 1624 阅读 · 0 评论 -
第 09 节、路由:Router 中的属性和路由模式
目录目录basename属性forceRefresh属性5中路由方式现在我们已经掌握了React路由导航的基本方法,这节学习一下标签上的属性和用法。这节还有一个重点就是路由的5种模式。basename属性basename的作用是我们增加一级导航目录,比如以前的导航目录是:http://localhost:1717/Jscomponentb 现在想访问同一...转载 2018-03-22 14:16:25 · 1584 阅读 · 0 评论 -
第01节、create-react-app快速脚手架
它的官网:https://github.com/facebookincubator/create-react-appcreat-react-app优点无需配置:官方的配置堪称完美,几乎不用你再配置任何东西,就可以上手开发项目。高集成性:集成了对React,JSX,ES6和Flow的支持。自带服务:集成了开发服务器,你可以实现开发预览一体化。热更新:保存自动更新,让你的开发更简单。全兼容性:自动处理...转载 2018-03-12 09:22:44 · 379 阅读 · 0 评论