Главная » JS

Достаточно HTML, CSS и JS для начала работы с React

На чтение 6 мин. Просмотров 36 Опубликовано

Я только что закончил свой 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 использует теги (элементы), каждый тег может выполнять различные типы операций в структуре.

Вот некоторые из важных тегов, которые помогут вам приступить к структурированию вашей первой веб-страницы

  1. Все семантические теги HTML (Header, Footer, Nav, Article, Section, Aside и т.д.).
    Семантический HTML помогает при индексировании вашего приложения react в google, хотя React не очень дружелюбен к SEO, для лучшей доступности семантические HTML-теги очень полезны.

  2. span и div
    Когда нам нужно процитировать что-то очень маленькое, мы должны использовать span и div, эти два элемента отличаются по своим свойствам отображения, но оба могут быть использованы для цитирования небольших вещей.

3.Ссылки
Ссылки используются для создания связей между двумя страницами, а в React вы также будете иметь дело со ссылками через React Router, поэтому они становятся наиболее важными.

  1. Изображения
    Ни одна веб-страница не выглядит привлекательно, если на ней нет изображений, и работа с изображениями — одна из таких вещей в React, которая будет полезна.

  2. Списки
    Неважно, делаете ли вы хедер, футер, навигатор или рендерите что-то в React, все это будет делаться через списки, поэтому изучите их как следует.

  3. Формы
    От отправки, получения и хранения данных — все это делается через формы, и в конечном итоге это поможет вам работать и с бэкендом.

  4. Вводы
    Существует множество типов входов, которые отвечают за прием данных от пользователей в формах, поэтому их изучение становится важным.

  5. Идентификаторы и классы
    С помощью id и classes мы можем получить HTML-элементы, чтобы стилизовать их или получить к ним доступ.

Если вы знаете эти теги, вы можете легко начать структурировать свою первую веб-страницу.

Теперь, когда мы создали структуру веб-страницы, пришло время украсить ее, для этого мы будем использовать CSS.

CSS — используется для стилизации элементов веб-страницы (тегов), с его помощью мы можем охватить элементы HTML и придать различные стили каждому элементу. Мы можем украсить все, что связано с этим элементом.
Вот некоторые из важных свойств CSS, которые могут быть полезны

  1. Высота и ширина
    Вы можете представить себя с нулевой высотой и шириной 😉 то же самое происходит и в CSS, вы можете установить любой тип высоты и ширины для ваших HTML-элементов.

  2. Цвета и шрифты
    Цвета заполняют все, что угодно, и это может быть в любом формате и может быть набрано, то же самое касается шрифтов.

3.CSS-блоки
Это очень важно, так как вы должны знать, в чем разница между rem, px и %, все они работают по-разному и полезны в своей уважаемой природе.

4.FlexBox и сетки: Отображение
Очень важная вещь, которую нужно понять, так как вы обязательно будете использовать flexbox, независимо от того, насколько мал ваш проект, потому что правильное выравнивание элементов становится очень простым с flex, а сетки также полезны для отзывчивого дизайна.

  1. ПоложениеПозиционированием элементов можно управлять с помощью свойства position, с помощью которого вы можете установить элемент сверху, снизу, слева или справа на веб-странице.

  2. Border[ (console.log of CSS 😉 ]
    Граница должна быть известна, так как она помогает в отладке CSS, а также может придать хороший вид элементам.

  3. Свойства текста
    Очень полезны для создания правильно выровненных текстов и управления их оформлением.

  4. Фоны
    Фоны могут иметь изображения или цвета, и на основе этого вы можете выбрать любую вещь для фона.

Итак, это основные свойства CSS, которые помогут вам создать свою первую стильную и красивую веб-страницу.
До сих пор мы сделали красивую веб-страницу, которая очень привлекательна, но мы хотим красоты с мозгом, а наш мозг — это JavaScript.

3.JavaScript: является мозгом для веб-страниц, поскольку JavaScript обладает логикой и может отдавать команды веб-элементам.
В настоящее время JavaScript работает везде — от браузеров до серверов.
Вот список некоторых основных концепций JavaScript, которые будут полезны для начала работы с React.

  1. Все концепции ES6 Я написал подробный блог о концепциях ES6, который вы можете прочитать здесь

2.JS Массивы
Массивы — это сердце в JS, поскольку все, что вы будете делать в JS, связано с данными, то в основном вы будете иметь дело с массивами.

3.JS Объекты
Объекты также используются для хранения данных, но в отличие от массивов, они имеют ключ и значения для доступа к данным, в то время как в массивах для этого нужны индексы.

  1. Чистый код

Да, это очень важно, но даже если вы не знаете, просто запомните две вещи
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.

Я надеюсь, что если вы получили некоторые знания из этой статьи, то поделитесь ими.

Оцените статью
devanswers.ru
Добавить комментарий