Примечание. Эта статья - одна из многих частей курса по ReactJS. Если вы не читали часть 1, я предлагаю проверить ее перед тем, как читать часть 2.

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

ReactJS написан внутри файлов JavaScript (.js) с использованием уникальной разметки JSX. JSX позволяет разработчикам React писать HTML на JavaScript. Это полностью устраняет необходимость в методе document.getElementById (), который используется в VanillaJS для получения HTML-элементов для доступа или изменения. По моему личному мнению, в этом тоже есть некоторая красота. Это слишком упрощенно, но в то же время мощно. Мы будем писать наш JSX в том, что React называет Компонентами.

Компоненты - это строительные блоки вашего кода React, которые представляют элемент или даже набор элементов. Следуя стандартным методам разработки, мы продемонстрируем наше первое использование Component JSX на простом примере Hello World. Для тех, кто не знает, что такое Hello World, это обычно первые разработчики программ, которые учатся писать на большинстве языков программирования. React не должен быть исключением.

Начнем с нашего первого примера. Однако прежде чем мы начнем, нам нужно обсудить, как установить ReactJS. ReactJS может запутать новых разработчиков при установке или тех, кто привык писать код в XCode или Android Studio / Eclipse. В отличие от этих платформ, ReactJS устанавливает свои файлы через командную строку (терминал в Mac OSX).

Прежде чем мы начнем, вам нужно скачать Узел. Нам нужен Node, потому что мы будем загружать наш шаблонный код React с помощью инструмента Node npm. Введите в командную строку следующее.

Следующий код устанавливает пакет npm create-response-app как глобальную зависимость в нашей системе. Оттуда мы запускаем средство запуска пакетов npx, чтобы создать шаблонное приложение ReactJS с именем hello-world. После завершения установки мы используем команду cd для изменения каталогов в нашу новую папку проекта hello-world и, наконец, вызываем npm start, чтобы запустить локальный сервер ReactJS.

После того, как все это будет сделано, вы должны увидеть стандартное приложение ReactJS в браузере на порту localhost (обычно это 3000).

Итак, теперь, когда у нас есть рабочая страница, как нам сделать это и сделать наш веб-сайт? Что ж, сначала нам нужно скачать текстовый редактор. Я лично добился большого успеха с Текстовым редактором Atom, который поддерживается GitHub, но вы можете использовать любой редактор, который вам нравится.

В Atom перейдите в меню «Файл» - ›Открыть… и выберите папку проекта hello-world, которую мы только что создали.

Зайдите в App.js в папке src, выделите весь код и удалите его. Здесь мы будем писать код для нашего первого примера.

Давайте разберем то, что я только что написал. В первой строке мы просто импортируем зависимости, которые нам нужно использовать в нашем компоненте. Нам нужен React, чтобы мы могли писать JSX, и нам нужно свойство Component, чтобы иметь возможность сделать наш новый класс HelloWorld его дочерним (для тех из вас, кто знает объектно-ориентированное программирование, наш класс HelloWorld будет производным классом Component ).

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

Имея это в виду, мы определим наш Component с помощью class HelloWorld extends Component и включим метод render (). Метод render () требуется для всех компонентов, даже если вы не хотите ничего рендерить.

Примечание. Если вы не хотите ничего отображать в своем компоненте, вы должны вернуть (null) из вашего метода render ().

Внутри нашего метода render () находится сердце нашего Компонента. Он должен содержать оператор возврата, а также может содержать другой код JavaScript, если вы того пожелаете, но это не обязательно. В нашем операторе возврата в игру вступает JSX. В этом примере у нас есть только один тег Component, тег p, который отображает элемент абзаца HTML. Для тех, кто раньше использовал HTML, это должно выглядеть очень похоже. Мы помещаем наш текст HelloWorld внутри тегов, чтобы отображать слова на экране.

Примечание. Если бы у нас было два или более тега, нам нужно было бы заключить их во внешний тег div, чтобы в конечном итоге мы возвращали один элемент, будь то отдельный элемент или набор элементов. содержится в элементе div. Почти все реальные компоненты React будут иметь внутренние теги, заключенные в один внешний блок.

Наконец, в строке 11 у нас есть оператор экспорта. Поскольку мы экспортируем только компонент из нашего файла App.js, мы можем использовать ключевое слово default, чтобы сообщить JavaScript, что когда мы импортируем компонент из App.js, это будет единственный объект, экспортируемый из приложения. .js.

Это было много объяснений для небольшого примера кода, однако очень важно понимать основы ReactJS. Если вы запутались на этом этапе, я настоятельно рекомендую проверить документацию ReactJS или опубликовать комментарий в разделе ниже.

Вот и все. Вы завершили свой первый пример кода на ReactJS. В следующей части мы поговорим о Реквизите. А пока!

Если вам понравилась эта часть, не забудьте хлопнуть в ладоши, а если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии ниже!