react全家桶有哪些？（详细）
一 、 create-react-app脚手架
对于现在比较流行的三大框架都有属于自己的脚手架（目前这些脚手架都是使用node编写的，并且都是基于webpack的）：
- Vue的脚手架：vue-cli
- Angular的脚手架：angular-cli
- React的脚手架：create-react-app
它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。
1.1 创建项目并启动
全局安装
第一步，全局安装：npm i -g create-react-app
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start
npx
npx create-react-app react_app
cd react_app
npm run start
注意：项目名称不能使用大写字母
1.2 项目结构
1.3 创建TS项目
create-react-app <project-name> --template typescript
npx create-react-app <project-name> --template typescript
1.4 了解PWA
全称Progressive Web App，即渐进式WEB应用
- 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
- 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
- 这种Web存在的形式，称之为是 Web App
解决问题
- 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
- 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
- 实现了消息推送
- 等等一系列类似于Native App相关的功能
二、AntDesign 库的使用
antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果
2.1 在 create-react-app 中使用
// 1. 安装
npm i antd// 2. 修改 src/index.js，引入 antd/dist/antd.css
import 'antd/dist/antd.css'// 3. 使用
import React from 'react'
import { Button } from 'antd'
import './App.css'const App = () => (<div className="App"><Button type="primary">Button</Button></div>
)export default App
2.2 craco.config.js 配置
// 安装
npm install @craco/craco/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}2.2.1 修改 antd 主题色
1.安装 craco-less
npm install craco-less
2.craco.config.js 配置
const CracoLessPlugin = require('craco-less')
module.exports = {plugins: [{plugin: CracoLessPlugin,options: {lessLoaderOptions: {lessOptions: {modifyVars: { '@primary-color': '#1DA57A' },javascriptEnabled: true}}}}]
}3.index.js 引入
import 'antd/dist/antd.less'
2.2.2 配置别名
const path = require('path')
const resolve = dir => path.resolve(__dirname, dir)module.exports = {webpack: {alias: {'@': resolve('src')}}
}
1三、react-router
3.1 基本使用
React Router的版本4开始，路由不再集中在一个包中进行管理了：
- react-router是router的核心部分代码
- react-router-dom是用于浏览器的
- react-router-native是用于原生应用的
安装react-router：
- 安装react-router-dom会自动帮助我们安装react-router的依赖
npm install react-router-dom
3.2 路由组件
3.2.1 <NavLink><Link>
相当于 vue 的 router-link，渲染成 a 标签。
区别：
NavLink 比 Link 拥有更多的属性，如：exact、className、activeClassName…
<NavLink className="list-group-item" to="/home">Home</NavLink> /* 封装<NavLink> */
// MyNavLink 组件
import React from 'react'
import { NavLink } from 'react-router-dom'// 传过来的 body 内容也在 this.props.children 中
return <NavLink className="list-group-item" activeClassName="linkActive" {...this.props} />// 使用的组件
<MyNavLink to="/home">Home</MyNavLink>
<MyNavLink to="/about">About</MyNavLink>
1react全家桶有哪些？（详细）相关推荐
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- react全家桶从0到1(react-router4、redux、redux-saga)
本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解, ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
- 初学者的React全家桶完整实例
概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
- React全家桶写一个CNode社区，奉上心得与源码
webpack2+react+react-router+react-redux+ES6+antd-mobile版本的Cnode 苦于我就职的公司的技术栈还是ES5+jQ+handelbars, 而我一 ...
- 【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- react全家桶实现招聘app-项目准备（一）
1.1 项目技术 a. 使用react全家桶 + es6 + webpack + antd-mobile b. 采用模块化.组件化.工程化 c. Node + express + mongodb + ...
- React全家桶项目
开篇 利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵.目录结构相当简单.没有数据库,你们运行不起来.想运行起来的话,把express调用数据库的部分全删掉,写死数据. ak47 ...
- 视频教程-React 全家桶从入门到实战到源码-其他
React 全家桶从入门到实战到源码 上市公司前端开发工程师,专注于 React 技术栈,对 React 全家桶从 react-router 路由到 Redux 状态管理工具再到 webpack 打包 ...
最新文章
- (转)AppCan中调用系统浏览器打开网页
- kdevelop安装完成后如何启动
- JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（1）：Mybatis和Hibernate概念理解...
- 高档名片设计：12款专业的名片设计欣赏
- slim 搭建rnn_使用Keras搭建cnn+rnn， BRNN，DRNN等模型
- php如何生成本地文档,php如何生成word文件
- [资料]PHP中的__set __get使用
- android中执行（定时任务）的方法及6位随机码的产生
- 如何通过http协议知道是从那个站点过来的请求_聊聊HTTP的那些事，以及在它背后的“勾当”...
- win10连接共享打印机_win7共享出来的打印机部分电脑无法连接的问题
- 触摸屏调出虚拟键盘_苹果最新专利申请被曝光：“真实触感虚拟键盘”可能会用于ipad和笔记本电脑！...
- 程序员代码面试指南 算法与数据结构 大厂经典代码面试题
- 附合导线坐标计算例题_闭合附合导线计算(课件例题)
- 传奇开服很难吗？教你怎么给Hero传奇引擎添加NPC
- wword中如何在方框（□）中打钩（√）
- mac 更新系统时间
- 25个能够激发灵感的暗色调CSS Web设计欣赏
- CSS3画三角形、菱形、平行四边形
- 关于ubuntu浏览器模糊不清的解决方法
- 崔莺莺要明媒正娶，张生你怎么看？