Введение в Reactjs в двух словах

Если вы являетесь или хотите стать разработчиком программного обеспечения, весьма вероятно, что вы хотя бы раз слышали о Reactjs, учитывая его огромную популярность в разработке программного обеспечения. В настоящее время это самая востребованная библиотека на рынке труда, с большим сообществом и большим разнообразием курсов, ресурсов и материалов, направленных на то, чтобы помочь вам изучить Reactjs. Итак, если ваша цель — изучить эту библиотеку, в этой серии постов мы шаг за шагом и постепенно изучим, как создавать веб-интерфейсы с помощью reactjs на простых примерах и проектах.

Требования

Чтобы начать изучать ReactJS, вам нужно знать только html, css и vanilla javascript. Не обязательно быть суперэкспертом в какой-либо из этих технологий, однако рекомендуется иметь прочную основу в каждой из них.

Первые шаги в реакции

Чтобы быстро начать использовать reactjs в простом html-файле, давайте воспользуемся тремя ссылками cdn для react, react-dom и babel для нашего проекта.

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

<div class="root" id="root"></div>

<script type="text/babel">
</script>

Внутри нашего javascript мы должны получить наш корневой узел html и создать наш корень реакции.

<div class="root" id="root"></div>

<script type="text/babel">

  const rootNode = document.getElementById('root');
  const root = ReactDOM.createRoot(rootNode);

  
</script>

Здесь мы начинаем видеть некоторые преимущества reactjs в действии, и первое — это его разметка в javascript, называемая jsx, это особенность реакции, которая позволяет вам писать html-код прямо в javascript, это облегчает объединение переменных внутри наших html-узлов, просто добавляя их в фигурные скобки, что позволяет нам писать код чище. Чтобы отобразить JSX в наш html, нам просто нужно выполнить метод рендеринга в корневом объекте реакции.

<div class="root" id="root"></div>
<script type="text/babel">

  const rootNode = document.getElementById('root');
  const root = ReactDOM.createRoot(rootNode);

  const name = 'Ander'

  const h1 = <h1>Hello {name}</h1>;
  
  root.render(h1);
</script>

Мы могли бы даже объединить переменные с помощью JSX, чтобы составить более сложные переменные.

<div class="root" id="root"></div>

<script type="text/babel">  
  const rootNode = document.getElementById('root');
  const root = ReactDOM.createRoot(rootNode);
    
  const sayHello = () => alert("Hello world")
  
  const message = <div>Hey!, this is easy</div>;
    
  const button = <button onClick={sayHello}>Do something</button>;
    
  const app =
    <div>
      {message}
      {button}
    </div>
  
  root.render(app);
</script>

Переменные, содержащие простой JSX, называются литералами JSX, но общий способ написания кода реагирования — через функции, которые возвращают JXS, эти функции называются компонентами и являются основой программирования ReactJS.

Реагировать компоненты

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

// Inside our script

const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
  
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

function Introduce({name}){
 return <div>My name is {name}</div>
}

const app = 
 <div>
  <Greeting name="world"/>
  <Introduce name="Ander"/>
 </div>

root.render(app);

Reactjs в приложениях nodejs

Чтобы начать использовать reactjs в приложении вместе с nodejs, нам понадобится только цепочка инструментов, в этой серии руководств мы будем использовать vitejs. Нам просто нужно установить nodejs и npm на нашу машину.

npm create vite@latest
✔ Project name: … project
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Теперь vite создаст для нас простую файловую структуру для запуска нашего проекта:

node_modules/
public/
  vite.svg
src/
  assets/
    react.svg   
  App.css
  App.jsx
  index.css
  main.jsx
.gitignore
index.html
package-lock.json
package.json
vite.config.js

Чтобы понять, как работает каждый из этих файлов, давайте удалим все файлы src и общие папки и оставим только main.jsx в папке src.

node_modules/
src/
  main.jsx
.gitignore
index.html
package-lock.json
package.json
vite.config.js

Теперь, после установки зависимостей и запуска nmp run dev, откройте ваш локальный хост в браузере и введите наш файл main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'

