react-course-ru-v2
Search…
Приборка и импорты
Приборка
Запустите приложение, если оно у вас не запущено (
npm start).Как вы помните на прошлом скрине, у нас были предупреждения от eslint. eslint - вспомогательный инструмент, который помогает поддерживать код в чистоте, на данный момент у нас следующие проблемы:
1
./src/App.js
2
Line 50: Links must not point to "#". Use a more descriptive href or use a button instead jsx-a11y/href-no-hash
3
Line 126: 'value' is assigned a value but never used no-unused-vars
4
Line 140: 'agree' is assigned a value but never used no-unused-vars
Copied!
Строка 50: у ссылки должен быть атрибут href не #, а что-то более вразумительное (замените на '#readmore').
Строка 126 - value - не используется, исправьте:
1
// было
2
const { id, value } = e.currentTarget
3
this.setState({ [id]: e.currentTarget.value })
4
5
// стало
6
const { id, value } = e.currentTarget
7
this.setState({ [id]: value })
Copied!
Строка 140 - agree - не используется, исправьте:
1
// было
2
const { name, text, bigText, agree } = this.state
3
4
// стало
5
const { name, text, bigText } = this.state
Copied!
Поддерживайте свой код без предупреждений. Если вы не знаете о чем речь, например, сработало правило no-unused-vars, не ленитесь. Изучайте документацию на eslint.org
clean console
Импорты
Наша задача - разбить огромный файл
src/App.js на компоненты.Поддерживаются следующие импорты:
1
import A from 'A' // импорт по дефолту
2
import { B } from 'B' // именованный импорт
3
import * as C from 'C' // импорт "всего" в namespace C
Copied!
С другой стороны поддерживаются следующие экспорты:
1
export default A // экспорт по дефолту
2
export const B // именованный экспорт
Copied!
Мы создадим несколько файлов, в каждом из которых будем пользоваться именованным экспортом. Затем в App импортируем.
Создайте директорию
src/components и в ней создайте файлы для каждого компонента, кроме <App />.Рассмотрим создание файла, на примере
<Article />:src/components/Article.js
1
import React from 'react' // мы обязаны импортировать необходимые пакеты в каждом файле
2
import PropTypes from 'prop-types' // у Article это react и prop-types
3
4
// далее просто скопировано все что было, кроме последней строки
5
6
class Article extends React.Component {
7
state = {
8
visible: false,
9
}
10
handleReadMoreClck = e => {
11
e.preventDefault()
12
this.setState({ visible: true })
13
}
14
render() {
15
const { author, text, bigText } = this.props.data
16
const { visible } = this.state
17
return (
18
<div className="article">
19
<p className="news__author">{author}:</p>
20
<p className="news__text">{text}</p>
21
{!visible && (
22
<a
23
onClick={this.handleReadMoreClck}
24
href="#readmore"
25
className="news__readmore"
26
>
27
Подробнее
28
</a>
29
)}
30
{visible && <p className="news__big-text">{bigText}</p>}
31
</div>
32
)
33
}
34
}
35
36
Article.propTypes = {
37
data: PropTypes.shape({
38
id: PropTypes.number.isRequired, // добавили id, это число, обязательно
39
author: PropTypes.string.isRequired,
40
text: PropTypes.string.isRequired,
41
bigText: PropTypes.string.isRequired,
42
}),
43
}
44
45
export { Article } // именованный экспорт
Copied!
Остальные файлы оформите аналогично.
Должна получиться следующая структура:
folders news cra
При этом, необходимо добавить import'ы в App.js и в News.js
src/App.js
1
import React from 'react'
2
// импорт пакета prop-types удален, так как в этом файле prop-types не используется
3
import { Add } from './components/Add' // ./ = текущая директория,
4
import { News } from './components/News' // далее мы идем в директорию components и в нужный компонент
5
import './App.css'
6
7
const myNews = [
8
{
9
id: 1,
10
author: 'Саша Печкин',
11
...
Copied!
src/components/News.js
1
import React from 'react'
2
import PropTypes from 'prop-types'
3
import { Article } from './Article' // идти в components не нужно, так как мы уже в этой директории
4
5
class News extends React.Component {
6
renderNews = () => {
7
...
Copied!
Я думаю принцип понятен: в каждом файле мы импортируем то, что нам нужно относительно этого файла.
- чтобы подняться на уровень выше -
'../' - чтобы на два уровня выше -
'../../' - чтобы начать поиск в текущей директории -
'./' - чтобы найти компонент Name в текущей директории в components -
'./components/Name' - чтобы импортировать из библиотеки -
'название библиотеки'
Наш App.js заметно похудел. Ориентироваться в коде стало удобнее.
myNews тоже можно выкинуть из этого файла.
src/data/newsData.json (экспорт json структуры по дефолту)
1
[
2
{
3
"id": 1,
4
"author": "Саша Печкин",
5
"text": "В четверг, четвертого числа...",
6
"bigText":
7
"в четыре с четвертью часа четыре чёрненьких чумазеньких чертёнка чертили чёрными чернилами чертёж."
8
},
9
{
10
"id": 2,
11
"author": "Просто Вася",
12
"text": "Считаю, что $ должен стоить 35 рублей!",
13
"bigText": "А евро 42!"
14
},
15
{
16
"id": 3,
17
"author": "Max Frontend",
18
"text": "Прошло 2 года с прошлых учебников, а $ так и не стоит 35",
19
"bigText": "А евро опять выше 70."
20
},
21
{
22
"id": 4,
23
"author": "Гость",
24
"text": "Бесплатно. Без смс, про реакт, заходи - https: //maxpfrontend.ru",
25
"bigText":
26
"Еще есть группа VK, telegram и канал на youtube! Вся инфа на сайте, не реклама!"
27
}
28
]
Copied!
Итого: наш App.js нарядный:
src/App.js
1
import React from 'react'
2
import { Add } from './components/Add'
3
import { News } from './components/News'
4
import newsData from './data/newsData' // импорт по дефолту
5
import './App.css'
6
7
class App extends React.Component {
8
state = {
9
news: newsData,
10
}
11
handleAddNews = data => {
12
const nextNews = [data, ...this.state.news]
13
this.setState({ news: nextNews })
14
}
15
render() {
16
return (
17
<React.Fragment>
18
<Add onAddNews={this.handleAddNews} />
19
<h3>Новости</h3>
20
<News data={this.state.news} />
21
</React.Fragment>
22
)
23
}
24
}
25
26
export default App
Copied!
Итого: мы не плохо прибрались, разобрались в импортах. Читать App.js стало удобнее, каждый компонент живет в отдельном файле.
Есть несколько подходов к организации файлов в больших проектах, мы лишь сделали первый шаг в этом направлении.
Last modified 2yr ago