Изучаем JavaScript

Highlight Устанавливаем npm install react-highlight.js Подключаем стили <link rel="stylesheet" href="https://highlightjs.org/static/demo/styles/railscasts.css" /> Подключаем к компоненту React import Highlight from "react-highlight.js"; Код пишем внутри шаблонной строки в фигурных скобках <Highlight language="javascript">  {`здесь код`} </Highlight> Результат: Highlight подсвечивает только код, который прописан внутри компонента. Подсвечивать код на лету она не умеет AceEditor Устанавливаем две зависимости  npm install react-ace ace-builds  npm install brace Красивые темы tomorrow_night тёмная и chrome светлая Стилизуем (стили пишем внутри компонента) #ace-editor {   width: 100% !important;   height: 300px !important;   font-size: 18px;   padding: 20px !important;   border-radius: 10px;   margin-bottom: 20px; } .ace_scroller {   width: 100% !importa

Учебник https://learn-reactjs.ru/tutorial Видеокурс от Владилена Минима https://www.youtube.com/watch?v=91EwM6zgaZw https://www.youtube.com/watch?v=jajHHNKibwg https://www.youtube.com/watch?v=QFwc4kgQbCk https://www.youtube.com/watch?v=dijcdmk802Y https://www.youtube.com/watch?v=GvmkJbnGukM https://www.youtube.com/watch?v=Bf_u59DwRMw https://www.youtube.com/watch?v=EFnfinqz_Pc https://www.youtube.com/watch?v=h4OuoaPfyFA https://www.youtube.com/watch?v=06z0OJA8meg исходники https://blog.myrusakov.ru/freereactjs.html Источник: Полноценный онлайн курс, в котором вы вживую увидите, как создаются мощные JavaScript приложения с полного нуля Автор видео: Владилен Минин. Формат видео: *.mp4. Продолжительность: 01:21:11 Дополнительно: Для данного курса вам потребуется установить на компьютер программу Node JS .

Хуки появились в реакте в феврале 2019 года начиная с версии 16.8 и быстро стали популярными. Их преимущества: - позволяют отказаться от классов, которые чуть сложнее в реализации и чуть медленнее в быстродействии - в некоторых случаях позволяют сделать код проще - избавляемся от this, которое в некоторых случаях может работать с ошибкой (вместо пользователя Боб письмо получит Алиса, что недопустимо) Хуки позволяют в функциональных компонентах хранить state, иметь доступ  к жизненному циклу компонентов, использовать контекст. Если хуки использовать правильно, они существенно упрощают структуру приложения. Чтобы использовать хуки, их нужно импортировать из пакета react import React, { useState } from 'react' ; Пример кода с хуками import React, { useState } from "react"; import ReactDOM from "react-dom"; const HookSwitcher = () => {   const [color, setColor] = useState("gray");   const setRed = () => setColor("red");

Пока загружаются данные с сервера, страница с значком картинки, которая ещё не загрузилась, выглядит не очень привлекательно. Хорошее приложение не отображает элементы для которых пока нет данных. Для таких случаев используется индикатор загрузки. Подобрать и настроить подходящий индикатор можно на сайте  https://loading.io/ Создаём компонент spinner, копируем в него полученный html и css код, проверяем как спиннер смотрится на месте элемента, который он будет временно заменять. Логика индикатора загрузки В стейт компонента random-planet добавляем свойство loading и присваиваем ему значение true, потому что как только компонент добавляется, он тут же начинает загружаться. В функцию  render() компонента random-planet добавляем  условие          if(loading) {       return (<Spinner />)     } Узнать, что изображение загрузилось, позволит функция onPlanetLoaded   onPlanetLoaded = (planet) => {     this.setState({        planet,       loading: false     })

Когда определились с источником данных, выясним, какие компоненты нам понадобятся Приложение будет выглядеть приблизительно так Соответственно, нам нужен будет хедер с логотипом и вкладками люди-планеты-корабли, блок "случайная планета" и три похожих блока с описанием людей, планет и кораблей Получение данных с сервера Рассмотрим компонент random-planet, который должен получать от сервера данные о планете и раз в несколько секунд обновлять их Импортируем файл swapi-service.js import SwapiService from '../../services/swapi-service'; Внутри класса RandomPlanet  инициализируем swapiService swapiService = new SwapiService(); Создаём стейт   state = {     id: null,     name: null,      population: null,     rotationPeriod: null,      diameter: null   }; Создаём метод updatePlanet(), который будет возвращать данные о планете по её id updatePlanet() {     const id = 5;     this.swapiService       .getPlanet(id)       .then(this.onPlan

Продолжение курса Юрия Бура React + Redux - Профессиональная Разработка. Часть 6. Создаём пустой проект $ npx create-react-app star-db Идём на сайт  https://bootswatch.com/  выбираем там тему darkly для будущего проекта. Нажимаем под темой кнопку download, скачивается файл bootstrap.min.css Подключаем его в файл index.html в папке public Информацию для отображения в приложении мы будем получать от API  https://swapi.co/ Для получения данных могут использоваться XML Http Request - используется 20 лет, немного устарел Fetch API Кроме того, есть еще несколько библиотек, которые умеют работать с сервером тоже и используются если создаётся не только фронтенд, а полное full стек приложение и одного только браузерного API будет недостаточно Получим данные про Люка Скайуокера, персону номер один во вселенной звёздных войн function getData() {    const url = 'https://swapi.co/api/people/1/';   fetch(url)     .then(res => res.json())     .then(data => { 

Демо  https://p9o4oqpmz7.csb.app/ Часть 1  https://habr.com/ru/post/350274/ Часть 2  https://habr.com/ru/post/350278/ Часть 3  https://habr.com/ru/post/350946/