function App(){
  return (
    <h1>Hello world</h1>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)

Это наше первое приложение в ReactJS с использованием Vitejs. Теперь давайте переместим наш основной компонент в отдельный файл с именем App.jsx, чтобы гарантировать, что если наш основной компонент будет расти, это не затруднит чтение нашего кода.

//App.jsx
export function App(){
  return (
    <h1>Hello world</h1>
  )
}
//main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {App} from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)

Таким образом, не имеет значения, насколько сильно растет наш компонент приложения, наш файл main.jsx будет легко читаться.

Небольшие подробности о jsx

До сих пор Jsx был очень простым, он выглядит так, как будто он идентичен html, но это не так, потому что jsx делает что-то немного другое, а также имеет некоторые правила, такие как следующие:

• Функция не может возвращать несколько html-узлов, все они должны быть заключены в родительский узел, например <div>...</div> или пустая оболочка <>...</>.
• Все пустые элементы должны быть закрыты косой чертой, такой как ‹br/›, ‹img/› или ‹hr/›.
• Ни объекты, ни логические значения не могут быть объединены в узлы html.
• Атрибут класса заменяется className, например: <img src="" className="avatar" />.

Стили в reactjs

Самый простой способ стилизовать ваше приложение — добавить тег ссылки в ваш HTML, но мы также можем добавить наши стили, например, с помощью import './styles.ccs' в нашем main.jsx; мы создаем файл с именем styles.css в папке src.

node_modules/
src/
  main.jsx
  App.jsx
  styles.css
.gitignore
index.html
package-lock.json
package.json
vite.config.js
//main.jsx
import './styles.css'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
)
/* styles.css */

body,html{
 background-color: #21232A;
 color: white;
 font-family: Helvetica, Arial;
 font-size: 5vw;
 display: flex;
 height: 100vh;
 justify-content: center;
 align-items: center;
}

Теперь Vite применил наши стили.

Связь между компонентами

Способ отправки данных нашим функциональным компонентам — через параметры этой функции, затем, когда мы используем наш компонент, мы передаем аргументы, как если бы они были атрибутами элемента html void с именем нашего функционального компонента:

//App.jsx
export function App({name, age}){
  return (
    <h1>Hello my name is {name} and I'm {age} </h1>
  )
}
//main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { App } from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App name="Ander" age={22} />
  </React.StrictMode>
)

Мы можем легко установить строки для аргументов, переданных нашим функциональным компонентам, но для других типов данных нам нужно передать их в фигурных скобках.

Ввод аргументов с помощью propTypes

Если нам нужно установить определенный тип для аргументов «имя и возраст» в приведенном выше примере, мы могли бы использовать propTypes в качестве метода установки нашего компонента, мы должны установить этот метод как объект, давайте посмотрим пример;

// main.jsx

import PropTypes from 'prop-types'

export function App({name, age}){
  return (
    <h1>Hello my name is {name} and I'm {age} </h1>
  )
}

App.propTypes = {
  name:PropTypes.string,
  age:PropTypes.number
}

Если нам нужно установить какой-либо аргумент по мере необходимости, мы также можем сделать это с помощью propTypes:

App.propTypes = {
  name:PropTypes.string.isRequired,
  age:PropTypes.number.isRequired
}

Но что, если мы хотим установить значение по умолчанию для наших деструктурированных аргументов? Это можно легко сделать с помощью установщика defaultProps после нашего компонента:

//main.jsx

//App component

App.defaultProps = {
  name: "Ander",
  age:22
}

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

Реагирование на события

События обрабатываются в реакции как простые атрибуты событий html, но с некоторыми отличиями; наиболее примечательным является то, что мы должны писать атрибуты события в верблюжьем регистре и передавать обработчик события как ссылку на функцию в фигурных скобках. Пример:

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

Добавление интерактивности

Мы научились создавать статический контент, но если мы хотим добавить некоторые интерактивные элементы, которые обновляют экран при нажатии кнопки, нам нужно понять, как реакция отображает данные нашего приложения в документе. React не будет обновлять html нашего компонента, если только он не является частью состояния компонента. чтобы сделать наши данные частью состояния компонента, нам нужно использовать функцию, которая является частью известных хуков реакции, эта функция является хуком useState, и ее использование относительно просто, в качестве параметра она получает данные для сохранения в состояние и возвращает массив с начальным значением состояния и функцией, которую мы будем использовать для обновления состояния. Пример:

import { useState } from 'react';

export default function App() {
  return (
    <div>
      <h1>Counter</h1>
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

Каждый раз, когда мы нажимаем кнопку, функция setCount обновляет переменную count и отображает изменение на экране.

На сегодня это все, в следующей части мы увидим хуки в React. Если вам нравится этот контент, вы можете поставить мне лайк и комментарий.

Спасибо за прочтение, подписывайтесь на меня, чтобы узнать больше

Ссылки
[1] https://beta.reactjs.org/learn