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

Приборка

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

Как вы помните на прошлом скрине, у нас были предупреждения от eslint. 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 - не используется, исправьте:

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

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

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

Поддерживайте свой код без предупреждений. Если вы не знаете о чем речь, например, сработало правило no-unused-vars, не ленитесь. Изучайте документацию на eslint.org

clean console

Импорты

Наша задача - разбить огромный файл 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

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

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

src/App.js

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

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 структуры по дефолту)

[
{
"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

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 стало удобнее, каждый компонент живет в отдельном файле.

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

Исходный код.