Getting Started » Project Structure

Project Structure Overview

Understanding the project structure is fundamental to efficiently developing with our framework. A well-organized project not only makes it easier to navigate but also promotes maintainability and collaboration.

Standard Project Layout

A typical project created with our CLI follows this standard directory structure:

src/
components/
Button.js
Header.js
pages/
HomePage.js
AboutPage.js
assets/
logo.png
App.js
main.js

Note: The src/ directory is where all your application's source code resides. It's a common convention to keep your main application logic within this folder.

Key Directories Explained

  • src/: The root directory for your application's source code.
  • src/components/: Contains reusable UI components.
  • src/pages/: Holds the components that represent different views or pages of your application.
  • src/assets/: For static assets like images, fonts, and other media files.
  • src/App.js: The main application component, often the entry point for your UI.
  • src/main.js: The entry point of your JavaScript application, responsible for rendering the root component.

Configuration Files

Several configuration files are crucial for your project:

package.json
webpack.config.js
.babelrc
.eslintrc.js

Configuration File Details

  • package.json: Manages project dependencies, scripts, and metadata.
  • webpack.config.js: Configures the Webpack module bundler for building and optimizing your application.
  • .babelrc: Configures Babel for transpiling modern JavaScript to older versions.
  • .eslintrc.js: Configures ESLint for code linting and enforcing code style.

Customizing the Structure

While the standard structure is recommended, you have the flexibility to adapt it to your project's needs. You can rename directories, move files, or introduce new ones as required. However, ensure that your build configurations (like Webpack and Babel) are updated accordingly if you make significant changes.