Сегодня был мой первый шаг в изучении React, который также является последним разделом этого курса Udemy.
На сегодняшнем уроке я в основном только что узнал эти три вещи
- настроить среду разработки
- место для рендеринга
- как отображать реакцию на 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") );
Кажется, на данный момент в этом достаточно смысла. Несомненно, скоро все станет намного сложнее. Но на сегодня хватит, завтра….