Введение в Реакт

Что такое Реакт?

React — это библиотека JavaScript для создания пользовательских интерфейсов. Он был разработан Facebook и первоначально выпущен в марте 2013 года. React позволяет создавать пользовательский интерфейс (пользовательский интерфейс) с использованием повторно используемых компонентов.

Поддержка браузера

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

Знакомство с JSX

JSX (JavaScript XML) — это расширение синтаксиса для JavaScript. JSX — это разметка, позволяющая создавать приложения React с использованием HTML-подобного синтаксиса, но не HTML. JSX предварительно обрабатывается в JavaScript для использования в браузере.

Установка

Самый простой способ начать использовать React — использовать Создать приложение React. Это предварительно сконфигурирует все, что вам нужно, чтобы начать создавать приложение React и настроить среду разработки.

Перед использованием Create React App вам необходимо установить Node версии 6 (или более поздней).

https://nodejs.org/ru/

Откройте терминал и введите следующие команды. Это установит Create React App и создаст новое приложение React с именем my-app:

$ npm install create-react-app
$ create-react-app my-app
$ cd my-app
$ npm start

Теперь также должны быть установлены и предварительно настроены Webpack и Babel, что позволит вам использовать синтаксис ES6 в вашем приложении React.

Ваше приложение должно быть видно в браузере.

Структура файла

В каталоге/папке my-app вы найдете следующую файловую структуру, которая была создана:

node_modules
public /
   favicon
   index.html
   manifest.json
src /
   App.css
   App.js
   App.test
   index.css
   index.js
   logo.svg
   registerServiceWorker.js
.gitignore
package.json
README.md

Для простоты несколько файлов будут удалены, а внутри src/ будет создан каталог components/, где можно найти ваши компоненты React.

Теперь структура файла должна выглядеть так:

node_modules
public /
   favicon
   index.html
   manifest.json
src /    
index.js   
    components/
        App.js
.gitignore
package.json
README.md

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

Давайте обновим код

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

Обновите файл index.html, в котором будет отображаться ваше приложение React.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

Если вы откроете HTML-файл без запуска React, вы увидите пустую страницу. Приложение React отображается в вашем HTML-файле с использованием корневого узла DOM. Приложения, созданные с использованием React, обычно имеют один корневой узел DOM.

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

Файл App.js должен выглядеть так, как показано в примере ниже:

// src/components/App.js
import React, { Component } from 'react'
class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}
export default App

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

Наконец, обновите файл index.js:

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
ReactDOM.render(
  <App />, 
  document.getElementById('root')
)

Первые несколько строк файла index.js должны импортировать пакеты React и ReactDOM в ваше приложение.

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

Чтобы импортировать компонент App в ваше приложение, в файл index.js добавляется следующая строка кода:

import App from './components/App'

Компонент и корневой узел DOM передаются в ReactDOM.render, чтобы компонент отображался в вашем приложении React.

ReactDOM.render(
  <App />, 
  document.getElementById('root')
)

Вы могли заметить, что мы удалили все точки с запятой из нашего JavaScript. В ES6 вполне допустимо удалять точки с запятой, если вы хотите это сделать.

Теперь вы должны увидеть Hello World в своем браузере.

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

Самый простой способ определить компонент в React — написать функцию JavaScript. Этот тип функции (ниже) называется функциональным компонентом, потому что это функции JavaScript.

function App() {
    return <h1>Hello World</h1>

Также можно использовать стрелочные функции ES6. Обратите внимание, что оператор return больше не используется.

const App = () =>
    <h1>Hello World</h1>

В качестве альтернативы вы можете использовать класс ES6 для определения компонента, как мы делали ранее в нашем примере кода.

class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello World</h1>
            </div>
        )
    }
}

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

Обновите файл App.js, чтобы использовать функцию стрелки ES6. Ваш файл должен выглядеть, как в примере ниже:

// src/components/App.js
import React from 'react'
const App = () =>
   <h1>Hello World</h1>
export default App

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

Компоненты и реквизит

При работе с React вы можете встретить термин «props». Это сокращение от свойства. Свойства передаются в компоненты подобно тому, как аргумент передается в функцию. Они также являются неизменяемыми, то есть не могут быть изменены.

В компоненте App обновите код, чтобы добавить аргумент объекта props в функцию.

// src/components/App.js
import React from 'react'
const App = (props) =>
   <h1>Hello {props.name}</h1>
export default App

Внутри функции вы можете увидеть:

<h1>Hello {props.name}</h1>

Именно здесь наши данные в нашей опоре будут выводиться с использованием выражения JSX. Чтобы передать значение в наш реквизит, откройте файл index.js и обновите код.

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
ReactDOM.render(
   <App name="Dan" />, 
   document.getElementById('root')
)

Подводя итог, мы передаем значение «Dan» в реквизит name в компоненте приложения. Это передается в объект prop компонента приложения (внутри функции, как и аргумент функции) и отображается в {props.name}.

Добавление компонентов

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

Начните с открытия нового файла с именем Content и добавления следующего кода:

// src/components/Content.js
import React from 'react'
const Content = (props) =>
   <p>I am the {props.message} Content component.</p>
export default Content

Этот файл следует сохранить как Content.js в каталоге src/components/.

Ваша файловая структура должна выглядеть так:

node_modules
public /
   favicon
   index.html
   manifest.json
src /    
index.js   
    components/
        App.js
        Content.js
.gitignore
package.json
README.md

Теперь, когда компонент создан, его необходимо импортировать, чтобы его можно было использовать. Откройте компонент App (App.js) и добавьте следующий оператор импорта:

import Content from './Content'

После импорта добавьте компонент Content в функцию компонента App. Как видите, мы передаем сообщение в компонент Content с помощью реквизита:

const App = (props) =>
   <h1>Hello {props.name}</h1>
   <Content message='first' />

Добавьте второй компонент Content под первым:

const App = (props) =>
   <h1>Hello {props.name}</h1>
   <Content message='first' />
   <Content message='second' />

Как вы могли заметить, React отображает сообщение об ошибке в вашем браузере и терминале:

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag

Чтобы исправить это, нам нужно обернуть элемент вокруг наших компонентов внутри функции. Код компонента App теперь должен выглядеть следующим образом:

// src/components/App.js
import React from 'react'
import Content from './Content'
const App = (props) =>
   <div>
      <h1>Hello {props.name}</h1>
      <Content message='first' />
      <Content message='second' />
  </div>
export default App

Теперь ваше приложение React должно выглядеть так:

Это завершает очень простое введение в React с целью добавления дополнительных деталей в следующих постах.