> For the complete documentation index, see [llms.txt](https://gpeterhand.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gpeterhand.gitbook.io/react/react-router/struktura-proekta.md).

# Структура проекта

Для больших приложений с большим количеством компонентов, роутов и т.д. очень важно правильно организовать структуру проекта. Можно выделить два способа организации структуры - по функциональному признаку и по компонентному. Мы будем придерживаться второго способа.

### Источники

* Alexis Mangin [Why React developers should modularize their applications?](https://medium.com/@alexmngn/why-react-developers-should-modularize-their-applications-d26d381854c1) \[16 февраля 2018]
* Doğuşcan Namal [How to Organize React Files Before It’s Messed Up](https://engineering.opsgenie.com/how-to-organize-react-files-before-its-messed-up-c85387f691be) \[30 ноября 2017]
* Alexis Mangin [How to use Redux on highly scalable javascript applications?](https://medium.com/@alexmngn/how-to-use-redux-on-highly-scalable-javascript-applications-4e4b8cb5ef38) \[22 февраля 2017]
* **Alexis Mangin** [**How to better organize your React applications?**](https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1) **\[28 апреля 2016]**
* Nathanael Beisiegel [Organizing Large React Applications](http://engineering.kapost.com/2016/01/organizing-large-react-applications/) \[4 января 2016]
* Will Becker [Redux best practices: File Layout](https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e#0b4e) \[28 сентября 2015]
* Ryan Florence [Folder Structure](https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346) \[20 января 2015]

В папке проекта **react-tutorial** создадим следующую структуру папок:

```
react-tutorial
  src
    App
    scenes
```

Создадим файлы:

{% code title="src/index.js" %}

```jsx
import { render } from 'react-dom'

import App from 'app'

render(<App />, document.getElementById('root'))
```

{% endcode %}

{% code title="src/App/index.js" %}

```jsx
import 'normalize.css'

import { hot } from 'react-hot-loader'

import Meta from './meta'
import Layout from './

layout'

const App = () => (
  <>
    <Meta />
    <Layout />
  </>
)

export default hot(module)(App)
```

{% endcode %}

{% code title="src/App/Layout.js" %}

```jsx
import AppBar from '@material-ui/core/appbar'
import Toolbar from '@material-ui/core/toolbar'
import Button from '@material-ui/core/button'

const Layout = () => (
  <AppBar position="static">
    <Toolbar>
      <Button color="inherit">Home</Button>
      <Button color="inherit">About</Button>
      <Button color="inherit">Topics</Button>
    </Toolbar>
  </AppBar>
)
export default Layout
```

{% endcode %}

{% code title="src/App/Meta.js" %}

```jsx
import { Helmet } from 'react-helmet'

const Meta = () => (
  <Helmet>
    <html lang="ru" />
    <title>My Title</title>
    <meta charSet="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
    />
  </Helmet>
)

export default Meta
```

{% endcode %}

В папке **src/scenes** в дальнейшем  будем создавать роуты.

Запускаем проект

Должна отобразиться панель с тремя кнопками. Пока без роутов.&#x20;