Skip to content

Latest commit

 

History

History
56 lines (45 loc) · 3.23 KB

2.structures.md

File metadata and controls

56 lines (45 loc) · 3.23 KB
  1. explaining files and folders in react project:
  • node_modules: contains all the dependencies, modules and packages which the react project doesnt work without them
  • public: hold all assets of out projects like pictures, logo ... by default
  • src: main structures of the website. we work here -- reportWebVital: Create React App includes a built-in tool for measuring the real life performance of your app. It is called reportWebVitals and it measures a set of metrics that aim to capture the user experience of a web page. -- setupTests.js: test. js is a basic test file. -- App.js: here it is created a component and export it -- index.js: here we imported App component then rendered it to the index.html file which is where it created the webpage
  • .gitignore: is a git file which we say that for example we ignore node_modules file when we push project to github because it has a big size and also we dont change its content in our project so we dont chase it
  • package.json: contains some information about our project
  • package-lock.json: complete information about project dependencies
  1. what you can delete to clean the project:
  • src/setupTests.js
  • src/logo.svg
  • src/index.css
  • src/app.test.js
  • some content of app.js and index.js and all content of app.css
  • all public files exept the index.html file
  • some links and comments in index.html file
  • readme file i have deleted all unnecessary files and codes for now in testreatproject (check it out)
  1. folder structure to organize react project in src folder

3.1 beginner - really small project like a simple todo list app

  • test folder
  • component folder contains all component in once
  • hooks
  • others is just next to the app.js

3.2 intermediat - mid size projects

  • assets: for pictures logo etc.
  • components -- different folders for organizing related components in different folders
  • contex
  • data : contains sth like json files and constant files
  • hooks : like useFetch.js and useLocalHost.js etc.
  • pages
  • utils : contains all utility functions like formatDate.js or formatCurrency.js etc. simple and pure functions

note: test folder is always beside the tested code note: some componets are in pages because pages has shared components from components folder also has their unique components in their page folder also any other things like utility which is specific for just a page and used nowhere else we put it in that page folder

3.3 advance - for enterprise and really large scale projects

  • all the folders in intermediat
  • layout(optional): contains components which are used in lots of places like navbar sidebar etc.
  • lib: contains libraries so we can forexample update it in just one place - implementation of fecad pattern
  • sevices: intergrading with Api - contains all services Api based like login analitics
  • pages folder only contains the page.js files itself
  • features: contains folders for every feature we want to add to our project - in any feautur subfolder we can have same folders like components, hooks or services etc. but specificly for this feature we want to add - also in every features subfolder we have a index.js file which we export all of the things from index.js and import all only from there