В ходе разработки моего проекта Javascript React» у меня был особый взгляд на инструменты и методы, которые я изучил для разработки приложения. Вернее, я смотрю на программирование в целом как на игру. Программирование может оторваться, поскольку разработчики головоломок должны решить и осмыслить или организовать работу приложений. Но инструменты Javascript React, такие как useState, useEffects и props, изменили мой взгляд на процесс сборки. Это по-прежнему головоломка для программистов, и я чувствую, что она никогда не изменится, но в ней был элемент командования и завоевания. Другими словами, было то, что я люблю называть цепочкой команд, которой нужно следовать, чтобы разработать чистое и работающее приложение. Это мировоззрение стало основой для моего кода. Это выглядит так:
1/Браузер-маршрутизатор
2/ использоватьЭффект
3/ состояние использования
4/ реквизит
5/ компоненты
Вы, разработчик, являетесь командиром и начальником, Эль Президенте. А вы диктуете направление приложения и реквизита. И ваши инструменты — это своего рода отделы, которые помогают вашим войскам, я имею в виду реквизит, с данными, необходимыми для завоевания компонента.
Я узнал, что лучший способ начать — построить свою штаб-квартиру. Мы делаем это, устанавливая и сопоставляя приложение. Мы делаем это с помощью BrowserRouter. Мне нравится смотреть на браузер-маршрутизатор как на навигационную систему, которую вы найдете в своей штаб-квартире.
Наш первый шаг, компонент BrowserRouter, объявлен в начале нашего приложения, в идеале в «index.js». Этот компонент окружен нашим приложением, потому что он позволяет нам получить доступ к компонентам React Router.
импортировать {BrowserRouter} из «react-router-dom»;
Первый шаг подготавливает нас к следующему, компоненту Маршрут, который является шерпой для местности нашего приложения. Маршрут использует свойство пути, которое указывает приложению, куда идти и отображать в коде. Путь зависит от URL-адреса, который направляет его к его местоположению или компоненту. Этот компонент лучше всего подходит для App.js.
импортировать {Route} из «react-router-dom»;
Из многих компонентов, которые вы можете добавить, вы наверняка добавите компонент NavBar (позже я подробно расскажу о многих функциях, которые вы можете добавить и создать). Компонент NavBar — это каталог самого приложения. Он остается в верхней части экрана и доступен в любое время. Лучше всего разрабатывать этот компонент в основном App.js, потому что он открыт для всех частей. Это точка доступа к вашей штаб-квартире, и мне нравится на нее смотреть.
Двигаясь по чертежу, натыкаемся на useEffect. Effect Hook позволяет коду выполнять побочные эффекты, позволяя нам выполнять такие действия, как Fetch()некоторые данные из API при загрузке компонента. Как командир приложения я рассматриваю useEffect как свою разведгруппу. Он собирает данные, которые мне нужно внести в свой код, чтобы сделать приложение более динамичным и интеллектуальным.
использовать эффект (() => {
выборка(`веб-сайт`)
.then((r) => r.json())
.then((данные) => console.log(данные))
}, [])
Далее хук useState — это генералы страницы/компонента кода. В свою очередь, useState содержит данные, которыми можно манипулировать во всем приложении. Он включает две переменные, и одна переменная содержит текущую информацию, которую она содержит/представляет. В то время как другой - это функция, которая изменяет переменную первой переменной при вызове. UseState позволяет нам изменять данные/информацию о компонентах приложения.
const [данные, setData] = useState (данные)
Далее идут реквизиты. Я рассматриваю Props как пехотинца кода приложения. Они могут маневрировать вокруг приложения в целом. В то время как useState является более локальным и лучше всего используется, когда изменения касаются данных или конкретной области приложения, реквизиты следуют цепочке команд или родительской системе. Они путешествуют по цепочке управления и дают жизнь другим областям кода. Реквизиты с помощью государства также могут передавать информацию вверх по иерархии.
И, наконец, компоненты похожи на территорию. Кодер/командующий должен победить, обеспечив правильный поток данных, а также правильную и динамичную работу кода. Компоненты — это земли, которые вы отправляете своим реквизитам для выполнения работы.
Еще один инструмент, который следует учитывать, — это переменные импорт и экспорт . Эти переменные предназначены для доступа к файлам из других компонентов или папок. Крайне важно стратегически разместить их в полезных областях проекта, потому что это помогает организовать данные. Это становится важным, когда вы добавляете больше реквизита, используете несколько состояний и добавляете больше компонентов в проект. Они становятся мостами, соединяющими компоненты проекта. Или вы также можете видеть их как двери, созданные для прохода реквизита.
Подведя итог, я обнаружил, что взгляд на механизмы React как на игру «командуй и властвуй» помог мне понять или, скорее, упростить арсенал хуков и переменных, предоставленных разработчикам. Это может показаться детским или слишком простым, но, как сказал Альберт Эйнштейн: «Если вы не можете объяснить это шестилетнему ребенку, вы сами этого не понимаете». При создании проекта , я уверен, что если вы тоже сможете рассматривать приложение React как игру и следовать этой миниатюрной формуле, у вашего проекта будет здоровый скелет для начала.
Живая ссылка кода::
