React - это библиотека Javascript с открытым исходным кодом для создания динамических приложений, и это самая приятная вещь, которую я до сих пор узнал при кодировании. Он облегчает общий процесс написания компонентов, повышает производительность и облегчает дальнейшее обслуживание, обеспечивает более быстрый рендеринг, гарантирует стабильный код, имеет все ресурсы Facebook и т. Д. Я думаю, что это достаточные причины, по которым вам нужно использовать React для ваших проектов / приложений. Итак, поехали! Разрешите рассказать вам всю историю своего первого проекта под названием «Madflix»!

МЕЧТАЙТЕ О ВАШЕМ ПРОЕКТЕ!

Я младший инженер-программист и начал писать код совсем недавно, всего пару месяцев назад. Когда я услышал, что на следующем этапе мы будем изучать React, я понятия не имел об этом. Я искал в Google и читал блоги, смотрел видео об этом и знал, что мне понравится React. Затем за несколько недель до начала проектных недель я начал думать о своем проекте. Я пытался найти лучший API, который соответствует моим ожиданиям и который также не слишком сложен для программирования, потому что, во-первых, я все еще новичок в кодировании, и у меня было ограниченное время, чтобы завершить этот проект. Затем я нашел TMDB API, предоставляемый TheMovieDb. Помню первый момент, когда я увидел API и его возможности. Я не мог перестать думать об этом. Я думал об этом почти 7/24, в том числе во сне! Ага, вы меня правильно поняли. Я мечтала об этом! Мечтайте о своем проекте! Испытывайте сильную страсть к этому! Будут и другие шаги.

РИСУЙТЕ ВСЕ, ЧТО ВЫ ДУМАЕТЕ!

Это то, что я считаю чрезвычайно полезным. Я нарисовал! Нарисуйте все, что придет в голову. Рисование помогает мне очистить разум и понять, какой путь я выберу. Возможно, это не сработает для вас, но определенно работает для меня, и я хотел бы упомянуть об этом. Я надеюсь, что это поможет и всем, кто читает этот блог.

Я потратил более 20 страниц, чтобы понять, как построить структуру моего проекта. (к сожалению потратил несколько страниц 😭). Это одна из первых страниц, которые я рисую, и на ней отображается только первая страница, которую мы увидим, когда вы войдете на мой веб-сайт. Есть еще страницы, на которых показаны структуры компонентов, страницы фильмов и функции, которые я добавлю в свой проект, но я не хочу загружать их все сюда. Вам нужно подождать и посмотреть, когда он появится в сети!

УЗНАЙТЕ, КАК ПОСТРОИТЬ СВОЮ СТРУКТУРУ!

Я думаю, что существенная часть создания любого проекта находится на любом языке программирования. Первые пару недель, когда я начал изучать программную инженерию, меня не волновала структура. Затем я наткнулся на это YouTube-видео, и оно полностью изменило мое видение. У меня все начало щелкать сразу после того, как я посмотрел это видео. Если вы ориентируетесь на фронтенд-разработчик, я настоятельно рекомендую вам посмотреть это видео, чтобы вы знали, как начать создавать проект с нуля.

ПОДГОТОВЬТЕ СВОИ ИНСТРУМЕНТЫ / РАСШИРЕНИЯ!

Я ИСКЛЮЧАЮ расширения. Они будут вашей третьей рукой и глазом. Кодировать непросто, но невероятно легко ошибиться. Но есть несколько хороших людей, и благодаря им писать код стало намного проще, чем раньше. Не бойтесь их использовать. Я расскажу вам о некоторых расширениях, которые я использую, и все они настоятельно рекомендуются;

Я не хочу углубляться в них. В противном случае этот блог никогда не закончится хехехе. Так что, пожалуйста, поверьте мне и скачайте их все, а затем выясните, как они работают и что они делают. А теперь поговорим о серьезных вещах. Игра начинается!

СТИЛЬНЫЕ КОМПОНЕНТЫ

Styled-components - это библиотека, созданная для разработчиков на React и React Native. Это позволяет вам использовать стили на уровне компонентов в ваших приложениях. Styled-components использовать смесь JavaScript и CSS, используя метод, называемый CSS-in-JS.

Styled-components основаны на тегированных шаблонных литералах, что означает, что фактический код CSS пишется между обратными кавычками при стилизации ваших компонентов. Это дает разработчикам возможность многократно использовать свой код CSS из одного проекта в другой.

Я недавно узнал о стилизованных компонентах и ​​использую их в этом приложении. Я думаю, что стилизация - одна из самых важных частей при создании веб-сайта или приложения, а стилизованные компоненты позволили довольно легко стилизовать мое приложение.

Самая важная часть в стилизации - «Обертка», или как бы вы ее ни называли. Я условно назвал это оберткой. Вы можете думать об этом как о глобальном стиле для ваших компонентов. Вы можете хранить все содержимое страницы в одном контейнере. Фактическое содержимое страницы затем помещается в этот контейнер-оболочку. Его легко изменить и отредактировать, если вы допустили ошибку или вам не нравится, как он выглядит.

ИСПОЛЬЗУЙТЕ ГЛОБАЛЬНЫЙ СТИЛЬ!

Еще одна бесплатная подсказка от меня. ИСПОЛЬЗУЙТЕ ЭТО! Глобальные стили полезны и упрощают создание стилей. Вы можете редактировать наиболее часто используемые теги, такие как ‹body›, ‹p›, ‹h1›, или вы можете назначить имена переменных для цвета, которые вы собираетесь часто использовать для своего приложения в начале, и никогда больше не беспокоиться о них.

Затем все, что вам нужно сделать, это импортировать файл глобального стиля в app.js, и все! Вуаля! Случилось волшебство!

БУДЬТЕ ОРГАНИЗОВАННЫМИ!

Организованность должна быть вашей привычкой. Постарайтесь как можно больше разделить свою страницу на компоненты и создать для них файлы. Создайте файл конфигурации для источников API, которые вы будете использовать несколько раз в своем приложении. Используйте расширение «красивее», которое я предоставил ранее.

Если этот блог поможет хотя бы одному человеку в какой-то момент, моя цель будет достигнута. Не стесняйтесь обращаться ко мне и задавать вопросы. Желаю всем мои лучшие друзья! Оставайтесь с кодами: = ›

Ссылки

Http://www.columbia.edu/

Https://www.ionos.com/

Https://www.section.io/