create-react-app 入门学习
全局安装 create-react-app
npm install create-react-app -g
创建项目
在全局安装了create-react-app 后 创建项目,如果按照下面的第一种办法创建不成功,可以使用第二种办法
create-react-app react01
// 或者
npx create-react-app react01
使用路由
- 下载路由模块
npm i react-router-dom -s
为实现路由懒加载 安装 react-loadable
npm i react-loadable -s
- 创建页面
在 src 目录下创建 pages文件,测试文件目录如下
pages => index.js代码
import Loadable from 'react-loadable';
import { ActivityIndicator } from 'antd-mobile';
const Home = Loadable({
loader: () => import('./home'),
loading: ActivityIndicator
});
const Cate = Loadable({
loader: () => import('./cate'),
loading: ActivityIndicator
});
export {
Home,
Cate
}
- 在 src 目录下创建创建routes.js
import {
Home,
Cate
} from './pages'
const routes = [
{
url: '/home',
component: Home,
text: '首页',
isToggleFooter:true,
isShowHeaderAndFooter: true
},
{
url: '/cate',
component: Cate,
text: '分类',
isToggleFooter:true,
isShowHeaderAndFooter:true
}
]
export default routes
- 在 app.js引入router模块和routes.js文件
import React, { Component, Fragment } from 'react';
import {
Route,
Redirect,
Switch
} from 'react-router-dom'
import routes from './routes'
class App extends Component {
render() {
return (
<Fragment>
<header>Header</header>
<Switch>
{
routes.map(route => {
return (
<Route
key={route.url}
path={route.url}
component={route.component} />
)
})
}
<Redirect exact from="/" to={routes[0].url} />
{/* 这里用 redirect 进行 首页自动跳转到 /home 路由下
exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home
*/}
{/* <Redirect to = '/all'/> */}
{/* 如果找不到页面 则去 4040页面 */}
</Switch>
<footer>尾部</footer>
</Fragment>
);
}
}
export default App;
- 在 src 最外层 index.js使用 router模块
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<Route component = {App} />
</Router>
,
document.getElementById('root'))
路由间跳转
以home 页面为例
import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
render() {
return (
<Fragment>
<div>我是Home页</div>
<button> <Link to="/cate">跳转到 cate 页</Link> </button>
</Fragment>
)
}
}
create-react-app 入门学习的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- create react app 项目部署在Spring(Tomcat)项目中
网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...
随机推荐
- week-03
1.简述HTTP交互原理 1.浏览器分析输入访问的地址 域名(IP)+$uri 2.读取浏览器缓存 3.请求DNS服务器,解析域名,返回IP 4.建立TCP连接,三次握手 5.发送请求 6.接收返回请 ...
- mysql数据库-运维合集
目录 RDBMS 术语 整删改查操作 库操作 表操作 账号与授权 匹配符(条件查询) MySQL三大类数据类型 函数 其他操作 查看数据库的占用空间大小 开启慢查询 状态查询 字符集设置 忘记密码重置 ...
- Step By Step(Lua输入输出库)
Step By Step(Lua输入输出库) I/O库为文件操作提供了两种不同的模型,简单模型和完整模型.简单模型假设一个当前输入文件和一个当前输出文件,他的I/O操作均作用于这些文件.完整模型则使用 ...
- stream的groupby出来的map是有顺序的map
stream分组后的map是有序map List<RedisInstanceTypeDto> typeDtoList = ModuleHelper.mapAll(redisInstance ...
- 视频教学动作修饰语:CVPR2020论文解析
视频教学动作修饰语:CVPR2020论文解析 Action Modifiers: Learning from Adverbs in Instructional Videos 论文链接:https://a ...
- 实战SpringBoot Admin
长话短说哦,直接查看下文吧 目录 声明 先锋 前提 SpringBoot Admin 介绍 服务端的搭建 客户端的搭建 参数的指南 尾声 声明 见名知意,实战SpringBoot Admin,实战!实 ...
- MySQL笔记03(黑马)
今日内容 DQL:查询语句 排序查询 聚合函数 分组查询 分页查询 约束 多表之间的关系 范式 数据库的备份和还原 DQL:查询语句 排序查询 语法:order by 子句 order by 排序字段 ...
- js正则中文
hi,大家好 今天跟小伙伴们浅谈以下如何用正则表示中文以及如何去运用.众所周知中文在计算机中是不能进行存储的.那我们是以什么办法让我们和计算机进行更好的沟通呢?常用的几种中文编码格式utf-8编码ut ...
- NOIP模拟测试2「排列 (搜索)·APIO划艇」
排序 内存限制:128 MiB 时间限制:1000 ms 标准输入输出 题目描述 输入格式 数据范围与提示 对于30%的数据,1<=N<=4: 对于全部的数据,1<=N< ...
- ORA-09817:Write to audit file failed
ERROR: ORA-09817: Write to audit file failed. --这种错误基本是磁盘空间满了 问题描述:sqlplus / as sysdba登不上,报上述ora-098 ...