如何编写全栈 JavaScript 应用 #6384

eizyc · 2019-09-06T08:46:29Z

第一次翻译完成，有些地方我感觉是不是要注释一下，比如Monorepo，Mutirepo，看看校对同学的意见

译文翻译完成，resolve #6317

第一次翻译完成，有些地方我感觉是不是要注释一下，比如Monorepo，Mutirepo，看看校对同学的意见

eizyc · 2019-09-06T13:07:23Z

我才发现我漏了一个l，Multirepo

Moonliujk · 2019-09-09T03:41:36Z

@fanyijihua 校对认领

fanyijihua · 2019-09-09T03:41:38Z

@Moonliujk 好的呢 🍺

Moonliujk

翻译的不错

Moonliujk · 2019-09-09T03:53:28Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

+* 太聪明。复制粘贴代码有时是挺好的。您不需要抽象每两段看起来有些相似的代码。我自己就犯过这个错误。人人都这样。DRY（Don't Repeat Yourself）是一个很好的原则，但是选择错误的抽象可能会很糟糕，并使代码库复杂化。如果您想了解更多相关内容，我推荐：[AHA Programming](https://kentcdodds.com/blog/aha-programming).
+* 没有利用可用的工具。比如使用 `reduce` 而不是 `map` 或者 `filter`。当然你**可以**用 `map` 和 `reduce`，但它可能会有更多的代码行数，而且其他人也更难理解。  
+当然，简单易读是主观的。您将看到经验丰富的开发人员在他们不需要使用 `reduce` 的地方使用 `reduce`。
+有时您需要使用 `reduce`，如果您曾经束缚于 `map` 和 `filter`，`reduce` 可能会有更好的表现，因为您只需要将集合传递一次而不是两次。这是一个性能与简单易懂性的抉择。总的来说，我倾向于简单易读，避免过早的优化。如果不知怎么地 2 层的 `map`/`filter` 成为了你的瓶颈，您可以将代码切换为使用 `reduce`。


如果不知怎么地 2 层的 map/filter 成为了你的瓶颈，您可以将代码切换为使用 reduce。
=》
如果使用两层的 map/filter 成为您的瓶颈，您可以将代码切换为使用 reduce。
这里不确定原文作者的意思，看一下另一位校对者怎么理解

Moonliujk · 2019-09-09T03:55:26Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Keep your client and server folder in the same repo. It’s easy. Don’t complicate things. Everyone will be in sync this way. Having worked on projects that used multiple repos, it’s not the end of the world, but life is easier with a monorepo. You won’t accidentally have a client and server that aren’t in sync.
+将客户端和服务器文件夹保存在同一个 Monorepo 中。这很简单。别想的太复杂。人人都是用这种方式同步的。在使用 Multirepo 的项目中工作，也并不是世界末日，但是使用 Monorepo 会让生活变得更简单。您不会意外地拥有不同步的客户端和服务器。


Monorepo 原文中没有看到这个词，如果是自己添加，应该注释一下

Moonliujk · 2019-09-09T03:56:10Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Keep your client and server folder in the same repo. It’s easy. Don’t complicate things. Everyone will be in sync this way. Having worked on projects that used multiple repos, it’s not the end of the world, but life is easier with a monorepo. You won’t accidentally have a client and server that aren’t in sync.


Don’t complicate things.
更恰当的翻译：别把事情复杂化。

Moonliujk · 2019-09-09T03:59:36Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-This structure works. At the least it’s consistent which is important and a new person that joins the codebase will understand what’s going on and what goes where. The downside of this approach, and why I personally avoid it nowadays, is that you have to jump around the codebase a lot. `ProfileContainer` and `BlogPostContainer` have nothing to do with each other, but the files are located right next to each other and far away from where they’re actually going to be used.
+这个结构是可行的。至少它是一致的，这是很重要的，一个新加入代码库的人会明白发生了什么，在哪发生的。但这种结构的缺点，也是我个人现在避免使用它的原因是，你必须经常跳转代码库。比如，`ProfileContainer` 和 `BlogPostContainer` 它们之间没有任何关系，但是文件就在彼此的旁边，并且远离它们实际要使用的地方。


