Skip to content

Instantly share code, notes, and snippets.

@mrtnbroder
Forked from ryanflorence/react-app-file-structure
Last active July 30, 2020 18:54
Show Gist options
  • Save mrtnbroder/4a4a00d6e158df82611e to your computer and use it in GitHub Desktop.
Save mrtnbroder/4a4a00d6e158df82611e to your computer and use it in GitHub Desktop.
React Directory Structure
.
├── assets
│   ├── images
│   ├── sass/less/stylus/css
├── lib
│   ├── actions
│   ├── components
│   │   ├── __tests__
│   │   │ └── Avatar.test.jsx
│   │   └── Avatar.jsx
│   ├── constants
│   ├── dispatchers
│   ├── stores
│   └── utils
├── views
│   ├── Anonymous
│   │   ├── __tests__
│   │   │   └── Anonymous.test.jsx
│   │   ├── views
│   │   │   ├── Home
│   │   │   │   ├── __tests__
│   │   │   │   │ └── Home.test.jsx
│   │   │   │   └── Home.jsx
│   │   │   └── Login
│   │   │   ├── __tests__
│   │   │   └── Login.jsx
│   │   └── Anonymous.jsx
│   └── SignedIn
│   ├── lib
│   │   └── components
│   │   ├── __tests__
│   │   └── Lightbox.jsx
│   ├── views
│   │   ├── Courses
│   │   │   ├── __tests__
│   │   │   ├── views
│   │   │   │   ├── Assignments
│   │   │   │   │   ├── __tests__
│   │   │   │   │   └── Assignments.jsx
│   │   │   │   ├── Default
│   │   │   │   │   ├── __tests__
│   │   │   │   │   └── Default.jsx
│   │   │   │   ├── Grades
│   │   │   │   │   ├── __tests__
│   │   │   │   │   └── Grades.jsx
│   │   │   │   └── Users
│   │   │   │   ├── __tests__
│   │   │   │   └── Users.jsx
│   │   │   └── Courses.jsx
│   │   └── Dashboard
│   │   ├── __tests__
│   │   ├── components
│   │   │   ├── __tests__
│   │   │   ├── Stream.jsx
│   │   │   ├── StreamItem.jsx
│   │   │   ├── TodoItem.jsx
│   │   │   └── TodoList.jsx
│   │   └── Dashboard.jsx
│   └── SignedIn.jsx
├── app.jsx
└── routes.jsx
@seadb
Copy link

seadb commented Feb 14, 2016

I'm confused about the difference between components and views

@rotimi-best
Copy link

@seadb views are more or less like just folders that holds a larger part of the application while components are just files that will be used in that particular view and it doesn't have any folder structure in it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment