- 综合排序
- 最热优先
- 最新优先
- 来自专栏踏浪的文章
react项目预渲染开发
react越来越火了，是开react开发的人员而是越来越多。但是因为单页应用SEO的问题，我们也不得不去解决这个问题。不管是哪里，都提供了两种方案，一种是SSR服务端渲染，另一种则是预渲染方式。 什么是预渲染 在一般的react项目中（比如使用create-react-app创建的项目），我们在最后打包的时候只会生成一个HTML，JS与CSS文件，或许你会采用一些方法，比如公共文件拆分，路由懒加载等等生成多个文件 怎么使用预渲染 开发react项目的时候，一般都是结合者webpack使用的。目前用的最多的预渲染的方法，就是使用webpack插件prerender-spa-plugin。 maxConcurrentRoutes: 4, // Optional - Wait to render until the specified event is dispatched on 开发的时候必须使用 History 路由而不能使用 Hash 路由。
2.4K21发布于 2019-11-28 - 来自专栏CRPER折腾记
React 折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4React16antd等)
前言 自己搭的脚手架,坑都是一步一步踩完的; 技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+) 闲话不多说,直入主题,有兴趣的可以瞧瞧 /> </Switch> {/**这里是开启了开发模式下显示 v4的写法 export default hot(module)(App); 复制代码 ---- 问题四: 加快开发模式下的编译,以及常规的美化输出 用了happypack来加快了js,css的便以速度 (多进程); 给css也开启了tree shaking 我这个项目没有引入less或sass,用styled-components@4来写样式 webpack.base.config.js const (error); } ); 复制代码 ---- 总结 写完了整个后台管理系统,发现mobx并没有想象中的好用; 看到阿里的umi已经2.x了(应该挺稳定了),准备用这个umi+dva重写整个项目
1.8K20发布于 2018-12-05 - 来自专栏前端人人
React项目配置4(如何在开发时跨域获取api请求)
1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口) ---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18 7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增) 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 我们在开发时候，如果前后端不在同域下，即前后端分离，就会产生跨域的情况！ 将来在发布的时候，在生产环境下，大概会有两种情况： 前后端不在同域下（JSONP，CORS，今天不讲） 前后端在同域下 我们今天要讲的是第二种情况，前后端在同域下，而开发时，不在同域下！
2.7K50发布于 2018-04-11 - 来自专栏大前端（横向跨端 & 纵向全栈）
React项目前端开发总结
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享! 1. 使用技术：react＋react-router + react-redux + antd 2. 请求方法封装 ? 调用方法 ? 3. 破解反盗链 ? 4. 配置打包生产环境与测试环境 ? 本项目中常用的编辑器指令如下： (1). 清空内容 ? (2). 插入内容 ? (3). 获取编辑器的内容 ? (4). 设置编辑器的内容 ? (5). 设置编辑器不可编辑 ? (6). 图片裁剪插件react-cropper的使用 ? 12. 前端项目工程化与模块化的心得 (1). 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系） (2). 制定项目开发规范(ESLint规范) (4). 模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例) (5).
1.9K20发布于 2020-11-26 - 来自专栏网络收集
4、后台项目的开发
4、后台项目的开发1.后台项目的目标我们已经学习完了 KOA2 的快速上手, 并且对 KOA2 当中的中间件的特点页进行了讲解. 接下来就是利用KOA2 的知识来进行后台项目的开发，后台项目需要达到这以下几个目标:1.计算服务器处理请求的总耗时计算出服务器对于这个请求它的所有中间件总耗时时长究竟是，我们需要计算一下2.在响应头上加上响应内容的 每一个目标就是一个中间件需要实现的功能, 所以后台项目中需要有三个中间件2.后台项目的开发步骤创建一个新的文件夹, 叫做 koa_server , 这个文件夹就是后台项目的文件夹1.项目准备1.安装包npm 类型由于咱们所响应给前端浏览器当中的数据都是 json 格式的字符串，所以 mime 类型可以统一的给它写成 application/json , 当然这一块也是简化的处理了，因为 mime 类型有几十几百种，我们我们没有必要在我们的项目当中考虑那么多 contentType = 'application/json; charset=utf-8' ctx.set('Content-Type', contentType) await next() }4.
64230编辑于 2022-06-18 - 来自专栏CRPER折腾记
React 16.x折腾记 - (5) 记录用React开发项目过程遇到的问题(Webpack4React16antd等)
前言 自己搭的脚手架,坑都是一步一步踩完的; 技术栈: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+) 闲话不多说,直入主题,有兴趣的可以瞧瞧 的switch跳转 import React, { Component } from 'react'; import { hot } from 'react-hot-loader'; import DevTools /> </Switch> {/**这里是开启了开发模式下显示 v4的写法 export default hot(module)(App); 问题四: 加快开发模式下的编译,以及常规的美化输出 用了happypack来加快了js,css的编译速度(多进程)，给css 也开启了tree shaking 我这个项目没有引入less或sass,用styled-components@4来写样式 webpack.base.config.js const webpack = require
52010编辑于 2024-02-01 - 来自专栏random
基于webpack4搭建的react项目框架
介绍 框架介绍，使用webpac构建的react单页面应用，集成antd。使用webpack-dev-server启动本地服务，加入热更新便于开发调试。 使用bundle-loader进行代码切割懒加载 手动搭建，不使用cli，大量注释适合初学者对webpack的理解学习，对react项目的深入了解 启动 git clone https://gitee.com /wjj0720/react-demo.git cd react-demo yarn yarn start 打包 yarn build 目录结构 +node_modules -src /Home"; // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 import React, {Component} from 'react </Provider> // 然后组件调用 只需要在组件导出时候 使用connent链接即可 import React, {Component} from 'react' import
98630发布于 2019-09-11 - 来自专栏云开发
如何在云开发部署React项目
安装云开发 cli 工具 和 React脚手架 在配置好 NodeJs环境后，执行如下命令，安装云开发 cli 工具以及 React脚手架： image.png image.png 本地初始化一个React image.png 在浏览器中打开localhost:3000，可以看到React的界面，这样说明成功完成了本地开发的项目搭建 image.png 创建云开发环境 创建一个云开发环境用来部署React image.png 现在我们通过云开发的CLI来完成React项目的部署。 ， image.png 确认授权后出现下图的界面，证明登陆成功了，同时有个小 tips，就是 cloudbase 可以使用简写命令 tcb image.png 打包React项目并部署 回到React 项目目录中执行yarn build对项目进行打包，React脚手架将会默认将文件打包到build的目录下 image.png 打包完成后，进入到build后的目录执行如下命令来进行部署，envID需要替换成自己的
2.8K40发布于 2020-04-13 - 来自专栏全栈程序员必看
react项目实战教程(react项目实战)
文章目录 项目实战前的准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App 路由 1-5 路由的懒加载 项目实战前的准备工作 React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 在项目根目录src文件下创建views文件夹 然后在views文件夹里创建所需要页面, from 'react'; import ReactDOM from 'react-dom'; import App from '. 404" /> //如果路径与之前都不匹配,则返回404页面 </Switch> </Router> , document.getElementById('root') ); 1-4需要配置内层
3.1K50编辑于 2022-07-28 - 来自专栏main方法
React开发环境搭建、项目创建、命令使用
文章目录 前言 一、Node.js下载安装 二、创建React项目 三、React项目常用npm命令使用 总结 ---- 前言 由于项目组前端紧缺的原因，一个后端开发安排了前端开发任务，之前有用过VUE 开发过后端页面，这么说来还是有经验的，借此记录一下React开发环境搭建过程。 二、创建React项目 ① 安装创建React项目的模块cnpm install -g create-react-app ? ② 切换到项目空间目录，创建React项目 react-demo，输入创建命令create-react-app react-demo在当前目录下创建。 ? npm run build 打包构建项目（构建成静态文件） ---- 总结 本章详细介绍从React环境搭建到项目创建以及常用命令使用说明，这些都是准备学习、开发React必需要掌握的技能，所谓磨刀不误砍柴功就是这么个道理
5.7K10发布于 2020-12-07 - 来自专栏知道一点点
react项目搭建
1.全局安装脚手架 npm install -g create-react-app 2、创建项目，安装依赖 create-react-app my-react-app 3、进入项目 cd my-react-app 4、启动项目 npm start 5.首先安装路由组件：react-router-dom npm install react-router-dom --save-dev 6.安装 redux 的第三方模块 ： npm install redux --save npm install react-redux --save 7.安装axios npm i axios --s 8.安装 antd npm i antd
61411发布于 2020-08-06 - 来自专栏前端人人
React项目配置5(引入MockJs,实现假接口开发)
1、React项目配置1(如何管理项目公共js方法)---2018.01.11 2、React项目配置2(自己封装Ajax)---2018.01.12 3、React项目配置3(如何管理项目API接口) ---2018.01.15 4、React项目配置4(如何在开发时跨域获取api请求)---2018.01.16 5、React项目配置5(引入MockJs,实现假接口开发)---2018.01.17 6、React项目配置6(前后端分离如何控制用户权限)---2018.01.18 7、React项目配置6(ES7的Async/Await的使用)---2018.01.19(新增) 开发环境:Windows 也有的是前端写接口文档，后端照着文档开发，但很少这种情况，目前国内还是后端老大！ 接口设计完了，但是后端开发还需要一些时间。前端需要调试咋办？前端闲着？如果你想闲着就先闲着！ 具体的编写方法我就不讲了，大家可以去官网查看： http://mockjs.com/ 4、引入mock 修改apiManager.js import cookie from 'react-cookie'
5.3K62发布于 2018-04-11 - 来自专栏ShanSan的云原生之路
React+Flask打造前后端分离项目开发环境
碰巧最近React玩得多，撸一篇文章纪念一下开发环境的搭建。? 开篇两问： 什么是React？ ：Windows+Flask+React+Git Bash+vscode Backend-Flask 个人比较喜欢用CLI，So，项目开发依赖使用virtualenv+pip管理，pipenv也还行 source env/Scripts/activate # 4、安装项目依赖 pip install -r requirments.txt # 5、创建好templates和static目录，用于存放React Frontend-React 前端React应用的开发环境使用官方提供的脚手架create-react-app搭建。 # 1、安装脚手架 npm install -g create-react-app # 2、为Flask_React项目创建React App->frontend create-react-app frontend
7.2K40发布于 2020-07-06 - 来自专栏海仔技术驿站
React-day4
移动App第4天 组件的生命周期 概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期； 组件生命周期分为三部分 页面已经完全保持同步 组件销毁阶段：也有一个显著的特点，一辈子只执行一次； componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用； vue中的生命周期图 React React生命周期的回调函数总结成表格如下： ? 中使用ref属性获取DOM元素引用 使用React中的事件，绑定count自增 组件运行中事件的对比 shouldComponentUpdate： componentWillUpdate： render 在React.js中，默认没有提供双向数据绑定这一功能，默认的，只能把state之上的数据同步到界面的控件上，但是不能默认实现把界面上数据的改变，同步到state之上，需要程序员手动调用相关的事件，来进行逆向的数据传输
1.1K20发布于 2021-05-06 - 来自专栏kyle的专栏
react-router4
一、关于react-router react-router是一些封装好的组件用于前端路由，当我们点击的时候会出现一个虚拟的路由，并不会做页面的全刷新，实现不同组件之间的切换和跳转。 https://github.com/ReactTraining/react-router github 三、react-router有3种使用场景 React Router被拆分成三个包：react-router ,react-router-dom和react-router-native。 react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。 ? import React from "react"; import { withRouter } from "react-router"; class ShowTheLocation extends
1.9K30发布于 2020-08-24 - 来自专栏一Li小麦
react 同构初步（4）
本笔记系列进度已更新到：https://github.com/dangjingtao/react-ssr axios代理 用代理规避跨域其实是很简单的事情，在往期的文章中已经有过类似的案例。 当前的项目分为三大部分：客户端（浏览器），同构服务端（nodejs中台，端口9000）和负责纯粹后端逻辑的后端（mockjs，端口9001）。 helloworld到放弃'}, {id:2,name:'背锅的艺术'}, {id:3,name:'撸丝程序员如何征服女测试'}, {id:4, from 'react'; function NotFound(props){ return
404 你来到了没有知识的星球.. 在Notfound中定义一个Status组件用来给staticContext赋值： import React from 'react'; import { Route } from 'react-router-dom
2.4K10发布于 2020-01-02); } } export default App; 编译生产环境的项目 // 编译项目，会在项目目录下生成一个 build 的文件夹。 npm run build // 安装 pushstate-server 用于将已经编译好的项目部署 npm install -g pushstate-server // 将编译项目运行在本地查看效果 浏览器访问 http://0.0.0.0:9000 后就能看到编译后的测试项目了。来自专栏jiajia_dengReact 学习笔记之创建 React 项目
安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules
48730编辑于 2023-10-21 - 来自专栏米虫的家
前端模块化开发--React框架（三）：应用进阶（react-router4&&antd框架）
GitHub地址 一、react-router4 1、react-router4理解 1) react的一个插件库 2) 专门用来实现一个SPA应用 3) 基于react的项目基本都会用到此库 1) 单页Web应用（single page web application，SPA 2) 整个应用只有一个完整的页面 3) 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 4) .注册路由: router.get(path, function(req, res)) - b.当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据 4) //其它 1)history对象 2)match对象 3)withRouter函数 6、使用 引用 Code //下载版本4的，如果不指定会下载最新的5版本 npm install --save react-router-dom = () => { //前进，下一个 this.props.history.goForward() } 二、ant design前端UI框架 官网地址 蚂蚁金服的前端UI框架，基于react
1.5K10发布于 2020-09-24 - ); } } export default App; 编译生产环境的项目 // 编译项目，会在项目目录下生成一个 build 的文件夹。 npm run build // 安装 pushstate-server 用于将已经编译好的项目部署 npm install -g pushstate-server // 将编译项目运行在本地查看效果 浏览器访问 http://0.0.0.0:9000 后就能看到编译后的测试项目了。 相关来自专栏jiajia_deng
React 学习笔记之创建 React 项目
安装 React 的学习环境 // 安装创建 react 项目的工具 npm install -g create-react-app // 创建一个项目 ➜ Project create-react-app Installing react, react-dom, and react-scripts... // 启动项目 cd jiajia-react npm start 目录结构介绍 node_modules
98210发布于 2020-01-04
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? 那么恭喜你，你可以正常开发 React 项目了。 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 ” 上述是针对项目做了一些业务开发上的配置与约定，各位同学可以根据自己团队中的规定与喜好行修改。 其他配置 这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。 src/*" ] }, } “其中 antd-mobile 可以自行替换成 antd，包括 postcss 也可以根据自己的喜好替换 ” 通过上述的简单改造，此时已经可以进行正常的小项目开发了
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号