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

На сегодняшнем уроке я в основном только что узнал эти три вещи

  1. настроить среду разработки
  2. место для рендеринга
  3. как отображать реакцию на DOM.

Чтобы настроить среду разработки, я использовал теги сценария, чтобы добавить библиотеку React, библиотеку ReactDOM и библиотеку Babel.

<!-- REACT LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<!-- REACT DOM LIBRARY -->
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<!-- BABEL LIBRARY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

Это дает нам доступ к библиотекам для использования в остальной части кода.

Причина, по которой у нас есть React и ReactDOM как две разные библиотеки, заключается в том, что есть случаи использования, когда рендеринг в DOM не требуется для мобильной разработки, поэтому библиотека разделена, чтобы люди могли принимать решения в зависимости от проекта, над которым они работают. Я еще не совсем понимаю это, но я думаю, что получу больше контекста позже. Но пока я просто включу их обоих. Babel — это то, как мы используем преимущества помимо ES5 и работаем с чем-то под названием JSX, которое мы будем использовать с React. Я снова узнаю больше о Вавилоне позже.

Во-первых, я определил место в теле HTML для вставки содержимого реакции, создав div и присвоив ему идентификатор «приложение». С текстом «React еще не отрендерился». Если этот текст отображается, я знаю, что по какой-то причине React не отобразился.

<div id="app">React has not rendered yet</div>

Затем я создал тег script с типом text/babel

<script type="text/babel">

А затем я отрендерил реакцию на DOM. Для этого я использовал метод. Этот метод принимает два аргумента. Что и где.

Чтобы вызвать метод, вы идете так

ReactDOM.render()

Затем внутри этого я помещу что, а затем где. Они разделены запятой. Что мы хотим вывести на экран. В приведенном ниже примере это заголовок Hello World. Где мы хотим его разместить в DOM. Это делается с помощью метода document.getElementById и нацеливания на идентификатор «приложения», который я создал выше.

ReactDOM.render(
//REACT WHAT - JSX
<h1>Hello World</h1>,
//REACT WHERE - DIV WITH ID OF "APP"
document.getElementById("app")
);

Кажется, на данный момент в этом достаточно смысла. Несомненно, скоро все станет намного сложнее. Но на сегодня хватит, завтра….