Здравствуйте, добрые люди, я недавно пытался возиться с ReactJs и пытался найти выход, чтобы сделать по-настоящему простое приложение Todo. Что может
- Добавить в список
- Удалите из списка, просто щелкнув по нему.
Я попытаюсь рассказать, что такое ReactJs по отношению к этому приложению Todo, в виде разговора между двумя людьми, Kritika и Alpit (давайте начнем)
Kritika: Сейчас выходные, я думаю, нам стоит использовать какие-то новые технологии и попробовать их, пока у нас есть время, например, React? Что сказать…!!!
Alpit- Конечно, но что такое React? : -O
Kritika- Ну, для начала, это библиотека, созданная командой Facebook и поддерживаемая сообществом. Основное преимущество использования React заключается в том, что он разбивает пользовательский интерфейс на мелкие компоненты, такие как головоломка, которую позже можно использовать для построения общей картины, и это также очень быстро из-за подхода виртуального дома.
Альпит- Виртуальный дом? Это дом в памяти?
Kritika- Да, это похоже на виртуальный план реального dom в памяти React, и каждое изменение происходит в виртуальном dom, и реальный dom не затрагивается, если изменение не видно визуально, поскольку это дорого. Вы можете понять это, когда вы думаете, ваши мысли не передаются слушателю до тех пор, пока вы не заговорите. Вы можете формировать свою мысль столько раз, сколько захотите, но однажды сказанное не может быть возвращено.
Алпит- Ооооооо .. !!! философские, давайте сейчас попрактикуемся? Что предварительное условие?
Kritika- Еще пара вещей
- ПК с установленным Node (https://blog.teamtreehouse.com/install-node-js-npm-windows)
- Немного поработаем с es6 JavaScript.
- Хороший редактор (предпочтительно VScode)
Мы будем использовать приложение create-response, которое даст нам хорошую настройку для непосредственного начала кодирования. Выполните следующую команду в терминале, в котором вы хотите создать проект.
npx create-react-app todo
Это займет пару минут. Сядь и расслабься… !!!
Когда все будет сделано, введите
cd todo npm start
Вы увидите, что ваш браузер по умолчанию открывается и localhost: 3000 уже запущен, с анимированным логотипом реакции на веб-странице. Если это так, тогда вам хорошо.
Это будет ваша структура папок по умолчанию,
Теперь откройте файл App.js в папке src и очистите весь беспорядок внутри файла, как это
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
и удалите все из app.css
Alpit- Моя веб-страница теперь пуста, хорошо, но вы можете показать мне, как будет выглядеть конечный результат?
Kritika- Безусловно, это поможет вам представить, как мы разрушаем все здесь.
Как видите, мы создаем два компонента, один из которых имеет только кнопку и поле ввода, а второй - список. Теперь, чтобы сохранить хорошую практику и сохранить управляемость кода, давайте создадим две папки внутри папки src.
Назовите один из них «inputBox», а другой - «listTodo» и создайте в нем соответствующие файлы js и css, как показано на изображении ниже.
Alpit- Ухххх… !!!, похоже, много папок и файлов, это простое приложение, которое можно написать с помощью простых JS, HTML и CSS, а не с такой большой сложностью. ? Зачем все эти хлопоты?
Kritika- Хахаха ... конечно, человек, работающий только с фоном javaScript, нашел бы это слишком подавляющим. Но по мере того, как ваше приложение становится больше, вы начнете ценить модульную структуру, которую оно предоставляет, и возможность повторного использования кода. Вы можете буквально скопировать и вставить три строки кода, и вуаля, та же функция будет доступна на вашем следующем веб-сайте.
Теперь вернемся к коду и попробуем сделать файл App.js более удобным. Добавим в класс конструктор и состояние в нем. Добавьте следующие строки в класс
constructor(props){
super(props)
this.state={
todo:[],
temp:''
}
}
Теперь давайте получим этот код построчно. Проще говоря, это просто конструктор внутри класса, где super (props) вызывает конструктор суперкласса в этом случае компонент. Теперь главный вопрос, что это за государство?
Какое состояние в ReactJS?
Это просто специальный объект, который можно изменять со временем в ответ на действия пользователя, сетевые ответы и что угодно. Когда он получает модификации и изменения становятся визуально доступными, dom обновляется. (В очень непрофессиональном смысле). Он доступен для всего файла, а также может быть доступен с помощью специального метода в других файлах.
Ваш текущий код должен быть в некоторой степени виден вот так.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props)
this.state={
todo:[],
temp:''
}
}
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
Теперь давайте сделаем наш inputBox.js сейчас 🙌 и просто скопируем приведенный ниже код, и я объясню его построчно.
import React from 'react';
import './inputBox.css'
const inputBox = (props)=>{
return(
<div className="center">
<input className="inputDis" type="text" key='1' />
<button className="buttonDis" key='2'>Info</button></div>
)
}
export default inputBox
Теперь вы, должно быть, заметили одну вещь между этими двумя файлами. Один содержит класс, а другой - функцию, а также компонент, называемый состоянием, и компонент без состояния соответственно. Здесь вы также можете использовать класс, но, поскольку его небольшой компонент без особой суеты, предпочитайте использовать простой вызов функции и возвращать JSX. Теперь у вас есть поле ввода и кнопка.
Alpit- Хорошо, пока все хорошо, но как он узнает, когда мы добавляем, а когда печатаем?
Kritika- Хороший вопрос, для него в основном два обработчика: onChange () и onClick () позволяют быстро добавить их в наш код, я добавлю в код некоторые дополнительные вещи и немного объясню это.
import React from 'react';
import './inputBox.css'
const inputBox = (props)=>{
return(
<div className="center">
<input className="inputDis"
type="text"
onChange={props.changed}
key='1' />
<button className="buttonDis"
onClick={props.addTodo}
key='2'>Info</button></div>
)
}
export default inputBox
Этот дополнительный бит, о котором я сказал ранее, - это onChange = {props.changed} и onClick = {props.addTodo}.
Алпит- Да я сейчас все запуталась .. ?? Как случилось, вдруг props относится к измененному и addTodo, и, более того, что такое даже props? 🤷♂️
Kritika- Niceeeeeee… !!!, означает, что вы подписаны на. Помните, я уже говорил ранее о технике, связанной с состоянием, и о том, как мы можем использовать ее для использования в других файлах. Мы делаем то же самое здесь, изменено и addTodo будут функциями, определенными в app.js, и мы собираемся определить их сейчас. Добавьте следующие строки кода в свой класс App.js.
changed=(thing)=>{
var x = thing.target.value;
this.setState({
temp:x
})
}
addTodo = ()=>{
const item = [
...this.state.todo
]
item.push(this.state.temp);
this.setState({
todo:item
})
}
Теперь позвольте мне объяснить этот код построчно.
Вы видите, что в файле inputBox.js есть метод onChange внутри его элемента input, этот элемент срабатывает всякий раз, когда происходит изменение в input в textBox, и он вызовет функцию changed () файла App.js.
При каждом вызове переменная X перезаписывается, а значение temp в состоянии изменяется с помощью this.setState (). Теперь снова перейдите в файл inputBox.js. Вы найдете один метод onClick, он не требует пояснений, при каждом нажатии на него запускается функция addTodo. Весь список дел сохраняется в массиве item, с помощью оператора распространения (google it😎) новый элемент помещается в него, и снова состояние установленный.
Итак, из одного компонента inputBox ( это готово .. !!! ) и App.js ( частично готово .. !! ! ). Теперь давайте создадим еще один компонент listTodo.
Алпит: Ах да, остался один файл, но что от него?
Критика: Хорошо, в основном, использование этого файла заключается в том, что это список, который отображается, когда пользователь добавляет какой-либо элемент. По сути, это второй компонент. Просто прокрутите немного вверх до изображения, и вы найдете.
Алпит: Ха-ха, круто, давайте добавим в него код.
Критка: Быстро скопируйте это, и все будет объяснено.
import React from 'react';
const displayTodo = (props)=>{
const items = props.todoList.map((item, index)=>{
return(
<div key={index+"upper"}
onClick={()=>props.removeIt(index)}
className="listTodo">
<span>{item}</span>
</div>
)})
return (
<div>{items}</div>
);}
export default displayTodo
Алпит: Пожалуйста, остановись .. !!! и скажите, как данные попадают в опору?
Критика: когда мы объединим все компоненты в App.js, вы узнаете. Теперь первый гугл, как работает функция карта. По сути, он перебирает массив и что-то возвращает. В этом случае происходит то же самое, данные отправляются в {item}, а затем весь список div возвращается как {items}.
Вы, должно быть, видели, что есть дополнительная функция под названием removeIt (). Он будет удалять элемент списка всякий раз, когда на него нажимают.
Добавьте эту строку чуть ниже addTodo
removeIt = (index)=>{
const newItems = this.state.todo.filter((el, elIndex) => elIndex!==index);
this.setState({
todo: newItems
})
}
Проще говоря, в этой функции, поскольку название предполагает, что метод фильтра (встроенный метод javaScript) отфильтрует элемент с индексом, не совпадающим с индексом, по которому был выполнен щелчок, и поместит его в массив, а затем установит состояние.
Алпит: Опять спрашиваю? Как мы вызываем метод?
Kritika- Хорошо, теперь самое время добавить эти строки в ваш App.js в методе рендеринга.
render() {
return (
<div className="change">
<InputBox
changed={(event)=>this.changed(event)}
addTodo = {this.addTodo}
/>
<ListTodo
todoList = {this.state.todo}
removeIt = {this.removeIt}
/>
</div>
);
}
и вуаля .. !!!, ваш код готов.
Я добавляю сюда весь код в качестве окончательной скомпилированной версии, если у вас снова есть сомнения. Это App.js
//App.js
import React, { Component } from 'react';
import './App.css';
import Navbar from './Navbar/Navbar'
import InputBox from './inputBox/inputBox';
import ListTodo from './listTodo/listTodo';
class App extends Component {
constructor(props){
super(props)
console.log("This is from the construct");
this.state={
todo:[],
temp:''
}
}
changed=(thing)=>{
var x = thing.target.value;
this.setState({
temp:x
})
}
addTodo = ()=>{
const item = [
...this.state.todo
]
item.push(this.state.temp);
this.setState({
todo:item
})
}
removeIt = (index)=>{
const newItems = this.state.todo.filter((el, elIndex) => elIndex !== index);
this.setState({
todo: newItems
})}
render() {
return (
<div className="change">
<InputBox
changed={(event)=>this.changed(event)}
addTodo = {this.addTodo}
/>
<ListTodo
todoList = {this.state.todo}
removeIt = {this.removeIt}
/>
</div>
);}}
export default App;
Это listTodo.js
//listTodo.js
import React from 'react';
import {Button} from 'react-bootstrap';
import './listTodo.css'
const displayTodo = (props)=>{
const items = props.todoList.map((item, index)=>{
return(
<div key={index+"upper"} onClick={()=>props.removeIt(index)} className="listTodo">
<span>{item}</span>
</div>
)})
return (
<div>{items}</div>
);}
export default displayTodo
И последний файл inputBox.js
//inputBox.js
import React from 'react';
import './inputBox.css'
const inputBox = (props)=>{
return(
<div className="center">
<input className="inputDis" type="text" key='1' onChange={props.changed}/>
<Button className="buttonDis" key='2' onClick={props.addTodo}>Info</Button>
</div>
)}
export default inputBox
Ого .. !!!, это было довольно долго. Однако это была моя первая попытка написать какой-либо учебник. Это руководство было написано с учетом того, что вы знакомы с React, но вы только новичок.
Любой вопрос, касающийся кода, можно задать в комментариях, я хотел бы ответить на них, и если вы хотите получить дополнительные разъяснения, вот мой адрес электронной почты [email protected]. Я оставил часть CSS нетронутой, не стесняйтесь стилизовать как хотите. Напишите мне письмо, касающееся кода или любой возможности для меня.
#alp
