It's more developer-friendly for quick iteration and speeding up the workflows. This type of project structure provides a more in-depth idea about the features you're building. Then for each of these features, we've separated the interface or template code, constants for placeholder texts, custom hooks for managing state updates, etc. Then further inside the authentication or Auth folder, we have folders for Login, Signup, etc. For instance, authentication in itself is a big feature, so it has a subdirectory underneath. Based on the feature type, we have subdirectories inside it. So, we have a directory called feature at the root of our project. However, we've narrowed down the constants, hooks, helpers, ui, and so on to different features. Notice how most of our type-based project is still in place.
Here's what a type-based project structure looks like: So now let's discuss the type-based project structure where we segregate our files and folders based on their type. You'll have to narrow it down further to fit practical projects.
In most scenarios, the previous folder structure will not be sufficient. It can be useful for small projects like personal projects, POC projects, or small MVPs for your startup. This is the simplest project structure you can achieve. Finally, the api folder contains the file, which may contain the API calls related to login and signup functionalities in your app.Īlso, notice how the file has an extension, api.js to indicate that it's an API file. This file may contain all the JavaScript code that handles custom events that you can attach to your button. The logic folder has a file called eventhandlers.js. This file may have a template that renders a simple button in your app. The ui folder contains a UI element file called Button.js. This is where your app makes API calls to a database server or an external web service. Responsible for all the back-end interactions. It's also responsible for all the events and managing the interactions with the presentation layer. Responsible for maintaining your core business logic.
Represents all the components or UI elements the user interacts with like buttons, popups, text, etc. You can always break your front-end app into three layers: Now let's talk about some common project structures you can implement no matter what technology you're using. However, the initial structure gives us an idea as to which type of files may be best put in the root directory.
We usually don't take the above initial structure into account when we talk about project structure. Finally, there are some config and dependency management files like app.json,, package.json, etc. Then there's an assets folder where static assets can be placed. In the root directory, App.js is the file that kicks off the project.
0 kommentar(er)
