任何一种语言、框架,在真正上手的时候,多多少少会想想怎么安排项目结构(正所谓磨刀不误砍柴工),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

(3) react-project-structure

(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项目结构的更多相关文章

  1. React Native 系列(三) -- 项目结构介绍

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  2. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  3. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  4. React(一)使用脚手架创建React项目

    1.安装脚手架 现在使用较多的就是这三种脚手架工具: react-boilerplate react-redux-starter-kit create-react-app 我使用的是第三种,faceb ...

  5. ReactNative项目结构目录详解

    在使用 react-native init TestProject 在新建项目时,会看到如下目录 React Native结构目录 名称 描述 android目录 Android项目目录,包含了使用A ...

  6. React项目

    React项目 React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人 ...

  7. React项目的最佳实践

    项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好 ...

  8. 技本功丨利用 Atomic 构建 React 项目工作流,so easy!

    近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...

  9. TypeScript在react项目中的实践

    前段时间有写过一个TypeScript在node项目中的实践. 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的. 但是那仅仅是一个纯接口项目,碰巧赶上近期的另一个项目重构也由我 ...

随机推荐

  1. [LOJ#530]「LibreOJ β Round #5」最小倍数

    [LOJ#530]「LibreOJ β Round #5」最小倍数 试题描述 第二天,LCR 终于启动了备份存储器,准备上传数据时,却没有找到熟悉的文件资源,取而代之的是而屏幕上显示的一段话: 您的文 ...

  2. [LOJ#515]「LibreOJ β Round #2」贪心只能过样例

    [LOJ#515]「LibreOJ β Round #2」贪心只能过样例 试题描述 一共有 \(n\) 个数,第 \(i\) 个数 \(x_i\) 可以取 \([a_i , b_i]\) 中任意值. ...

  3. java中String初始化的两种方式

    转自:http://www.diybl.com/course/3_program/java/javajs/2007104/75886.html       字符串可能是任何程序语言中都会出现的对象,j ...

  4. P1340 送礼物

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了. ...

  5. 【CF1017D】The Wu(状压前缀和)

    题意:给定n个a[i],m个长为n的01串,定义串a与b之间的运算为a^b再按位取反,若第i位为1则运算结果加a[i] q组询问(x,y),每次询问m个串中与串x运算后答案小于等于y的串的个数 n&l ...

  6. Java程序员最常犯的错误盘点之Top 10

    1. 数组转ArrayList 为了实现把一个数组转换成一个ArrayList,很多Java程序员会使用如下的代码: Arrays.asList确实会返回一个ArrayList对象,但是该类是Arra ...

  7. 命令行参数解析函数 getopt

    命令行参数解析函数 —— getopt() getopt()函数声明如下: #include <unistd.h> int getopt(int argc, char * const ar ...

  8. Codeforces Gym101606 D.Deranging Hat (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    D Deranging Hat 这个题简直了,本来想的是冒泡排序然后逆着输出来的,后来发现不对,因为题目上求的是最优解,而且冒泡的话,输出结果有的超出10000行了,所以就是把一开始的,排好序的字母标 ...

  9. 蚂蚁金服CTO程立:金融级分布式交易的技术路径

    总结: 强一致的微服务 oceanbase里面的投票选举以及多中心多地部署 单元化市异地多活的基础.支付宝是异地多活和容灾结合,而容灾的基础也是单元化.基于单元化进行单元的调度.部署.容灾. 混合云架 ...

  10. ubuntu和raspberry下调试python_spi备忘

    Ubuntu12.04 自安装python3.3中头文件Python.h路径:usr/local/python3.3/include/python3.3m Ubuntu12.04 自带的Python2 ...