Привет, ребята, надеюсь, у вас все хорошо, я вернулся с еще одной статьей. Сегодня мы обсудим все о Reactjs, что ?? такое React, как им пользоваться ?? , Как это работает и все такое прочее, поэтому я хочу, чтобы вы пристегнули ремень безопасности. Загрузите чашку кофе ☕️ И приступим…
Итак, что такое React?
React - это фактически интерфейсная библиотека, разработанная Facebook еще в 2013 году, React упрощает разделение всего нашего приложения (приложение или веб-сайт реакции означают одно и то же здесь и будут использоваться взаимозаменяемо) на более мелкие компоненты, что позволяет нам использовать компоненты в несколько раз улучшите читаемость кода, упростите обслуживание, сделайте наше приложение более эффективным, оптимизируйте поисковую оптимизацию и все такое добро.
Как это работает ??
Вам не нужно много знать об этом, так как довольно скоро это может стать довольно ошеломляющим, но вкратце, что делает React, он позволяет нам использовать javascript с HTML, что упрощает управление вещами, например, вы можете хранить html в константе и отправьте его. Или передайте его функции в качестве аргумента, или верните из того же элемента, `const greetTag =‹ h1 className = ”greet” ›Привет, пользователь ‹/h1›`
Это называется синтаксисом JSX. За кулисами React скомпилирует его и преобразует в объект Javascript,
`` React.createElement( `` `
'h1',
{className: 'greet'},'Hello user'
)
Итак, теперь вы знаете, что такое React и как он работает, пора заняться этой технологией, создав небольшой проект. Мы создадим цифровые часы в реальном времени, которые выглядят примерно так ...
Ничего особенного. Просто простые часы,
Предварительные требования
1) На вашем компьютере должен быть установлен nodejs. Это довольно просто, просто скачайте установщик и установите его, как и любое другое программное обеспечение.
2) У вас должен быть установлен Знания об основах программирования, например о функциях, классах, объектах, HTML и т. Д.
Переходя к нашей сборке, сначала вам нужно перейти в каталог или папку, в которой вы хотите создать свой проект, и открыть там свой терминал или окно командной строки, введите команду ниже
`` npx create-response- app firstapp ``
Эта команда создаст новое приложение для реагирования и все необходимые файлы. Имя вашего проекта будет `` firstapp``. Вы можете иметь любое, если хотите. Нажмите Enter. Процесс занимает некоторое время, так что наслаждайтесь кофе.
После этого перейдите в проект (`` cd firstapp '') и запустите команду `` npm start ''. Это запустит сервер на вашем локальном компьютере. компьютер и автоматически откроет Chrome для вас (оставьте сервер включенным после того, как вы закончите эту статью, просто нажмите CTRL + Z, чтобы закрыть его). Технически вы уже на полпути. Теперь вам просто нужно создать свой компонент часов и отобразить его на экране. Но прежде чем двигаться вперед, взгляните на файловую структуру в вашем проекте. Их много, и сейчас мы изменим некоторые из их, но не расстраивайтесь, глядя на них. Потому что ... вы не можете сдаваться сейчас, мы уже зашли так далеко.
Вам не нужно много знать о файловой структуре. Если вы хотите, вы можете просто пропустить и просмотреть раздел файловая структура.
Файловая структура
Есть 3 основные папки и пара файлов. Давайте поговорим о первой папке node_modules. Он содержит все пакеты и модули, необходимые для работы React. Вам не нужно возиться с этой папкой, поскольку все сторонние модули, которые вы устанавливаете в свое приложение, также находятся в ней.
Далее у нас есть общедоступная папка, в которой содержатся все файлы, которые не используются при компиляции вашего приложения. Она также содержит наш основной файл index.html. Ваше приложение запускается с этого файла. у нас есть специальный тег ‹div› внутри этого файла, все наши компоненты отображаются внутри этого тега ‹div›. Manifest.js содержит все информация об авторе приложения, о том, как мы должны его представить, и обо всем этом добром. Пока мы не будем изменять и этот файл.
Затем идет наша папка src, которая содержит все наши JS (javascript), App.js - это основные компоненты, которые мы собираемся визуализировать в нашем собственном Clock.js внутри этого компонента App.js, Другие файлы в этих папках с суффиксом test более полезны для Тестера приложений, а файл reportWebVitals.js используется Тестировщиком и специалистами по обслуживанию производительности. По крайней мере, сейчас нам не о чем беспокоиться.
Index.js в этом файле происходит настоящее волшебство. Он фактически отображает наш компонент App.js. Как я уже сказал, мы будем визуализировать наш Clock.js внутри компонента App.js. Думаю, вы, ребята, получаете потенциальных клиентов. Мы как бы создаем иерархию, которая выглядит примерно так: Индекс .js отображает наш компонент App.js, а App.js компонент отображает наш компонент Clock.js, который мы собираемся создать. (App.js отображается внутри этого div с классом root, который присутствует внутри index.html).
Обсуждение других файлов с расширением .CSS. Они используются для стилизации компонентов
Создание Clock.js
Хватит напряженности, давайте создадим наш первый компонент. Создайте новый файл в папке src и назовите его clock.js. Внутри clock.js наберите под кодом.
import React from "react";
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({ date: new Date() });
}
render() {
return (
<div>
<h2>Time is {this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
export default Clock;
Прекратите рвать волосы 👨🏻🦲 и давайте попробуем сломать этот код… ..
Первая строка импортирует модуль React, затем мы создаем класс Clock (помните, что первая буква должна быть заглавной) , Затем у нас есть конструктор, который принимает реквизиты (о свойствах и состояниях чуть позже), чем мы передаем их конструктору суперкласса, что является правилом.
Прежде чем двигаться дальше Теперь давайте поговорим о LifeCycle, не так ли?
Каждый раз, когда вы визуализируете компонент, несколько методов вызываются или запускаются автоматически. > метод render () вызывается первым. Вы должны вернуть один тег HTML из этого метода визуализации. если у вас есть несколько тегов, вставьте их в один, а затем верните, как показано в приведенном выше коде.
Следующие 2 метода, о которых я хочу поговорить, это componentDidMount () и componentWillUnmount () , DidMount вызывается, когда компонент фактически отображается здесь, можно сказать, что он вызывается сразу после метода render (). Здесь вы запускаете операторы, которые требуют, чтобы компонент уже был помещен в DOM (короче говоря, вы можете написать код, который требует, чтобы компонент был уже отрисован).
componentWillUnmount () вызывается, когда компонент уничтожается или когда он нам больше не нужен, здесь мы можем очистить некоторые объекты и, возможно, освободить место.
Реквизиты и состояния
Свойства похожи на таможенные атрибуты ваших компонентов, например, вы можете передавать такие атрибуты, как ‹Clock name =” MyClock ”/›, поэтому, если вы хотите получить доступ к этому свойству имени в любом из методов, render () или DidMount (), вы можете легко получить к нему доступ с помощью this.props.name
Состояния имени не требует пояснений, состояния используются для обработки состояний вашего приложения, например, всякий раз, когда вам нужно изменить данные вашего приложения или изменить время часов, в этом случае вы измените свойство state для Компонент, который заставит компонент снова отрисоваться (метод render () будет запущен снова, и мы будем менять состояние каждую секунду для обновления таймера)
Общая разбивка кода
Хорошо, теперь у нас есть немного предыстории, мы продвинемся вперед, поэтому в конструкторе `this.state = {date: new Date ()}; `мы устанавливаем состояние, равное новому объекту, this = {key: value} называется объектом javascript, здесь для подробностей. Проще говоря, объект JS - это просто набор пар ключей и значений, заключенных в фигурные скобки. Внутри одного набора фигурных скобок может быть несколько пар ключей и значений, разделенных запятой (,) {ключ1: значение, ключ2: значение}. Теперь состояние set…
Далее мы видим эту строку в методе DidMount () `this.timerID = setInterval (() =› this.tick (), 1000); `, setInterval () - это встроенная функция JS, которая принимает 2 аргумента, один - функцию, а второй - время в миллисекундах. Сначала мы передаем функцию функции в качестве аргумента, Функция, которую мы передаем, называется функцией стрелки, подробнее о функции стрелки здесь. setInterval вызывает функцию, которую мы передаем каждый раз после интервала, интервал здесь 1 с (одна секунда = одна тысяча миллисекунд), мы вызываем this.tick () каждую секунду setInterval возвращает идентификатор таймера, который мы используем для очистки этого интервала в методе UnMount (). Это позволит сэкономить память или вычисления, когда мы больше не нужен этот компонент, помните, что когда мы хотим создать свойство класса, мы создаем его на лету в JS, this.propertyName, некоторые свойства уже созданы в суперклассе, поэтому не переопределяйте те , в данном случае timerID - это настраиваемое свойство, которое мы создали в методе DidMount ().
метод tick (), как и метод пользовательских свойств, метод tick () - это наш собственный метод, который мы вызываем каждую секунду, этот метод отметки обновляет наше state () всякий раз, когда он вызывается. , здесь мы используем `this.setState ({date: new Date ()});` для обновления состояния приложения, помните об обновлении с помощью метода setState () ✅, только никогда не обновляйте напрямую, например: this.state = {date: new Date ()} ❌
Внутри setState () мы передаем объект javascript, который присваивает новое значение нашей дате key, новый объект Date () (объект Date отслеживает текущую дату и время, в JS Дата встроена)
render () эта функция возвращает HTML-код, который мы хотим отобразить на экране. Вы видите, что мы получаем доступ к ключу даты внутри тега h1, дата на самом деле является частью JS и использовать JS внутри HTML мы должны вставить его в фигурные скобки {},
this.state.date. toLocaleTimeString (), здесь toLocalTimeString преобразует дату и объект времени в строку и возвращает только время, и это то, что нам нужно
Экспорт. Когда наш компонент готов, мы используем экспортные часы по умолчанию в самой последней строке нашего файла, это говорит о том, что мы хотим использовать наш компонент вне файла, то есть как обсуждалось ранее мы собирались визуализировать этот компонент Clock внутри файла App.js. Теперь мы почти у цели….
Обработка Clock.js
Перейдите в файл App.js. Первое, что мы сделаем, это импортируем файл Clock.js, поскольку вы импортируете модули таким же образом.
import Clock from "./clock";
Теперь, когда у нас есть экспортированный компонент, импортированный в этот файл, нам нужно просто создать тег и поместить его в функцию Приложение (не меняйте другой код в функции Приложение. просто добавьте тег Clock, как показано ниже)
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
<Clock />
</p>
<p> </p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
Создайте тег Clock, как я сделал в приведенном выше коде, и все. Вероятно, все ваше приложение должно быть готово и работать прямо сейчас, сохраните все свои файлы, и ваша веб-страница должна обновиться сама по себе.
Это требует времени. переваривать и много гуглить и исследовать, но со временем все наладится. Если ваш код не работает, сравните его с моим. Вот ссылка на мой проект Github,
На этом все закончилось, ребята, спасибо, что остались до конца, надеюсь, это поможет, если у вас есть какие-либо сомнения относительно комментария ниже, не забудьте подписаться на меня в социальных сетях, где я публикую советы, связанные с программированием и технологиями в целом, Twitter, Instagram, Medium, Github, Blogger, Facebook, Если эта статья помогла вам, Нравится и Подписывайтесь на меня здесь, на meduim, тоже много значит. Спасибо, следите за новостями, увидимся…
