- 综合排序
- 最热优先
- 最新优先
- 来自专栏踏浪的文章
react项目预渲染开发
react越来越火了，是开react开发的人员而是越来越多。但是因为单页应用SEO的问题，我们也不得不去解决这个问题。不管是哪里，都提供了两种方案，一种是SSR服务端渲染，另一种则是预渲染方式。 什么是预渲染 在一般的react项目中（比如使用create-react-app创建的项目），我们在最后打包的时候只会生成一个HTML，JS与CSS文件，或许你会采用一些方法，比如公共文件拆分，路由懒加载等等生成多个文件 怎么使用预渲染 开发react项目的时候，一般都是结合者webpack使用的。目前用的最多的预渲染的方法，就是使用webpack插件prerender-spa-plugin。 需要注意的是： 当项目正常运行，同时包含多个路由的时候，当我们在除了首页以外的其他的目录刷新页面的时候都是404，这是因为服务器的配置问题。本地这里无法实现。 开发的时候必须使用 History 路由而不能使用 Hash 路由。
2.4K21发布于 2019-11-28 - 来自专栏前端人人
React项目配置7(ES7的AsyncAwait的使用)
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 我们今天讲下ES7的Async/Await的使用！ 所有用es7 async await来解决这个问题 6、那怎么写呢？ 其实也很简单，之前我们已经封装好了，我们来写下试试！
1.5K50发布于 2018-04-11 - 来自专栏大前端（横向跨端 & 纵向全栈）
React项目前端开发总结
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享! 1. 7. Redux状态管理 在大型项目中，react中的组件嵌套及跨级是非常频繁的，而react的数据本身是单向数据流，这样组件之间传递数据非常麻烦，Redux最主要是用作应用状态的管理，用于实现多级组件之前的数据共享 图片裁剪插件react-cropper的使用 ? 12. 前端项目工程化与模块化的心得 (1). 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系） (2). 制定项目开发规范(ESLint规范) (4). 模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例) (5).
1.9K20发布于 2020-11-26 - 来自专栏云开发
如何在云开发部署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 '. , { Component } from 'react' import { admainRoute} from ".
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 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 产品把需求文档、原型搞好了，UI 设计图也搞好了，该开发了！ 也有的是前端写接口文档，后端照着文档开发，但很少这种情况，目前国内还是后端老大！ 接口设计完了，但是后端开发还需要一些时间。前端需要调试咋办？前端闲着？如果你想闲着就先闲着！
5.3K62发布于 2018-04-11 - 来自专栏ShanSan的云原生之路
React+Flask打造前后端分离项目开发环境
碰巧最近React玩得多，撸一篇文章纪念一下开发环境的搭建。? 开篇两问： 什么是React？ ：Windows+Flask+React+Git Bash+vscode Backend-Flask 个人比较喜欢用CLI，So，项目开发依赖使用virtualenv+pip管理，pipenv也还行 # 1、安装virtualenv pip install virtualenv # 2、为项目（Flask_React）创建虚拟环境->env virtualenv env # 3、激活虚拟环境env 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 - 来自专栏itclanCoder
React基础(7)-React中的事件处理
中,event对象并不是浏览器提供的,你可以将它理解为React的事件对象,由React将原生浏览器的event对象进行了封装,对外提供一公共的API接口,无需考虑各个浏览器的兼容性 与原生浏览器处理事件的冒泡 , { Fragment, Component } from 'react'; import ReactDOM from 'react-dom'; class List extends Component e.target.value) // 对用户输入进行判断 } } isPhoneLegal = (phone) => { const phoneRegexp = /^1([38]\d|5[0-35-9]|7[ e.target.value) // 对用户输入进行判断 } } isPhoneLegal = (phone) => { const phoneRegexp = /^1([38]\d|5[0-35-9]|7[ 让你手写,很多时候,拍拍胸脯,不借助搜索引擎,还真不一定能立马写得出来 在实际的开发中,函数的节流与函数防抖也是用得比较频繁的,可见它的重要性不言而喻
9.8K41发布于 2019-12-10 - ); } } 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
48730编辑于 2023-10-21
一个.NET 7 + DDD + CQRS +React+Vite的实战项目
项目简介 基于SignalR实现聊天通信，支持横向扩展，可支撑上万用户同时在线聊天 快速体验 http://server.tokengo.top:8888/ 可在这里快速体验使用，请注意目前只适配了PC : driver: bridge 注，容器并不会一次性启动成功，可能由首次启动的时候postgres未初始化成功导致Api服务启动失败，可能需要重启服务 后端架构 后端技术栈采用 .NET 7 PostgreSQL (业务数据库) Redis（用于存放热点数据，和支持SignalR横向扩展） MasaFramework(后端应用框架)+DDD（领域驱动设计）+CQRS（读写分离） 前端架构 React 目前支持Gitee直接登录或输入账号密码登录，（Github由于服务器无法访问到Api暂时无法使用） 后端项目结构 项目开源地址 gitee：https://gitee.com/hejiale010426
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
react学习系列7 调试
chrome浏览器安装react扩展 使用displayName属性 官方文档 扔个例子，写了个高阶组件，名字叫HOC，如果调用多次，就会出来多个HOC，优化后显示传入的组件名。 component.name || 'Component'; } export function withHeader(WrappedComponent) { return class HOC extends React.Component { // 在React组件查看中显示Hoc(被传入的组件名) static displayName = `HOC(${getDisplayName(WrappedComponent)}
Vite - 搭建 React 项目
前言 日常放鸽，火钳刘明 这是一个基于 vite 搭建的 React 的项目，开发体验非常棒。 创建一个 Vite 项目 yarn create @vitejs/app ? 那么恭喜你，你可以正常开发 React 项目了。 完结撒花 “如果不行的话，直接看 vite 官网，它比我写的详细 ” ---- 改造工程 但上述只是一个基础的 React demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置 目录约定 根据日常的开发习惯 ” 上述是针对项目做了一些业务开发上的配置与约定，各位同学可以根据自己团队中的规定与喜好行修改。 其他配置 这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。 src/*" ] }, } “其中 antd-mobile 可以自行替换成 antd，包括 postcss 也可以根据自己的喜好替换 ” 通过上述的简单改造，此时已经可以进行正常的小项目开发了
React 项目精进技巧
1、工程化实践 umi+dva作为底层框架，Ant Design Mobile为 UI 组件库，是蚂蚁金服推崇的的react项目最佳实践，具有国际化、权限、数据流、配置式路由、补丁方案、自动化 external 方面等等方便一线开发者的功能，部分功能代码可以参考Ant Design pro，目录结构预览如下 2、通用组件 ErrorBoundary 部分 UI 的 JavaScript 错误不应该导致整个应用崩溃 ，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界：错误边界 – React 懒加载 // index.js import React, { Component, lazy, Suspense } from 'react'; export default class Index extends Component { constructor(props) { super(props blank.png')} desc={[`-- 金币`]} stock={'--'} style={{ backgroundColor: '#F7F7F7
react项目打包优化
新公司所有的项目基本上都是使用 react 进行开发，之前的工程师是自己使用 webpack 搭建的项目，因为涉及到的东西不多，而且存在一些问题，已经启用。 同时因为项目时间原因没有太多时间自己搭建，而且自己较懒，所以选择了使用 create-react-app 进行项目的开发。 其实开发还是很简单的，主要就是优化的问题，这篇文章主要就是讲关于页面优化的问题，同时也是为了记录一下，避免下次使用的时候在到处找（因为之前写过，最近一次项目又去找之前的配置去了） ? 路由懒加载 使用react开发一般使用的路由模块都是react-router-dom这个插件。当然，如果你使用其他的插件，我想应该也是可以的，不过具体的用法可能需要你自己探索。 使用SSR渲染 使用SSR渲染不仅可以对SEO优化有一定的帮助，同时，还可以对react项目首屏优化的项目有一定的优化作用，所以，如果有需要，可以采用SSR渲染的模式进行开发。
nginx部署react项目
1.build项目 build注意要配置webpack的webpack.config.prod.js文件，生产环境的配置（我是使用的less，所以加了个less的loader） yarn build 2
React Native 项目实战
本文以 Twitter 工程师 Bonnie Eisenman 撰写的 Learning React Native 一书的第九章内容为蓝本，总结了 React Native 项目实践的一些经验。 ? 项目组织结构 所有的新增文件均放在项目根目录下的 src 里，主要有包含各页面的 components 子目录、数据模型的 data 子目录、负责数据存取的 stores 子目录、公共样式定义 styles 案例项目简介 作者提供的示例项目包含三个页面，包含多副牌（Deck）的列表页、为选中的某副牌增加一张卡牌（Card）的页面、为某张卡牌选择答案（Review）的页面。 页面开发 Deck 列表页 数据建模 在 React Native 项目试点过程中，尚不熟悉 JavaScript 的类相关语法。 Tamic开发社区 专业高水准的移动社区 Android & iOS 长按二维码关注
创建React + Ts项目
一、安装react+ts npx create-react-app my-app --template typescript 二、安装eslint代码检测 yarn eslint npx eslint --init eslint初始化后会出现三个项目，根据项目而定 1、使用什么样的eslint？ (选择1) React Vue.js None of these 4、项目使用Ts？(Yes) Does your project use TypeScript? (浏览器) Browser // 浏览器 Node // node环境 6、如何定义项目定义样式？ (使用流行的风格指南) Use a popular style guide // 使用流行的风格指南 Answer questions about your style // 问答定义形成一个风格 7、