你必须经常跳转代码库。
你还是您，全文统一一下吧

Moonliujk · 2019-09-09T04:02:46Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-I far prefer grouping files that will be used together next to each other — a feature based approach. Stick the smart parent component and the dumb child component in the same folder. It will make your life a lot easier.
+我更喜欢将要一起使用的文件分为一组 —— 一种基于功能的方法。将 Smart 父组件和 Smart 子组件放在同一个文件夹中。这会让你的生活更容易。


Stick the smart parent component and the dumb child component
=》
原译文应该是：将 Smart 父组件和 Dumb 子组件放在同一个文件夹中。

Moonliujk · 2019-09-09T04:05:36Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Taking this a step further, you may even like to stick your containers and components in the same file. Or even further, just the two components into one. I know what you’re thinking. “WTF is this guy on about? That’s blasphemy.” In reality, it’s not as bad as it sounds, it’s actually quite good, and if you’re using React Hooks and/or generated code I’d recommend this approach.
+更进一步，您甚至可能喜欢将容器和组件放在同一个文件中。或者更进一步，把两部分合为一。我知道你在想什么。“这家伙在说些什么?这是亵渎。”实际上，它并不像听起来那么糟糕，实际上非常好，实际上非常好，如果您正在使用 React Hook 和/或生成的代码，我推荐使用这种方法。


“这家伙在说些什么?这是亵渎。”
=》
”这家伙在说些什么？这是亵渎。“
注意问号应该为全角

Moonliujk · 2019-09-09T04:10:42Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Angular has its own generators built in and through the command line you can create a new component with 4 files present that every Angular component is expected to have. It’s a pity that React doesn’t have a feature like this out the box, but you can create it yourself using `plop`. If each new component you create should be a folder containing a component, test, and Storybook file, the generator can create this for you in one line. This makes our life a breeze in many instances. For example, adding a new feature on the server is one line in the command line that creates an entity, services and resolvers file with all the core pieces filled out automatically.
+Angular 有自己的生成器，你可以通过命令行创建一个新的组件，每个 Angular 组件都有 4 个文件。很遗憾 React 没有这样开箱即用的功能，但是您可以使用 `plop` 自己创建它。如果您创建的每个新组件是都应该一个包含组件、测试和 Storybook 文件的文件夹，那么生成器可以在一行中为您创建。在很多情况下，这会让我们的生活变得轻松。例如，在服务器上添加新特性是命令行中的一行，它创建一个实体、服务和解析器文件，所有核心部分都自动填写。


你可以通过命令行创建一个新的组件
同样，您和你全文统一

Moonliujk · 2019-09-09T04:13:15Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Angular has its own generators built in and through the command line you can create a new component with 4 files present that every Angular component is expected to have. It’s a pity that React doesn’t have a feature like this out the box, but you can create it yourself using `plop`. If each new component you create should be a folder containing a component, test, and Storybook file, the generator can create this for you in one line. This makes our life a breeze in many instances. For example, adding a new feature on the server is one line in the command line that creates an entity, services and resolvers file with all the core pieces filled out automatically.
+Angular 有自己的生成器，你可以通过命令行创建一个新的组件，每个 Angular 组件都有 4 个文件。很遗憾 React 没有这样开箱即用的功能，但是您可以使用 `plop` 自己创建它。如果您创建的每个新组件是都应该一个包含组件、测试和 Storybook 文件的文件夹，那么生成器可以在一行中为您创建。在很多情况下，这会让我们的生活变得轻松。例如，在服务器上添加新特性是命令行中的一行，它创建一个实体、服务和解析器文件，所有核心部分都自动填写。


如果您创建的每个新组件是都应该一个包含组件、测试和 Storybook 文件的文件夹
=》
如果您创建的每个新组件都应该是一个包含组件、测试和 Storybook 文件的文件夹

Moonliujk · 2019-09-09T04:15:02Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-The core ideas are to keep things simple, consistent, structured and easy to traverse. This will make it easy for multiple people to work on the project and feel at home right away.
+核心思想是保持事物的简单、一致、结构化和易于遍历。这将使方便许多人参与到项目中工作，而且马上就有种在读自己代码的感觉。


