React позволяет вам разрабатывать приложение, создавая повторно используемые компоненты.

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

Компонент React — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид.

Типы компонентов React:–

  1. Компонент класса (также называемый компонентом с отслеживанием состояния)
  2. Функциональный компонент (также называемый компонентом без сохранения состояния)

После появления React Hooks написание функциональных компонентов стало стандартным способом написания компонентов React в современных приложениях. Таким образом, здесь мы сосредоточимся только на функциональных компонентах.

Функциональные компоненты-

  • Это простая функция JavaScript, которая принимает свойства необязательный аргумент и возвращает элемент React.
  • Существует два распространенных способа определения функционального компонентав React: с помощью ключевого слова const или с помощью функция ключевое слово.
const MyComponent = () => {
 return (
 <div>
 <h1>Hello, World!</h1>
 </div>
 );
};
function MyComponent() {
 return (
 <div>
 <h1>Hello, World!</h1>
 </div>
 );
}

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

Разница между двумя подходами: –

  • Функциональные компоненты, определенные с помощью const, определяются как стрелочные функции, а те, которые определяются с помощью function, являются обычными функциями. Стрелочные функции имеют некоторые отличия в поведении и синтаксисе по сравнению с обычными функциями.
  • Еще одно отличие состоит в том, что компоненты, определенные с помощью const, могут использовать преимущества некоторых функций ES6, таких как деструктуризация и значения параметров по умолчанию, что может сделать код более кратким и выразительным. . Например:
const MyComponent = ({ name = “World” }) => {
 return (
 <div>
 <h1>Hello, {name}!</h1>
 </div>
 );
};

Это определяет функциональный компонент, который принимает свойство name и по умолчанию имеет значение «World», если свойство не указано. Этот синтаксис невозможен с обычным функциональным компонентом.

Как вложить компонент в другой компонент?

export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyComponent />
</div>
);
}

Совет💡:

React способствует повторному использованию кода, поэтому рекомендуется разбивать ваши компоненты на отдельные файлы. Поместите свой код в новый файл «.js», как показано ниже:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Понимание React JSX -

  • JSX расшифровывается как JavaScript XML и позволяет нам писать HTML в React.
  • JSX преобразует теги HTML в элементы реакции.
  • Вы должны закрыть такие теги, как <br />.
function MyPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello <br />How do you do?</p>
    </>
  );
}
  • Компонент React не может возвращать несколько тегов JSX. Они должны быть заключены в общий родитель, например <div>...</div> или пустая оболочка <>...</>.
  • В JSX фигурные скобки «{}» используются для встраивания выражений Javascript в разметку.
import React from 'react';

function App() {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Welcome to my app, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

export default App;
const user = {
 name: ‘Bob’,
 age: 50,
};

export default function Profile() {
 return (
 <>
 <h1>{user.name}</h1>
 </>
 );
}

Пример рендеринга массива:

import React from 'react';

function List(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

export default List;

Условный рендеринг в реакции:

Существует несколько способов реализации условного рендеринга в зависимости от варианта использования:

  1. Инструкции If-Else –
let content;
if (LoggedIn) {
  content = <UserDashboard />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

2.Тернарный оператор. Его можно использовать для достижения того же результата, что и оператор if-else, но с более коротким синтаксисом.

return(
<>
{loggedIn ? <UserDashboard /> : <LoginForm />}
</>
);

3. Логический && Оператор. Этот подход хорошо работает, когда вы хотите визуализировать компонент, только если выполняется условие.

{loggedIn && <UserDashboard />}

4. Переключить операторы –отображение различных компонентов на основе значения.

<div>
  {switch (page) {
    case 'home':
      return <HomePage />;
    case 'about':
      return <AboutPage />;
    case 'contact':
      return <ContactPage />;
    default:
      return <NotFoundPage />;
  }}
</div>