Here’s the the suggested Project Structure for Drone Market ReactJS Development. Feel free to come up with your own suggestions!
.
├── bin # Build/Start scripts
├── build # All build-related configuration
│ └── webpack # Environment-specific configuration files for webpack
├── config # Project configuration settings
├── server # Express application that provides webpack middleware
│ └── main.js # Server application entry point
├── src # Application source code
│ ├── index.html # Main HTML page container for app
│ ├── main.js # Application bootstrap and rendering
│ ├── components # Global Reusable Presentational Components
│ ├── containers # Global Reusable Container Components
│ ├── layouts # Components that dictate major page
│ ├── routes # Main route definitions and async split points
│ │ ├── index.js # Bootstrap main application routes with store
│ │ ├── Home # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ └── routes ** # Fractal sub-routes (** optional)
│ ├── static # Static assets (not imported anywhere in source code)
│ ├── store # Redux-specific pieces
│ │ ├── createStore.js # Create and instrument redux store
│ │ └── reducers.js # Reducer registry and injection
│ └── styles # Application-wide styles (generally settings)
└── tests # Unit tests
Again, here’s main Dependencies suggestions. Feel free to come up with your own suggestions!
Based on my experience, it better use component level styling. It more easy to maintain than global styling. But, for general layout might need create one core layout.