JavaScript теперь похож на сочетание супермена и флеша в одном. Большая часть была взята из веб-технологий в мобильные приложения или настольные приложения. Кроме того, в настоящее время он начинает работу с машинным обучением, IoT и т. д.
React — самая популярная библиотека для фронтенд-разработок в сфере веб-разработки с 2018 года в мире.
Есть много причин, которые сделали React наиболее популярным сегодня. Это мощный Diff или виртуальный DOM, Simplicity, JSX и реквизиты, компоненты и более высокая производительность.
Реагировать ДОМ
Пакет react-dom предоставляет методы виртуального DOM или Diff, которые можно использовать для обертывания вашего приложения. Его можно использовать для рендеринга всего приложения. Вам не нужно использовать его в каждом компоненте вашего приложения React.
import ReactDOM from 'react-dom';
-----
ReactDOM.render(<App />, document.getElementById('app'));
оказывать()
Если мы хотим сделать наше приложение визуальным, мы должны его визуализировать. Выше мы использовали метод therender(). Он отобразит компонент <App /> во втором аргументе, который мы передали. Вот почему вы увидите, что в HTML-файле общедоступной папки /public/index.html есть элемент div с идентификатором =app.
Реагировать.создатьЭлемент()
Это создаст новый элемент в DOM. Но сейчас мы не делаем этого напрямую. Потому что это делает JSX. Когда мы напишем JSX, он будет преобразован в основной метод React React.createElement() и создаст новый элемент в DOM.
Компонентная архитектура разработки
Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания сложных пользовательских интерфейсов. Функциональное программирование или основанное на классах, оба поддерживаются в React. Хотя React становится проще, гибче с функциональными компонентами.
Реквизит
Реквизиты полезны и очень важны в React. Его можно использовать для передачи данных свойств от одного компонента к другому. Хотя props доступны только для чтения. Вы не можете изменить его без компонента держателя.
const users = [
{name: "User 1"},
{name: "User 2"},
{name: "User 3"}
];
// using data as props
const User = props => {
<>
<h1>{props.data.name}</h1>
</>
}
// passing data as props every-time
const Profiles = () => {
return(
<>
{users.map((u, i) => (<User key={i} data={u} />))}
</>
)}
