React项目结构
任何一种语言、框架,在真正上手的时候,多多少少会想想怎么安排项目结构(正所谓磨刀不误砍柴工),React也不例外。
google了下,拿下面3篇博客来说道说道。
(1) how-to-better-organize-your-react-applications
(2) the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing
(1)主张将React项目结构分为components, scenes, services
components: 可嵌套组件,可认为是组件仓库
scenes: 实际上就是我们所看到的页面,也可嵌套
services: 包含业务逻辑并向后台发请求
(2)先从使用角度分析了React开发过程中的时间消耗,并根据此来规范下React的项目结构
时间消耗前三:
1. 在编辑器中切换文件tab页
2. 根据文件结构找到文件,打开
3. link到其他文件
仍然是组件集中的方式,可嵌套;组件中包含css;使用容器组件;js的命名同export的组件名称相一致;在utils里使用index.js,其中声明各个方法的export

(3)个人推荐 - Simple is better. Start simple. Keep it simple.

src/api.js:调用后台api,若方法过多可以改为src/api文件夹,内部多个js
src/components:展示层组件,基本只用来定义各个组件属性
src/containers:容器组件,含状态并调用api
src/images:图片
src/index.js:初始化app并调用ReactDOM.render()
src/utils:错误处理、格式化等,类似(2)中描述
简约而不简单!
React项目结构的更多相关文章
- React Native 系列(三) -- 项目结构介绍
前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- React项目搭建与部署
React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...
- React(一)使用脚手架创建React项目
1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...
- ReactNative项目结构目录详解
在使用 react-native init TestProject 在新建项目时,会看到如下目录 React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用A ...
- React项目
React项目 React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人 ...
- React项目的最佳实践
项目代码 从零开始简书项目 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...
- 技本功丨利用 Atomic 构建 React 项目工作流,so easy!
近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...
- TypeScript在react项目中的实践
前段时间有写过一个TypeScript在node项目中的实践. 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的. 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我 ...
随机推荐
- mybatis学习(十一)——springmvc++spring+mybatis整合
做任何一个项目都以一个需求,这里先定义一下需求:利用三大框架查询酒店列表. 一.搭建开发环境 1.创建一个web项目 我这里用的是 jdk1.8+tomact7.0 2.创建hotel表 CREATE ...
- java面试题之Error和Exception的区别
从概念角度分析: Error:程序无法处理的系统错误,编译器不做检查: Exception:程序可以处理的异常,捕获后可能恢复: 总结:前者是程序无法处理的错误,后者是可以处理的异常. 从责任角度分析 ...
- java中static变量和方法的总结
转自:http://blog.csdn.net/haobo920/article/details/5921621 java中static变量和方法的总结 java中一切皆是对象 一个类中对象的定义一般 ...
- bzoj 3779 重组病毒 好题 LCT+dfn序+线段树分类讨论
题目大意 1.将x到当前根路径上的所有点染成一种新的颜色: 2.将x到当前根路径上的所有点染成一种新的颜色,并且把这个点设为新的根: 3.查询以x为根的子树中所有点权值的平均值. 分析 原题codec ...
- 用promise做图片的预加载
var url='jsonp-master/0.jpg' var url1='jsonp-master/1.jpg' var url2='jsonp-master/2.jpg' var img=doc ...
- BZOJ 1044 木棍分割(二分答案 + DP优化)
题目链接 木棍分割 1044: [HAOI2008]木棍分割 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3830 Solved: 1453[S ...
- 查找系列合集-二叉查找树BST
一. 二叉树 1. 什么是二叉树? 在计算机科学中,二叉树是每个结点最多有两个子树的树结构. 通常子树被称作“左子树”(left subtree)和“右子树”(right subtree). 二叉树常 ...
- POJ 2253 Frogger Floyd
原题链接:http://poj.org/problem?id=2253 Frogger Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...
- springboot 启动类启动跳转到前端网页404问题的两个解决方案
前段时间研究springboot 发现使用Application类启动的话, 可以进入Controller方法并且返回数据,但是不能跳转到WEB-INF目录下网页, 前置配置 server: port ...
- 使用UltraISO为U盘或内存卡制作系统安装工具
此软件可以为U盘制作Windows安装版的启动工具,也可以为Linux制作启动工具,尤其是Ubuntu这些.提示:推荐购买一些读取速度快一些的U盘,运行起来可以节省很多时间. 如果是内存卡要实现此功能 ...