Я только что закончил свой 5-й проект React. Я начал с целью сделать 5 хороших проектов React среднего/продвинутого уровня, и я очень рад поделиться тем, что мне это удалось.
Поскольку я большой поклонник React, который является библиотекой Front End и используется для создания удивительных пользовательских интерфейсов, теперь любой, кто хочет изучать React, должен хорошо разбираться в HTML, CSS и JS, иначе он точно застрянет в реакте.
Теперь вы скажете, что существует множество элементов HTML, так много свойств CSS, а JS просто огромен сам по себе, сколько же я должен изучать все это для React.
То, сколько вы должны знать об этих технологиях, полностью зависит от требований вашего проекта, потому что эти технологии очень обширны и обновляются ежедневно, поэтому изучение всего за один раз, а затем начало разработки чего-то своего, займет достаточно много времени.
Но есть несколько вещей, которые вы будете использовать независимо от того, насколько велики/малы ваши проекты по реактам?
Итак, давайте начнем, как вы знаете
a)HTML используется для структурирования веб-страницы
b) CSS используется для оформления веб-страницы
c) JS используется для размещения логики между DOM и элементами.
Итак, вот некоторые основы HTML CSS и JS, которые будут очень полезны, если вы только начинаете работать в Интернете, помните, что вы должны сделать что-то свое, даже небольшая программа-калькулятор добавит пользы.
HTML: все знают, что это язык разметки, который используется для структурирования веб-страницы, и для этого HTML использует теги (элементы), каждый тег может выполнять различные типы операций в структуре.
Вот некоторые из важных тегов, которые помогут вам приступить к структурированию вашей первой веб-страницы
-
Все семантические теги HTML (Header, Footer, Nav, Article, Section, Aside и т.д.).
Семантический HTML помогает при индексировании вашего приложения react в google, хотя React не очень дружелюбен к SEO, для лучшей доступности семантические HTML-теги очень полезны. -
span и div
Когда нам нужно процитировать что-то очень маленькое, мы должны использовать span и div, эти два элемента отличаются по своим свойствам отображения, но оба могут быть использованы для цитирования небольших вещей.
3.Ссылки
Ссылки используются для создания связей между двумя страницами, а в React вы также будете иметь дело со ссылками через React Router, поэтому они становятся наиболее важными.
-
Изображения
Ни одна веб-страница не выглядит привлекательно, если на ней нет изображений, и работа с изображениями — одна из таких вещей в React, которая будет полезна. -
Списки
Неважно, делаете ли вы хедер, футер, навигатор или рендерите что-то в React, все это будет делаться через списки, поэтому изучите их как следует. -
Формы
От отправки, получения и хранения данных — все это делается через формы, и в конечном итоге это поможет вам работать и с бэкендом. -
Вводы
Существует множество типов входов, которые отвечают за прием данных от пользователей в формах, поэтому их изучение становится важным. -
Идентификаторы и классы
С помощью id и classes мы можем получить HTML-элементы, чтобы стилизовать их или получить к ним доступ.
Если вы знаете эти теги, вы можете легко начать структурировать свою первую веб-страницу.
Теперь, когда мы создали структуру веб-страницы, пришло время украсить ее, для этого мы будем использовать CSS.
CSS — используется для стилизации элементов веб-страницы (тегов), с его помощью мы можем охватить элементы HTML и придать различные стили каждому элементу. Мы можем украсить все, что связано с этим элементом.
Вот некоторые из важных свойств CSS, которые могут быть полезны
-
Высота и ширина
Вы можете представить себя с нулевой высотой и шириной 😉 то же самое происходит и в CSS, вы можете установить любой тип высоты и ширины для ваших HTML-элементов. -
Цвета и шрифты
Цвета заполняют все, что угодно, и это может быть в любом формате и может быть набрано, то же самое касается шрифтов.
3.CSS-блоки
Это очень важно, так как вы должны знать, в чем разница между rem, px и %, все они работают по-разному и полезны в своей уважаемой природе.
4.FlexBox и сетки: Отображение
Очень важная вещь, которую нужно понять, так как вы обязательно будете использовать flexbox, независимо от того, насколько мал ваш проект, потому что правильное выравнивание элементов становится очень простым с flex, а сетки также полезны для отзывчивого дизайна.
- ПоложениеПозиционированием элементов можно управлять с помощью свойства position, с помощью которого вы можете установить элемент сверху, снизу, слева или справа на веб-странице.
-
Border[ (console.log of CSS 😉 ]
Граница должна быть известна, так как она помогает в отладке CSS, а также может придать хороший вид элементам. -
Свойства текста
Очень полезны для создания правильно выровненных текстов и управления их оформлением. -
Фоны
Фоны могут иметь изображения или цвета, и на основе этого вы можете выбрать любую вещь для фона.
Итак, это основные свойства CSS, которые помогут вам создать свою первую стильную и красивую веб-страницу.
До сих пор мы сделали красивую веб-страницу, которая очень привлекательна, но мы хотим красоты с мозгом, а наш мозг — это JavaScript.
3.JavaScript: является мозгом для веб-страниц, поскольку JavaScript обладает логикой и может отдавать команды веб-элементам.
В настоящее время JavaScript работает везде — от браузеров до серверов.
Вот список некоторых основных концепций JavaScript, которые будут полезны для начала работы с React.
- Все концепции ES6 Я написал подробный блог о концепциях ES6, который вы можете прочитать здесь
2.JS Массивы
Массивы — это сердце в JS, поскольку все, что вы будете делать в JS, связано с данными, то в основном вы будете иметь дело с массивами.
3.JS Объекты
Объекты также используются для хранения данных, но в отличие от массивов, они имеют ключ и значения для доступа к данным, в то время как в массивах для этого нужны индексы.
- Чистый код
Да, это очень важно, но даже если вы не знаете, просто запомните две вещи
a) делайте имена функций и переменных самоочевидными.
b) делайте отдельные функции для всего, например, если функция просто получает данные из API, она должна делать только это.
Вот пример для пункта номер 4
import React, { useEffect, useState } from "react";
function Demo() {
const [getData, setGetData] = useState([]);
function getDataFromAPIFn() {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setGetData(data))
.catch((err) => console.log(err));
}
useEffect(() => {
getDataFromAPIFn();
}, []);
return (
<div>
<h1>
{getData.map((item) => (
<h1>{item.title}</h1>
))}
</h1>
</div>
);
}
export default Demo;
Если вы объедините все эти теги, стили и концепции JS, то в итоге вы сделаете хорошую и интерактивную веб-страницу/приложение на react.
Я надеюсь, что если вы получили некоторые знания из этой статьи, то поделитесь ими.