-
Notifications
You must be signed in to change notification settings - Fork 391
Translation FAQ File Structure (faq-structure.md) #98
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
af15db7
Translation faq-structure
RinatRezyapov 3031b4c
Translation faq-structure fix 1
RinatRezyapov f595119
Translation faq-structure fix 2
RinatRezyapov 3b575c7
Translation faq-structure fix 3
RinatRezyapov f38fdd5
Translation faq-structure fix 4
RinatRezyapov 0b2f0df
Translation faq-structure fix 5
RinatRezyapov 526a45e
Translation faq-structure fix 6
RinatRezyapov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -1,18 +1,18 @@ | ||||||
--- | ||||||
id: faq-structure | ||||||
title: File Structure | ||||||
title: Структура файлов | ||||||
permalink: docs/faq-structure.html | ||||||
layout: docs | ||||||
category: FAQ | ||||||
--- | ||||||
|
||||||
### Is there a recommended way to structure React projects? {#is-there-a-recommended-way-to-structure-react-projects} | ||||||
### Есть ли рекомендации по структуре React-проектов? {#is-there-a-recommended-way-to-structure-react-projects} | ||||||
|
||||||
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. | ||||||
Единого мнения не существует. Однако, есть несколько популярных подходов, которые вы можете рассмотреть. | ||||||
|
||||||
#### Grouping by features or routes {#grouping-by-features-or-routes} | ||||||
#### Группировка по возможностям или маршрутам {#grouping-by-features-or-routes} | ||||||
|
||||||
One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route. | ||||||
Один из популярных подходов -- это размещение файлов CSS, JS и тестов в папках, сгруппированных по возможности или маршруту. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
``` | ||||||
common/ | ||||||
|
@@ -35,11 +35,11 @@ profile/ | |||||
ProfileAPI.js | ||||||
``` | ||||||
|
||||||
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. | ||||||
Понятие «возможность» не является универсальным, поэтому выбор уровня детализации остается за вами. Если у вас не получается составить список папок верхнего уровня, вы можете спросить у пользователей вашего продукта, из каких основных частей он состоит, и взять модель мышления пользователей за образец. | ||||||
another-guy marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
#### Grouping by file type {#grouping-by-file-type} | ||||||
#### Группировка по типу файла {#grouping-by-file-type} | ||||||
|
||||||
Another popular way to structure projects is to group similar files together, for example: | ||||||
Другим популярным способом структурирования проектов является группировка похожих файлов, например: | ||||||
|
||||||
``` | ||||||
api/ | ||||||
|
@@ -58,17 +58,16 @@ components/ | |||||
ProfileHeader.js | ||||||
ProfileHeader.css | ||||||
``` | ||||||
Некоторые предпочитают идти ещё дальше и размещать компоненты в различные папки в зависимости от их роли в приложении. К примеру, методология разработки [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) построена на этом принципе. Помните, что данные методологии следует рассматривать как полезные примеры, а не как строгие правила. | ||||||
|
||||||
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 {#avoid-too-much-nesting} | ||||||
Проблем, связанных с чрезмерной вложенностью папок в JavaScript-проектах, может возникнуть достаточно много. Одна из них -- это сложность контроля относительных импортов или обновления этих импортов при перемещении файлов. Если у вас нет веских оснований использовать глубокую вложенность папок, подумайте о том, чтобы ограничить себя максимум тремя или четырьмя уровнями вложенности в рамках одного проекта. Разумеется, это всего лишь рекомендация и она может быть не актуальна в случае вашего проекта. | ||||||
|
||||||
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. | ||||||
#### Не переусердствуйте {#dont-overthink-it} | ||||||
|
||||||
#### Don't overthink it {#dont-overthink-it} | ||||||
Если вы только начинаете проект, [не тратьте более 5 минут](https://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%BF%D0%B0%D1%80%D0%B0%D0%BB%D0%B8%D1%87) на выбор структуры проекта. Выберите любой из перечисленных выше подходов (или придумайте свой собственный) и начните писать код! Есть большая вероятность, что вы вернётесь к переосмыслению структуры проекта после написания некоторого количества кода. | ||||||
|
||||||
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. | ||||||
На практике проекты часто используют сочетание нескольких вышеупомянутых подходов. Поэтому выбор «правильного» подхода в самом начале проекта не слишком важен. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.