这将使方便许多人参与到项目中工作
=》
这将方便许多人参与到项目中工作
去掉使

Moonliujk · 2019-09-09T04:17:44Z

@cyz980908 @fanyijihua 校对完毕

根据校对者意见做出修改

sin7777 · 2019-09-10T10:53:06Z

@Glowin 校对认领

sin7777 · 2019-09-14T08:40:09Z

@fanyijihua 校对认领

eizyc · 2019-09-14T12:01:21Z

@sin7777 校对两次？？？

sin7777 · 2019-09-16T05:42:32Z

@cyz980908 没有人回我，tag还没变，我以为没有认领成功⑤⑤⑤

eizyc · 2019-09-18T02:34:19Z

最近机器人好像失效了？问题不大

sin7777

翻译得很地道👍

sin7777 · 2019-09-22T08:09:24Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-A somewhat similar approach is grouping by feature rather than by route. This approach worked well for me on a project that used Mobx State Tree and was a single page with lots of features on it. Grouping by routes is easy and doesn’t take a lot of brain power to figure out what should be grouped together and where to find items. An annoyance of grouping by feature can be deciding what belongs where. The boundaries of a feature can be blurry.
+类似的方法是按功能分组，而不是按路由分组。在一个使用 Mobx State Tree 的项目中，这种方法非常有效，它是一个包含许多特性的单页面。按常规方法分组很简单，而且不需要花费太多脑力来找出应该分组的内容和在哪里找到项目。按功能分组的一个麻烦之处在于决定它属于哪里。功能的边界可能很模糊。


『在一个使用 Mobx State Tree 的项目中，这种方法非常有效，它是一个包含许多特性的单页面。』=>『在一个使用 Mobx State Tree 并且包含许多特性的单页面的项目中，这种方法对我非常有效』

sin7777 · 2019-09-22T08:13:01Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Taking this a step further, you may even like to stick your containers and components in the same file. Or even further, just the two components into one. I know what you’re thinking. “WTF is this guy on about? That’s blasphemy.” In reality, it’s not as bad as it sounds, it’s actually quite good, and if you’re using React Hooks and/or generated code I’d recommend this approach.
+更进一步，您甚至可能喜欢将容器和组件放在同一个文件中。或者更进一步，把两部分合为一。我知道您在想什么。“这家伙在说些什么？这是亵渎。”实际上，它并不像听起来那么糟糕，实际上非常好，实际上非常好，如果您正在使用 React Hook 和/或生成的代码，我推荐使用这种方法。


『实际上非常好』出现两次。

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

sin7777 · 2019-09-22T09:22:25Z

@cyz980908 @fanyijihua 校对完成

根据第二个校对者的建议，对文章做出修改，并增加校对者信息

eizyc · 2019-09-23T04:49:53Z

@fanyijihua@Glowin 管理员要不审核一下

eizyc · 2019-09-24T13:10:25Z

@lsvih 管理员有空校对一下咩？

lsvih · 2019-09-25T02:45:37Z

@cyz980908 抱歉最近机器人失效了，加上个人事比较多，没收到 notification 就没关注了。。请稍等一会儿，这就 review

lsvih · 2019-09-25T02:47:44Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

-* Not using the tools available. One example is using `reduce` instead of `map` or `filter`. Of course you **can** write your `map` using `reduce` instead, but it will likely be more lines of code, and harder for others to understand.  
-Granted, simplicity is subjective. You will see experienced developers using `reduce` in places they don’t have to.
-There are times you will need to use `reduce`, and if you ever chain `map` and `filter`, `reduce` will likely be more performant as you can pass over the collection once instead of twice. This is a question of performance versus simplicity. In general I’d favour simplicity and avoid premature optimisation. If somehow the 2 pass `map`/`filter` becomes a bottleneck you can switch the code to use `reduce` instead.
+* 太聪明。复制粘贴代码有时是挺好的。您不需要抽象每两段看起来有些相似的代码。我自己就犯过这个错误。人人都这样。DRY（Don't Repeat Yourself）是一个很好的原则，但是选择错误的抽象可能会很糟糕，并使代码库复杂化。如果您想了解更多相关内容，我推荐：[AHA Programming](https://kentcdodds.com/blog/aha-programming).


