React — одна из самых популярных технологий в веб-разработке. Многие из лучших мировых фирм используют ее. Этот пост предназначен для новичков в области веб-разработки, которым чужда эта библиотека.

Что такое React? Почему именно React?

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

Начало работы с react

Чтобы начать работу с react, вам сначала понадобится инструмент быстрой настройки. Инструмент, который обеспечит вас необходимой конфигурацией для вашего приложения react. Вы можете выбрать один из множества различных инструментов, но наиболее популярными являются два.

• create-react-app -> официальный и медленный
• vite -> неофициальный и быстрый.

Еще более дружелюбными к новичкам являются онлайн-редакторы кода, такие как stackblitz, codesandbox и другие.

Я предпочитаю codesandbox, здесь вы можете зарегистрироваться и начать рисовать, чтобы почувствовать его.

Когда вы запустите новый шаблон react, вы увидите что-то вроде этого.

Структура файлов выглядит следующим образом

|-public
|—-index.html
|-src
|—-App.js
|—-index.js
|—-styles.css
|-package.json

Public содержит общедоступные вещи, как вы можете видеть, функция visible экспортируется, затем index.js импортирует ее и погружает в div. Все приложение в одном div!!!

Итак, src (сокращение от source ) — это место, где происходит настоящая магия. Все ваши таблицы стилей, код и фактические вещи.

Дудлинг

Как вы можете видеть, над функцией есть что-то вроде html, функция на самом деле возвращает html или, точнее, jsx.

Jsx или Javascript XML (что-то вроде разметки Javscript) — это фактический код javascript, который вы пишете, но с помощью babel он преобразуется в фактический javascript (тот, который вы видите в статических файлах. В нем вы можете иметь динамические свойства и множество других суперспособностей. Попробуйте изменить код в функции App на следующий.

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Да, на самом деле вы можете просто вставлять туда значения. Просто раскройте фигурные скобки и бросьте туда все, что нужно.

Более того, вы можете присвоить jsx как значение переменной. Давайте, сделайте что-нибудь с этим.

Стилизация

Вы можете дать своим элементам имя className (не class, потому что это зарезервированное ключевое слово в javascript).

export default function App() {
  const hi = "hi alex"
  return (
    <div className="App">
      <h1>{hi}</h1>
      <h2 className="boring">
          Start editing to see some magic happen!
      </h2>
    </div>
  );
}

Дайте скуке стиль в styles.css Вы видите, что он импортирован сверху; это как раз то, что нужно! Импортируйте таблицы стилей.

Заключение

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