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

2

Начало работы с реакт

Реакт это библиотека javascript, которая формирует html, который будет показан пользователю в браузере. Когда мы пишем на реакте, мы пишем индивидуальные компоненты и views. Компоненты это куски кода, которые производят html. Т.е. когда будете думать про компонент или view, то думайте о чем-то что производит html. Когда пишем на реакте, то мы пишем множество разных компонентов и мы вкладываем компоненты один в другого в разных вариациях, чтобы сделать по настоящему сложные приложения простыми.

Компонент — это коллекция javascript функций, которые производят html.

Начнем с нашего первого компонента. Для начала создадим компонент, а затем нам нужно будет как то поместить его в DOM. Мы будем делать много компонентов, но они не будет автоматически вставляться в DOM. Нам нужно будет как бы говорить: «Реакт, пожалуйста, положи этот компонент в ДОМ».
Создадим папку src, а в ней создадим файл index.js.
И запишем туда

const App = function () {
    return <div>Hi</div>;
}

Эта конструкция может показаться странной, но на самом деле это JSX, синтаксический сахар над js. jsx выглядит как простой html но он не интерпретируется браузером. Он должен пройти процес транспиляции. Теперь нам нужно попробовать вывести данный компонент на странице.

Для начала нам нужно подключить модуль реакта.

import React from 'react';

Сам реакт делится на две библиотеки.
Первая react — знает как работать с компонентами реакта. Знает как рендерить их, как их совмещать.
Втора react DOM — которая позволяет вставлять компоненты в DOM.

Т.е. чтобы вставить наш компонент на страницу, нам нужно импортировать также и ReactDOM.

import ReactDOM from 'react-dom';

Когда мы создаем компонент, то мы создаем класс компонента. Тип компонента.

const App = () => {
    return <div>Hi</div>;
}

В данном случае, у нас может быть много экземпляров App.
App это класс, а не экземпляр. Можно думать о нем как о фабрике, которая производит экземпляры компонентов, которые будут отрендерены в ДОМе.

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

Нам, для того чтобы вставить наш компонент в ДОМ, сначала нужно получить его экземпляр.
В jsx очень легко получить экземпляр класса. Всё что нам нужно указать в теге название класса, экземпляр которого мы хотим зарендерить:

<App></App>

Но если внутри тэга ничего не стоит, можно использовать синтаксис самозакрывающегося тэга

<App />

Теперь вставим наш экземпляр на страницу, для этого воспользуемся методом render модуля ReactDOM, где первым параметром укажем наш экземпляр компонента, а вторым, ссылку на элемент ДОМ, куда мы хотим наш компонент вставить.

ReactDOM.render(<App />, document.querySelector('.container'));

Leave A Reply

Your email address will not be published.