”太聪明“可以换成”过于聪明“加强语气

lsvih · 2019-09-25T02:50:06Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

-Granted, simplicity is subjective. You will see experienced developers using `reduce` in places they don’t have to.
-There are times you will need to use `reduce`, and if you ever chain `map` and `filter`, `reduce` will likely be more performant as you can pass over the collection once instead of twice. This is a question of performance versus simplicity. In general I’d favour simplicity and avoid premature optimisation. If somehow the 2 pass `map`/`filter` becomes a bottleneck you can switch the code to use `reduce` instead.
+* 太聪明。复制粘贴代码有时是挺好的。您不需要抽象每两段看起来有些相似的代码。我自己就犯过这个错误。人人都这样。DRY（Don't Repeat Yourself）是一个很好的原则，但是选择错误的抽象可能会很糟糕，并使代码库复杂化。如果您想了解更多相关内容，我推荐：[AHA Programming](https://kentcdodds.com/blog/aha-programming).
+* 没有利用可用的工具。比如使用 `reduce` 而不是 `map` 或者 `filter`。当然您**可以**用 `map` 和 `reduce`，但它可能会有更多的代码行数，而且其他人也更难理解。  


这里说的是”不去用已有的工具“

建议：

拒绝使用现成的工具。比如放着 map 和 filter 不用，反而去用 reduce。当然您可以用 reduce 来替代 map，但它可能会导致要写更多的代码，并且其他人更难理解。

lsvih · 2019-09-25T02:50:55Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

-There are times you will need to use `reduce`, and if you ever chain `map` and `filter`, `reduce` will likely be more performant as you can pass over the collection once instead of twice. This is a question of performance versus simplicity. In general I’d favour simplicity and avoid premature optimisation. If somehow the 2 pass `map`/`filter` becomes a bottleneck you can switch the code to use `reduce` instead.
+* 太聪明。复制粘贴代码有时是挺好的。您不需要抽象每两段看起来有些相似的代码。我自己就犯过这个错误。人人都这样。DRY（Don't Repeat Yourself）是一个很好的原则，但是选择错误的抽象可能会很糟糕，并使代码库复杂化。如果您想了解更多相关内容，我推荐：[AHA Programming](https://kentcdodds.com/blog/aha-programming).
+* 没有利用可用的工具。比如使用 `reduce` 而不是 `map` 或者 `filter`。当然您**可以**用 `map` 和 `reduce`，但它可能会有更多的代码行数，而且其他人也更难理解。  
+当然，简单易读是主观的。您将看到经验丰富的开发人员在他们不需要使用 `reduce` 的地方使用 `reduce`。


这一行前面有个"-"符号，需要加上

有吗？？？那个”-”号不应该是删除了的意思吗？

@cyz980908 我看错了。。sorry

lsvih · 2019-09-25T02:51:27Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md

+* 太聪明。复制粘贴代码有时是挺好的。您不需要抽象每两段看起来有些相似的代码。我自己就犯过这个错误。人人都这样。DRY（Don't Repeat Yourself）是一个很好的原则，但是选择错误的抽象可能会很糟糕，并使代码库复杂化。如果您想了解更多相关内容，我推荐：[AHA Programming](https://kentcdodds.com/blog/aha-programming).
+* 没有利用可用的工具。比如使用 `reduce` 而不是 `map` 或者 `filter`。当然您**可以**用 `map` 和 `reduce`，但它可能会有更多的代码行数，而且其他人也更难理解。  
+当然，简单易读是主观的。您将看到经验丰富的开发人员在他们不需要使用 `reduce` 的地方使用 `reduce`。
+有时您需要使用 `reduce`，如果您曾经束缚于 `map` 和 `filter`，`reduce` 可能会有更好的表现，因为您只需要将集合传递一次而不是两次。这是一个性能与简单易懂性的抉择。总的来说，我倾向于简单易读，避免过早的优化。如果使用两层的 `map`/`filter` 成为了您的瓶颈，您可以将代码切换为使用 `reduce`。


