# Приборка и импорты

## Приборка

Запустите приложение, если оно у вас не запущено (`npm start`).

Как вы помните на прошлом скрине, у нас были предупреждения от [eslint](https://eslint.org/). eslint - вспомогательный инструмент, который помогает поддерживать код в чистоте, на данный момент у нас следующие проблемы:

```
./src/App.js
  Line 50:   Links must not point to "#". Use a more descriptive href or use a button instead  jsx-a11y/href-no-hash
  Line 126:  'value' is assigned a value but never used                                        no-unused-vars
  Line 140:  'agree' is assigned a value but never used                                        no-unused-vars
```

Строка 50: у ссылки должен быть атрибут href не #, а что-то более вразумительное (замените на '#readmore').

Строка 126 - value - не используется, исправьте:

```jsx
// было
const { id, value } = e.currentTarget
this.setState({ [id]: e.currentTarget.value })

// стало
const { id, value } = e.currentTarget
this.setState({ [id]: value })
```

Строка 140 - agree - не используется, исправьте:

```jsx
// было
const { name, text, bigText, agree } = this.state

// стало
const { name, text, bigText } = this.state
```

Поддерживайте свой код без предупреждений. Если вы не знаете о чем речь, например, сработало правило [no-unused-vars](https://eslint.org/docs/rules/no-unused-vars#disallow-unused-variables-no-unused-vars), не ленитесь. Изучайте документацию на [eslint.org](https://eslint.org/)

![clean console](/files/-LvLnSqx9MxI65JPjtbS)

## Импорты

Наша задача - разбить огромный файл `src/App.js` на компоненты.

Поддерживаются следующие импорты:

```
import A from 'A' // импорт по дефолту
import { B } from 'B' // именованный импорт
import * as C from 'C' // импорт "всего" в namespace C
```

С другой стороны поддерживаются следующие экспорты:

```
export default A // экспорт по дефолту
export const B // именованный экспорт
```

Мы создадим несколько файлов, в каждом из которых будем пользоваться именованным экспортом. Затем в App импортируем.

Создайте директорию `src/components` и в ней создайте файлы для каждого компонента, кроме `<App />`.

Рассмотрим создание файла, на примере `<Article />`:

*src/components/Article.js*

```jsx
import React from 'react' // мы обязаны импортировать необходимые пакеты в каждом файле
import PropTypes from 'prop-types' // у Article это react и prop-types

// далее просто скопировано все что было, кроме последней строки

class Article extends React.Component {
  state = {
    visible: false,
  }
  handleReadMoreClck = e => {
    e.preventDefault()
    this.setState({ visible: true })
  }
  render() {
    const { author, text, bigText } = this.props.data
    const { visible } = this.state
    return (
      <div className="article">
        <p className="news__author">{author}:</p>
        <p className="news__text">{text}</p>
        {!visible && (
          <a
            onClick={this.handleReadMoreClck}
            href="#readmore"
            className="news__readmore"
          >
            Подробнее
          </a>
        )}
        {visible && <p className="news__big-text">{bigText}</p>}
      </div>
    )
  }
}

Article.propTypes = {
  data: PropTypes.shape({
    id: PropTypes.number.isRequired, // добавили id, это число, обязательно
    author: PropTypes.string.isRequired,
    text: PropTypes.string.isRequired,
    bigText: PropTypes.string.isRequired,
  }),
}

export { Article } // именованный экспорт
```

Остальные файлы оформите аналогично.

Должна получиться следующая структура:

![folders news cra](/files/-LvLnSr0pU2kL6aFKD1w)

При этом, необходимо добавить import'ы в *App.js* и в *News.js*

*src/App.js*

```jsx
import React from 'react'
// импорт пакета prop-types удален, так как в этом файле prop-types не используется
import { Add } from './components/Add' // ./ = текущая директория,
import { News } from './components/News' // далее мы идем в директорию components и в нужный компонент
import './App.css'

const myNews = [
  {
    id: 1,
    author: 'Саша Печкин',
...
```

*src/components/News.js*

```jsx
import React from 'react'
import PropTypes from 'prop-types'
import { Article } from './Article' // идти в components не нужно, так как мы уже в этой директории

class News extends React.Component {
  renderNews = () => {
  ...
```

Я думаю принцип понятен: в каждом файле мы импортируем то, что нам нужно относительно этого файла.

* чтобы подняться на уровень выше - `'../'`
* чтобы на два уровня выше - `'../../'`
* чтобы начать поиск в текущей директории - `'./'`
* чтобы найти компонент Name в текущей директории в components - `'./components/Name'`
* чтобы импортировать из библиотеки - `'название библиотеки'`

Наш *App.js* заметно похудел. Ориентироваться в коде стало удобнее.

myNews тоже можно выкинуть из этого файла.

*src/data/newsData.json* (экспорт json структуры по дефолту)

```javascript
[
  {
    "id": 1,
    "author": "Саша Печкин",
    "text": "В четверг, четвертого числа...",
    "bigText":
      "в четыре с четвертью часа четыре чёрненьких чумазеньких чертёнка чертили чёрными чернилами чертёж."
  },
  {
    "id": 2,
    "author": "Просто Вася",
    "text": "Считаю, что $ должен стоить 35 рублей!",
    "bigText": "А евро 42!"
  },
  {
    "id": 3,
    "author": "Max Frontend",
    "text": "Прошло 2 года с прошлых учебников, а $ так и не стоит 35",
    "bigText": "А евро опять выше 70."
  },
  {
    "id": 4,
    "author": "Гость",
    "text": "Бесплатно. Без смс, про реакт, заходи - https: //maxpfrontend.ru",
    "bigText":
      "Еще есть группа VK, telegram и канал на youtube! Вся инфа на сайте, не реклама!"
  }
]
```

**Итого**: наш *App.js* нарядный:

*src/App.js*

```jsx
import React from 'react'
import { Add } from './components/Add'
import { News } from './components/News'
import newsData from './data/newsData' // импорт по дефолту
import './App.css'

class App extends React.Component {
  state = {
    news: newsData,
  }
  handleAddNews = data => {
    const nextNews = [data, ...this.state.news]
    this.setState({ news: nextNews })
  }
  render() {
    return (
      <React.Fragment>
        <Add onAddNews={this.handleAddNews} />
        <h3>Новости</h3>
        <News data={this.state.news} />
      </React.Fragment>
    )
  }
}

export default App
```

**Итого:** мы не плохо прибрались, разобрались в импортах. Читать App.js стало удобнее, каждый компонент живет в отдельном файле.

Есть несколько подходов к организации файлов в больших проектах, мы лишь сделали первый шаг в этом направлении.

[Исходный код](https://github.com/maxfarseer/react-course-ru-v2/tree/chp14-cleanup-and-imports).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://max-frontend.gitbook.io/react-course-ru-v2/create-react-app/priborka-i-importi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.