Reactjs программирование компоненты и элементы

Данная страница позволит вам сформировать минимальное понимание, что из себя представляет построение интерфейса посредством React JS. Тема на данный момент крайне актуальна, так как в результате исследования рынка труда по Frontend программированию мы заметили, что специалисты, обладающие компетенциями использования React JS и Redux являются крайне востребованы всеми топовыми компаниями связанные с темой IT и Digital.

 

Для того чтобы начать обсуждать что такое React, нужно для начала изучить такие темы как:

 

HTML

JavaScript

CSS

 

Если вы еще не знаете, что означают данные термины предлагаю с ними познакомиться.

 

И так если вы уже знаете выше описанные языки, начнем с того в чем заключается Концепция React JS:

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

 

1. Первое в React’е это Элементы — В React HTML элементы представляют JavaScript объекты. Однако они не отражаются в браузере. Они являются описанием DOM-элементов, например: section, h1, div.

 

2. Второе в React’e является Компоненты — это элементы React, их пишет разработчик. В интерфейсе пользователя ими являются части, содержание которых имеет в себе самостоятельную схему и свои функции. Например, такие как Navigation Bar, RepostButton, или CTA.

JSX — Метод формирования элементов и компонентов React.

 

Примером React-элемента, написанный на JSX:

<h1>Iloveyou</h1>

Как написать этот элемент на JavaScript:

React.DOM.h1(null, 'Iloveyou');

Разница заметна? Для JSX не нужно столько же размера кода так как, JSX преобразуется в JavaScript до запуска в браузере.

 

3. Третье в React’е можно обозначить Virtual DOM — древо React в виде элементов на JavaScript. React преобразует Virtual DOM в браузере, таким образом интерфейс пользователя показывается в браузере. React следит за тем что расположено в Virtual DOM и сам React производит преобразование DOM в браузере так, чтоб он был соответствующим виртуальному.

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

Кстати мы как раз сейчас ищем Frontend разработчика на React