- Введение
- Декларативное программирование
- Состав компонентов
- Однонаправленный поток данных
- Вывод
- Бонус: стать разработчиком React
Одна из самых больших ошибок, которые совершают люди при попытке выучить реагирование, – это просто наблюдать за учебными пособиями на YouTube и пытаясь воспроизвести то, что они видят в линии.
Позвольте мне рассказать вам кое-что. Учебные пособия на YouTube не сделают вас разработчиком React!
Поэтому в этой статье я собираюсь показать вам лучший способ начать работу с React для начинающих, чтобы вы могли быстро и эффективно работать.
Пойдем!
React настолько популярен, что можно найти бесконечный контент в Интернете, что делает обучение реагировать на ваши собственные довольно сложные.
Вы не знаете, с чего начать или что учиться.
В конечном итоге вы в конечном итоге наблюдаете за учебником на YouTube или курсе кода, который кодирует все приложение, используя React, Redux, Firebase, GraphQL и многое другое.
Перестань. Вы тратите свое время. Вы ничего не помните из этого, плюс вы не собираетесь изучать фундаментальные принципы, которые вы должны знать, чтобы создать свои собственные приложения React с нуля.
Если вы хотите стать разработчиком React, есть одна важная вещь, которую вы должны знать.
Без подходящей основы вы ограничиваете прогресс, который вы можете добиться в своем учебном путешествии.
Если у вас нет подходящей основы, вы будете намного менее эффективны при приложениях для построения реагирования.
Вы можете пройти учебник по кодированию и почувствовать, что вы что -то изучаете, но вы будете бороться и не знаете, что делать, работая над своими собственными проектами.
Или, что еще хуже, вы примените неправильную технику или используете неправильный инструмент. И теперь вы боретесь, потому что ваша кодовая база сложнее, чем должна быть.
Вот почему первое, что вам нужно сделать, и лучший способ начать обучение для начинающих, – это овладеть основными принципами.
Конечно, у вас должен быть какой -то опыт работы с JavaScript, HTML и CSS, но здесь я говорю о основных принципах React.
Вам необходимо понять три основных принципа, которые делают реагирование уникальным, даже перед написанием вашей первой строки кода.
Изучая основы, вы разработаете правильные методы и образ мышления, чтобы построить свое первое приложение React и намного быстрее продвигаться к созданию крупномасштабных и готовых к производству приложений.
И вот почему овладение основными принципами – это не только лучший способ начать обучение для начинающих, но и гарантировать, что вы будете продолжать развиваться в своем учебном путешествии.
Теперь я собираюсь дать вам три основных принципа, которые вам нужно для освоения основ.
Итак, первый принцип, который вам нужно понять, это декларативное программирование.
На самом деле, это не что -то конкретное для реагирования, а парадигма программирования в информатике.
Когда вам нужно выполнить задачу, у вас есть два способа сделать это: использование императивного или декларативного способа.
Давайте посмотрим на различия между ними с простым примером.
Итак, допустим, вам нужно идти от дома к работе.
Используя императивный способ, вы возьмете свою машину и дадите ему пошаговые инструкции о том, как добраться до работы.
Действительно, вы должны управлять колесом, тормозом и дросселем, чтобы поднять правильное направление к конечному пункту назначения.
Другими словами, вы рассказываете своей машине, как ездить с такими инструкциями, как идти прямо или сразу же при первом светофоре.
Это императивный способ.
Теперь допустим, у вас больше нет машины, поэтому вы заказываете такси, чтобы приступить к работе.
На этот раз, вместо того, чтобы давать пошаговые инструкции, вы просто даете водителю адрес вашего конечного пункта назначения.
Таким образом, вы говорите, что нужно сделать, что идет от дома к работе. Вот и все!
Вам все равно, как это делает водитель. Он зависит от него безопасно до конечного пункта назначения. Другими словами, водитель занимается императивной работой для вас.
Таким образом, декларативное программирование состоит из инструктажа программы о том, что нужно сделать, вместо того, чтобы рассказывать ей, как это сделать.
Это то же самое с React.
Вы заявляете, как пользовательский интерфейс должен выглядеть использование размеров для каждого состояния вашего приложения. И React выполняет императивную работу для вас, поддерживая DOM в синхронизации с вашим приложением. Вы на самом деле не манипулируете DOM самостоятельно.
Теперь второй принцип – сочинение.
В React вы создаете сложные пользовательские интерфейсы, объединяя меньшие компоненты вместе.
React следует за сильной моделью на основе компонентов.
В React все, что вам нужно сделать, это создать компоненты и составить их для создания вашего приложения.
Эта мощная модель композиции дает вам простой способ повторного использования кода компонентов на протяжении всего приложения.
Итак, давайте посмотрим на простой пример, чтобы понять, как работает композиция в React.
Например, вот моя домашняя страница GitHub.
Предположим, вам пришлось построить эту страницу с React. В этом случае вы должны разбить пользовательский интерфейс в иерархию компонентов, определив все различные компоненты и подумав о том, как их организовать вместе.
Первое, что вы захотите сделать, это нарисовать коробки вокруг каждого компонента и дать им имя.
Вот как я это вижу.
Конечно, это не единственное решение здесь, вам может не понадобиться отдельный компонент для всех этих вещей, или вы можете захотеть больше компонентов.
Но это нормально.
Размышления о структуре вашего применения заранее очень важно.
Если вы хотите сэкономить некоторое время спустя и сделать ваши приложения React в долгосрочной перспективе, вы должны подумать об иерархии компонентов.
Я призываю вас выполнять это упражнение с другими веб -сайтами и попытаться выяснить, какие компоненты вам понадобятся, и как вы будете сочинять их вместе.
Дайте мне знать, в разделе комментариев ниже, какой веб -сайт вы выбрали и какое решение вы придумали.
Наконец, последнее, что вы должны знать о React, когда вы только начинаете, это то, как данные течет в приложении React.
В React данные текут от родительского компонента к дочернему компоненту.
Эта техника называется однонаправленный поток данных или нисходящий поток данных, потому что данные всегда течет одинаково сверху вниз.
Основным преимуществом этого подхода является то, что данные текут по всему приложению в одном направлении, вниз по компоненту иерархии.
Это делает ваши взгляды более предсказуемыми и помогает отладке вашего приложения на случай, если что -то пойдет не так.
Большой! Итак, давайте повторим то, что мы узнали в этом видео.
React используется для создания сложных пользовательских интерфейсов и полагаться на несколько принципов, которые делают его уникальным. Вы должны понимать эти принципы, если вы только начинаете.
Во -первых, React использует декларативное программирование,
Во -вторых, он использует мощную композиционную модель, основанную на компонентах,
и, наконец, данные как один и единственный способ течь на протяжении всего приложения.
Так что теперь вы готовы начать!
Посетите alterclass.io, если вы хотите получить навыки, которые работодатели ищут, и стать разработчиком React 👉 https://alterclass.io/courses/react Анкет
Наш курс:
- 📚 8 самостоятельных модулей
- ⚛ 8 реальных проектов
- 📄 Полный портфель
- 👨👨👦👦 Удивительное сообщество
- 👨🏫 Инструктор мирового класса
- 💯 Обзор кода 1 на 1 и отзывы экспертов
- ♾ Пожизненный доступ
Alterclass нарушает то, как вы учитесь реагировать.
Наша платформа следующего поколения даст вам уверенность и навыки, чтобы получить работу вашей мечты 👨💻.
Все, что вам нужно для освоения реагирования.
💯 Присоединяйтесь к ‘стать разработчиком React’ 30-дневную гарантию возврата денег сейчас 👇 https://www.alterclass.io/courses/react
Alterclass в социальных сетях:
Оригинал: “https://dev.to/alterclass/the-best-way-to-get-started-with-react-for-beginners-2021-4j7i”