- 综合排序
- 最热优先
- 最新优先
- 来自专栏踏浪的文章
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项目前端开发总结
此项目为公司的公众号管理系统，承载了公司每个部门的业务，需求多，开发周期长，技术可圈可点之处较多，特此记录与大家分享! 1. Redux状态管理 在大型项目中，react中的组件嵌套及跨级是非常频繁的，而react的数据本身是单向数据流，这样组件之间传递数据非常麻烦，Redux最主要是用作应用状态的管理，用于实现多级组件之前的数据共享 9. 表格插件Echarts使用 引入Echarts插件 ? 重要的三个步骤，封装成一个方法，方便在数据改变时调用它． ? 上图步骤２中不同的表格类型配置不一样 (1). 饼图的配置 ? 图片裁剪插件react-cropper的使用 ? 12. 前端项目工程化与模块化的心得 (1). 项目架构设计（比如登录页与数据页与通用页要设计成平级关系，而不是嵌套关系） (2). 制定项目开发规范(ESLint规范) (4). 模块化(小颗粒度的，如表格中的分页)、组件化(粗颗粒度的，如表格)(早期的require.js为例) (5).
1.9K20发布于 2020-11-26 - 来自专栏前端自习课
【React】730- 从 loading 的 9 种写法谈 React 业务开发
全文从业务开发中最常用见 loading 效果不同是实现讲起，说下现在前端开发在业务上应该有的思考。 其实你在开发时不容易感觉到差别，但 React 本身是进行了很多差别处理，如果是 Class 类，React 会用 new 关键字实例化，然后调用该实例的 render 方法，如果是 Func 函数，React Refs 如果你是一个 jQuery 转型 React 的开发，会很自然的想到，我找到 Loading 组件的节点，控制他的显示与隐藏，当然这也是可以的，React 提供 Refs 方便你访问 DOM fetchSaga() { yield takeLatest("FETCH_REQUEST", fetchInfo); } 完整演示 https://codesandbox.io/s/rrnp9vk3wp 再封装一个 HOC 修改 loading 状态，这就是一个相对完美的 loading，其实 React 业务开发都可以用这个套路。
1.1K41发布于 2020-09-30 - 来自专栏云开发
如何在云开发部署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 --s 9.安装sass npm node-sass -D
61411发布于 2020-08-06 - 来自专栏Android必知必会
Android项目开发填坑记-9patchPng报错
51277006 如果阅读体验不佳，请使用–> Github版 背景 之前写了一篇文章Android必知必会–NinePatch图片制作详细介绍了Android 9Patch 图片的制作和一些Demo展示，这次说明一下9Patch图片的制作的注意事项和遇到相关报错的解决方案。 一、注意事项 9Patch图片的左边框和上边框至少有一个描点，右边框和下边框则有且只有一段描点。 解决方法：检查一下报错的那个9Patch的四条边是否都进行了描点。 三、Can’t have more than one marked region along edge. 解决方法：检查一下报错的那个9Patch的右边框和下边框是否描点数超过1，有可能只是描点描了一个像素，所以检查的时候建议放大多倍进行检查。 PS: 你可以关注的我Github、CSDN和微博
78220发布于 2019-07-01 - 来自专栏前端达人
React 播客专栏 Vol.9｜React + TypeScript 项目该怎么起步？从 CRA 到配置全流程
欢迎回到《前端达人 · React 播客书单》第 9 期（正文内容为学习笔记摘要，音频内容是详细的解读，方便你理解），请点击下方收听 你是不是常在网上看到 .tsx 项目、Babel、Webpack、 今天这集，我们用最清晰的方式带你搭起属于自己的 React + TypeScript 项目开发环境，手把手从 0 开始，跑出第一个页面！ ️ Part 1｜快速搭建：选 CRA，不走弯路 如果你是第一次上手 React + TS 项目，用官方推荐的 CRA（Create React App）绝对是最稳的方式。 ✅ CRA 是什么？ 一行命令搭起开发环境 帮你集成好 Webpack、Babel、TypeScript、开发服务器 默认就支持 TS 模板，超适合新手 创建命令如下： npx create-react-app myapp Part 5｜从零到运行，完整流程回顾 运行命令创建项目 启动开发服务器（npm start） 看到 React 默认首页 修改 App.tsx，写自己的组件 项目已支持 TypeScript，全程类型提示
42110编辑于 2025-05-13 - 来自专栏前端人人
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 - 来自专栏PM吃瓜(公众号)
9个顶级开发IoT项目的开源物联网平台
我们收集了一些最有名的物联网平台，帮助您以受控方式开发物联网项目。 物联网平台是帮助设置和管理互联网连接设备的组件套件。一个人可以从一个系统远程收集数据，监控和管理所有连接互联网的设备。 大多数这些平台都提供API来支持Linux开发板，如Raspberry Pi，Arduino和BeagleBone。 IT允许您收集和存储传感器数据并开发物联网应用程序。 IT为您的物联网项目提供设备管理，数据收集，处理和可视化。它支持提供设备连接的标准协议是MQTT，CoAP和HTTP，并支持云和本地部署。 您可以使用管理控制台轻松控制它们，或使用其REST API将它们集成到项目逻辑中。IT支持所有类型的黑客板，如Arduino，ESP8266，Raspberry Pi，Intel Edison。
20.3K11发布于 2019-08-12 - ); } } 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
React基础(9)-React中发送Ajax请求以及Mock数据
/ 这种方式是使用代理的方式,这里用的是mockoon工具 // this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2 goodlists }) }) } 上面是使用jquery中提供的方法Ajax请求数据,我们只需要请求一数据,但却要把整个jquery库都给引入进来,这个按照当今的按需加载模块化开发的话 本地启动的服务端口号一致即可 在你没有配置charles工具代理服务时,若该假数据的文件放置在项目根目录public之外,这时请求url,/api/goodlist是会报错的 换而言之,假数据放置在public 风格等非常好用的功能 把上面代码中的baseUrl换成线上easy-mock的就可以了 this.baseUrl = 'https://easy-mock.com/mock/5b24e12cf076d94c646a9aa2 componentDidMount组件挂载完这个生命周期内,而发送Ajax的方式有axios,fetch,Jquery Ajax,以及request的方式,其中axios与fetch,request是主流的方式 同时介绍了在项目的根目录
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
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 _renderLazy()} </Suspense>
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 长按二维码关注
