You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.
11
+
React 對你如何將檔案放入資料夾中並無意見。不過你可以考慮幾種在生態系中常見的方法。
12
12
13
-
#### Grouping by features or routes {#grouping-by-features-or-routes}
13
+
#### 以功能或路徑分類 {#grouping-by-features-or-routes}
14
14
15
-
One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
15
+
一種建構專案的常見方式是將 CSS,JS,和測試檔案放在以功能或路徑分類的資料夾中。
16
16
17
17
```
18
18
common/
@@ -35,11 +35,11 @@ profile/
35
35
ProfileAPI.js
36
36
```
37
37
38
-
The definition of a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint.
#### Grouping by file type {#grouping-by-file-type}
40
+
#### 以檔案類型分類 {#grouping-by-file-type}
41
41
42
-
Another popular way to structure projects is to group similar files together, for example:
42
+
另一個受歡迎的建構專案方式是將相似的檔案組在一起,例如:
43
43
44
44
```
45
45
api/
@@ -59,16 +59,16 @@ components/
59
59
ProfileHeader.css
60
60
```
61
61
62
-
Some people also prefer to go further, and separate components into different folders depending on their role in the application. For example, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)is a design methodology built on this principle. Remember that it's often more productive to treat such methodologies as helpful examples rather than strict rules to follow.
#### Avoid too much nesting {#avoid-too-much-nesting}
64
+
#### 避免太多巢狀 {#avoid-too-much-nesting}
65
65
66
-
There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not be relevant to your project.
If you're just starting a project, [don't spend more than five minutes](https://en.wikipedia.org/wiki/Analysis_paralysis) on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You'll likely want to rethink it anyway after you've written some real code.
If you feel completely stuck, start by keeping all files in a single folder. Eventually it will grow large enough that you will want to separate some files from the rest. By that time you'll have enough knowledge to tell which files you edit together most often. In general, it is a good idea to keep files that often change together close to each other. This principle is called "colocation".
As projects grow larger, they often use a mix of both of the above approaches in practice. So choosing the "right" one in the beginning isn't very important.
0 commit comments