in React JS by
Q:

What are the common folder structures for React?

1 Answer

0 votes
by

There are two common practices for React project file structure.

  1. Grouping by features or routes:

    One common way to structure projects is locate CSS, JS, and tests together, grouped by feature or route.

    common/
    ├─ Avatar.js
    ├─ Avatar.css
    ├─ APIUtils.js
    └─ APIUtils.test.js
    feed/
    ├─ index.js
    ├─ Feed.js
    ├─ Feed.css
    ├─ FeedStory.js
    ├─ FeedStory.test.js
    └─ FeedAPI.js
    profile/
    ├─ index.js
    ├─ Profile.js
    ├─ ProfileHeader.js
    ├─ ProfileHeader.css
    └─ ProfileAPI.js
    
  2. Grouping by file type:

    Another popular way to structure projects is to group similar files together.

    api/
    ├─ APIUtils.js
    ├─ APIUtils.test.js
    ├─ ProfileAPI.js
    └─ UserAPI.js
    components/
    ├─ Avatar.js
    ├─ Avatar.css
    ├─ Feed.js
    ├─ Feed.css
    ├─ FeedStory.js
    ├─ FeedStory.test.js
    ├─ Profile.js
    ├─ ProfileHeader.js
    └─ ProfileHeader.css
Click here to read more about React JS
Click here to read more about Insurance

Related questions

0 votes
asked May 29, 2020 in React JS by anonymous
0 votes
asked Mar 1, 2020 in React JS by RShastri
0 votes
0 votes
asked Jan 31 in React JS by Robindeniel
0 votes
asked May 20, 2020 in React JS by SakshiSharma
+1 vote
asked Mar 2, 2020 in React JS by RShastri
...