lsvih · 2019-09-25T02:54:41Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


 ![No. 1 Trending on GitHub](https://cdn-images-1.medium.com/max/5760/1*Sx7fPiSnvJFFnK7bwJ1B_w.png)

-I work as part of a team of [freelancers](https://elie.tech) and the typical projects we do use React/React Native, NodeJS, GraphQL. This post is aimed at those interested to learn how we full stack build apps, and as an on boarding tool for those that join us in the future.
+我是[自由职业者](https://elie.tech)团队的一员，我们使用 React/React Native，Node.js，GraphQL 等典型项目。这篇文章既是写给那些有兴趣了解我们如何构建完整的全栈应用程序的人，也是那些将来打算加入我们的人的入职工具。


React/React Native，Node.js，GraphQL

逗号换顿号

lsvih · 2019-09-25T02:56:25Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-One common client folder structure is to group by file type. This structure uses a different folder for: components, containers, actions, reducers, and routes. (Actions and reducers for those that use redux. I try to avoid it.) The components folder will hold something like `BlogPost` and `Profile` and the containers folder contain files called `BlogPostContainer` and `ProfileContainer`. The container will grab the data from the server and pass it to the dumb child component whose job it is to render the data to screen.
+一个常见的客户端文件夹结构是按文件类型分组。该结构使用不同的文件夹：components，containers，actions，reducers 和 routes。（actions 和 reducers 是那些使用redux的。我尽量避免。）components 文件夹将包含 `BlogPost` 和 `Profile` 之类的内容，而 containers 文件夹将包含 `BlogPostContainer` 和 `ProfileContainer` 文件。容器将从服务器获取数据并将其传递给 Dumb 子组件，Dumb 子组件的工作是将数据呈现到屏幕上。（译者注：React 中可以将组件分为 Smart 和 Dumb 两类，方便组件复用）


该结构使用不同的文件夹：components，containers，actions，reducers 和 routes。（actions 和 reducers 是那些使用redux的。我尽量避免。）

->

该结构使用不同的文件夹：components，containers，actions，reducers 和 routes（actions 和 reducers 是使用 redux 才有的，而我会尽量避免用它）。

lsvih · 2019-09-25T02:56:44Z

TODO1/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day.md


-Within each route you can create more folders inside it that group certain parts of the page. If route contains a lot this makes sense. One thing I’d warn against is nesting too deeply. It will make it harder to jump around the project. This is another sign of overcomplicating things that don’t need to be. (On a side note, using command-p and search are a great way to jump around a project and find what you need, but file structure also has an impact.)
+在每个 route 文件夹中，您可以在其中创建更多文件夹，对页面的某些部分进行分组。所以如果 route 文件夹中包含了很多内容，这是可以理解的。但是我要警告的一件事是，不要嵌得太深。这将使我们这个项目在这个项目中更难地跳转。这是不必要的事情过于复杂的另一个迹象（顺便说一句，使用 command-p 和搜索也是在项目找到所需内容的好方法，但文件结构会有所影响。）


但文件结构会有所影响。）

->

但文件结构会有所影响）。

修改完毕

lsvih · 2019-09-25T03:33:17Z

@cyz980908 您是不是传错文件啦。。

lsvih · 2019-09-25T03:46:24Z

@cyz980908 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

eizyc · 2019-09-25T03:50:51Z

@lsvih 辛苦辛苦~链接在这
https://juejin.im/post/5d8ae3a56fb9a04e2902fbf6

第一次翻译完成

2fe4a28

第一次翻译完成，有些地方我感觉是不是要注释一下，比如Monorepo，Mutirepo，看看校对同学的意见

fanyijihua added the 校对认领 label Sep 6, 2019

fanyijihua mentioned this pull request Sep 6, 2019

如何编写全栈 JavaScript 应用 #6317

Closed

eizyc changed the title ~~第一次翻译完成~~ 如何编写全栈 JavaScript 应用 Sep 6, 2019

lsvih added the 前端 label Sep 9, 2019

fanyijihua added the 正在校对 label Sep 9, 2019

Moonliujk reviewed Sep 9, 2019

View reviewed changes

文章修改

439aebe

根据校对者意见做出修改

sin7777 reviewed Sep 22, 2019

View reviewed changes

做出修改

e56e559

根据第二个校对者的建议，对文章做出修改，并增加校对者信息

lsvih added 标注待管理员 Review and removed 校对认领正在校对 labels Sep 25, 2019

lsvih self-assigned this Sep 25, 2019

lsvih reviewed Sep 25, 2019

View reviewed changes

修改完毕

c5eb8ff

修改完毕

eizyc and others added 2 commits September 25, 2019 11:40

抱歉抱歉~再传一次

11b0a43

Remove redundant spaces.

3022964

lsvih approved these changes Sep 25, 2019

View reviewed changes

lsvih merged commit 05e7128 into xitu:master Sep 25, 2019

lsvih added 翻译完成 and removed 标注待管理员 Review labels Sep 25, 2019

eizyc deleted the translation/how-writing-simple-javascript-got-us-6200-github-stars-in-a-single-day branch January 8, 2020 10:22

lsvih removed their assignment Jul 18, 2020


		Keep your client and server folder in the same repo. It’s easy. Don’t complicate things. Everyone will be in sync this way. Having worked on projects that used multiple repos, it’s not the end of the world, but life is easier with a monorepo. You won’t accidentally have a client and server that aren’t in sync.
		将客户端和服务器文件夹保存在同一个 Monorepo 中。这很简单。别想的太复杂。人人都是用这种方式同步的。在使用 Multirepo 的项目中工作，也并不是世界末日，但是使用 Monorepo 会让生活变得更简单。您不会意外地拥有不同步的客户端和服务器。


		This structure works. At the least it’s consistent which is important and a new person that joins the codebase will understand what’s going on and what goes where. The downside of this approach, and why I personally avoid it nowadays, is that you have to jump around the codebase a lot. `ProfileContainer` and `BlogPostContainer` have nothing to do with each other, but the files are located right next to each other and far away from where they’re actually going to be used.
		这个结构是可行的。至少它是一致的，这是很重要的，一个新加入代码库的人会明白发生了什么，在哪发生的。但这种结构的缺点，也是我个人现在避免使用它的原因是，你必须经常跳转代码库。比如，`ProfileContainer` 和 `BlogPostContainer` 它们之间没有任何关系，但是文件就在彼此的旁边，并且远离它们实际要使用的地方。


		I far prefer grouping files that will be used together next to each other — a feature based approach. Stick the smart parent component and the dumb child component in the same folder. It will make your life a lot easier.
		我更喜欢将要一起使用的文件分为一组 —— 一种基于功能的方法。将 Smart 父组件和 Smart 子组件放在同一个文件夹中。这会让你的生活更容易。


		Taking this a step further, you may even like to stick your containers and components in the same file. Or even further, just the two components into one. I know what you’re thinking. “WTF is this guy on about? That’s blasphemy.” In reality, it’s not as bad as it sounds, it’s actually quite good, and if you’re using React Hooks and/or generated code I’d recommend this approach.
		更进一步，您甚至可能喜欢将容器和组件放在同一个文件中。或者更进一步，把两部分合为一。我知道你在想什么。“这家伙在说些什么?这是亵渎。”实际上，它并不像听起来那么糟糕，实际上非常好，实际上非常好，如果您正在使用 React Hook 和/或生成的代码，我推荐使用这种方法。


		Angular has its own generators built in and through the command line you can create a new component with 4 files present that every Angular component is expected to have. It’s a pity that React doesn’t have a feature like this out the box, but you can create it yourself using `plop`. If each new component you create should be a folder containing a component, test, and Storybook file, the generator can create this for you in one line. This makes our life a breeze in many instances. For example, adding a new feature on the server is one line in the command line that creates an entity, services and resolvers file with all the core pieces filled out automatically.
		Angular 有自己的生成器，你可以通过命令行创建一个新的组件，每个 Angular 组件都有 4 个文件。很遗憾 React 没有这样开箱即用的功能，但是您可以使用 `plop` 自己创建它。如果您创建的每个新组件是都应该一个包含组件、测试和 Storybook 文件的文件夹，那么生成器可以在一行中为您创建。在很多情况下，这会让我们的生活变得轻松。例如，在服务器上添加新特性是命令行中的一行，它创建一个实体、服务和解析器文件，所有核心部分都自动填写。


		The core ideas are to keep things simple, consistent, structured and easy to traverse. This will make it easy for multiple people to work on the project and feel at home right away.
		核心思想是保持事物的简单、一致、结构化和易于遍历。这将使方便许多人参与到项目中工作，而且马上就有种在读自己代码的感觉。


		A somewhat similar approach is grouping by feature rather than by route. This approach worked well for me on a project that used Mobx State Tree and was a single page with lots of features on it. Grouping by routes is easy and doesn’t take a lot of brain power to figure out what should be grouped together and where to find items. An annoyance of grouping by feature can be deciding what belongs where. The boundaries of a feature can be blurry.
		类似的方法是按功能分组，而不是按路由分组。在一个使用 Mobx State Tree 的项目中，这种方法非常有效，它是一个包含许多特性的单页面。按常规方法分组很简单，而且不需要花费太多脑力来找出应该分组的内容和在哪里找到项目。按功能分组的一个麻烦之处在于决定它属于哪里。功能的边界可能很模糊。


		One common client folder structure is to group by file type. This structure uses a different folder for: components, containers, actions, reducers, and routes. (Actions and reducers for those that use redux. I try to avoid it.) The components folder will hold something like `BlogPost` and `Profile` and the containers folder contain files called `BlogPostContainer` and `ProfileContainer`. The container will grab the data from the server and pass it to the dumb child component whose job it is to render the data to screen.
		一个常见的客户端文件夹结构是按文件类型分组。该结构使用不同的文件夹：components，containers，actions，reducers 和 routes。（actions 和 reducers 是那些使用redux的。我尽量避免。）components 文件夹将包含 `BlogPost` 和 `Profile` 之类的内容，而 containers 文件夹将包含 `BlogPostContainer` 和 `ProfileContainer` 文件。容器将从服务器获取数据并将其传递给 Dumb 子组件，Dumb 子组件的工作是将数据呈现到屏幕上。（译者注：React 中可以将组件分为 Smart 和 Dumb 两类，方便组件复用）


		Within each route you can create more folders inside it that group certain parts of the page. If route contains a lot this makes sense. One thing I’d warn against is nesting too deeply. It will make it harder to jump around the project. This is another sign of overcomplicating things that don’t need to be. (On a side note, using command-p and search are a great way to jump around a project and find what you need, but file structure also has an impact.)
		在每个 route 文件夹中，您可以在其中创建更多文件夹，对页面的某些部分进行分组。所以如果 route 文件夹中包含了很多内容，这是可以理解的。但是我要警告的一件事是，不要嵌得太深。这将使我们这个项目在这个项目中更难地跳转。这是不必要的事情过于复杂的另一个迹象（顺便说一句，使用 command-p 和搜索也是在项目找到所需内容的好方法，但文件结构会有所影响。）

如何编写全栈 JavaScript 应用 #6384

如何编写全栈 JavaScript 应用 #6384

Conversation

eizyc commented Sep 6, 2019

eizyc commented Sep 6, 2019

Moonliujk commented Sep 9, 2019

fanyijihua commented Sep 9, 2019

Moonliujk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Moonliujk commented Sep 9, 2019

sin7777 commented Sep 10, 2019

sin7777 commented Sep 14, 2019

eizyc commented Sep 14, 2019

sin7777 commented Sep 16, 2019

eizyc commented Sep 18, 2019

sin7777 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sin7777 commented Sep 22, 2019

eizyc commented Sep 23, 2019

eizyc commented Sep 24, 2019

lsvih commented Sep 25, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lsvih commented Sep 25, 2019

lsvih commented Sep 25, 2019

eizyc commented Sep 25, 2019