React. Быстрый старт

Share
Add to Wishlist
PDF

Computers\\Web-design

This document was uploaded by one of our users. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form.

Download

Search on Amazon

Simply click on the Download Book button.

Yes, Book downloads on Ebookily are 100% Free.

Sometimes the book is free on Amazon As well, so go ahead and hit "Search on Amazon"

Незаменимая книга по React — технологии с открытым исходным кодом для быстрого создания многофункциональных веб-приложений. Второе издание, обновленное с учетом последней версии React, показывает, как создавать компоненты React и организовывать их в удобные для сопровождения крупномасштабные приложения. Если вы знаете синтаксис JavaScript, то сразу можете приступать к работе. По ходу чтения разработчики и программисты создадут полноценное приложение. Вы быстро поймете, почему многие выбирают React для разработки веб-приложений.

Author(s): Стоян Стефанов
Series: Бестселлеры O’Reilly
Edition: 1
Publisher: Питер
Year: 2023

Language: Russian
Commentary: Publisher's PDF
Pages: 304
City: СПб.
Tags: JavaScript; Web Applications; JSX; React.js

Предисловие
Об этой книге
Условные обозначения
Использование примеров кода
Благодарности
От издательства
Глава 1. Hello World
Установка
Hello React World
Так что же сейчас произошло?
Метод React.createElement()
Синтаксис JSX
Установка Babel
Привет, мир JSX
О транспиляции
Далее: настраиваемые компоненты
Глава 2. Жизнь компонента
Настраиваемый функциональный компонент
JSX-версия
Настраиваемый классовый компонент
Какой синтаксис использовать
Свойства
Свойства в функциональных компонентах
Свойства по умолчанию
Состояние
Компонент текстовой области
Компонент textarea, отслеживающий свое состояние
Немного о DOM-событиях
Обработка событий в прежние времена
Обработка событий в React
Синтаксис обработки событий
Сравнение свойств и состояния
Свойства в исходном состоянии: антипаттерн
Доступ к компоненту извне
Методы управления жизненным циклом
Примеры управления жизненным циклом: тотальная регистрация
Параноидальная защита состояния
Пример жизненного цикла: применение дочернего компонента
Выигрыш в производительности: предотвращение обновлений компонентов
Что случилось с функциональными компонентами
Глава 3. Excel: причудливый компонент таблицы
Начнем с данных
Цикл создания заголовков таблицы
Цикл заголовков таблиц, упрощенная версия
Отладка для избавления от предупреждения в консоли
Добавление содержимого
Типы свойств
Можете ли вы улучшить компонент
Сортировка
Можете ли вы улучшить компонент
Сортировка подсказок пользовательского интерфейса
Редактирование данных
Редактируемая ячейка
Поле ввода ячейки
Сохранение
Выводы и определение различий в виртуальной DOM
Поиск
Состояние и пользовательский интерфейс
Фильтрация содержимого
Обновление метода save()
Как усовершенствовать поиск
Мгновенное воспроизведение
Очистка обработчиков событий
Решение задачи очистки
Как усовершенствовать воспроизведение
Возможна ли альтернативная реализация
Скачивание данных таблицы
Получение данных
Глава 4. Функциональный Excel
Кратко освежим знания: функциональные и классовые компоненты
Отображение данных
Хук состояния
Сортировка таблицы
Редактирование данных
Поиск
Жизненные циклы в мире хуков
Проблемы с методами жизненного цикла
Хук useEffect()
Устранение побочных эффектов
Безаварийный жизненный цикл
Хук useLayoutEffect()
Пользовательский хук
Завершение воспроизведения
Хук useReducer
Функции редюсера
Действия
Пример редюсера
Модульное тестирование редюсера
Компонент Excel с редюсером
Глава 5. JSX
Несколько инструментов
Пробельные символы в JSX
Комментарии в JSX
Элементы HTML
Anti-XSS
Распространяемые атрибуты
Атрибуты, распространяемые от родительского компонента к дочернему
Возвращение в JSX нескольких узлов
Оболочка
Фрагмент
Массив
Отличия JSX от HTML
Просто class использовать нельзя, а как насчет for?
Атрибут style — объект
Закрывающие теги
Атрибуты в верблюжьем регистре
Компоненты с пространством имен
JSX и формы
Обработчик события onChange
Сравнение value и defaultValue
Значение компонента

<br />
		Значение компонента <select><br />
		Управляемые и неуправляемые компоненты<br />
Глава 6. Настройки, необходимые для разработки приложения<br />
	Создание React-приложения<br />
		Node.js<br />
		Привет, CRA<br />
		Сборка и развертывание<br />
		Были допущены ошибки<br />
	Файл package.json и папка node_modules<br />
	Рассмотрим код подробнее<br />
		Индексы<br />
		Модернизированный JavaScript<br />
		CSS<br />
	Идем дальше<br />
Глава 7. Создание компонентов приложения<br />
	Настройка<br />
	Приступим к программированию<br />
	Рефакторинг компонента Excel<br />
	Версия 0.0.1 нового приложения<br />
	CSS<br />
	Локальное хранилище<br />
	Компоненты<br />
		Исследование<br />
	Логотип и тело<br />
		Логотип<br />
		Тело<br />
		Исследование компонентов<br />
	Компонент <button><br />
		Файл Button.js<br />
		Пакет classnames<br />
	Формы<br />
		Компонент <Suggest><br />
		Компонент <Rating><br />
		Компонент <FormInput><br />
		Компонент <Form><br />
	Компонент <Actions><br />
	Диалоги<br />
	Компонент <Header><br />
	Конфигурация приложения<br />
	<Excel>: новый и усовершенствованный<br />
		Общая структура<br />
		Отображение<br />
		Строгий режим React и редюсеры<br />
		Небольшие вспомогательные функции Excel<br />
Глава 8. Готовое приложение<br />
	Обновленный App.js<br />
	Компонент DataFlow<br />
		Тело компонента DataFlow<br />
	Работа выполнена<br />
		Whinepad v2<br />
	Контекст<br />
	Следующие шаги<br />
		Циклические данные<br />
	Предоставление контекста<br />
	Потребление контекста<br />
		Контекст в заголовке<br />
		Контекст в таблице данных<br />
	Обновление Discovery<br />
	Маршрутизация<br />
		Контекст маршрута<br />
		Использование URL фильтра<br />
		Использование контекста маршрута в заголовке<br />
		Использование контекста маршрута в таблице данных<br />
		Хук useCallback()<br />
Заключение<br />
Об авторе<br />
Иллюстрация на обложке                                </div>
                            </div>
													
                            <div class="tab-pane fade" id="women-tab-pane" role="tabpanel" aria-labelledby="women-tab" tabindex="0">
                                <div class="content__body">
									<div id="disqus_thread"></div>
									<script>
										/**
										*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
										*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
										/*
										var disqus_config = function () {
										this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
										this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
										};
										*/
										(function() { // DON'T EDIT BELOW THIS LINE
										var d = document, s = d.createElement('script');
										s.src = 'https://ebookily.disqus.com/embed.js';
										s.setAttribute('data-timestamp', +new Date());
										(d.head || d.body).appendChild(s);
										})();
									</script>
									<noscript>Please enable JavaScript to view the <a rel="nofollow" href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<footer class="footer__section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-12 col-sm-12">
                        <div class="footer__wrapper">
                            <div class="footer__widget d-block">
                                <div class="footer__logo">
                                    <a href="/"><img src="/assets/images/logo/logo.png" alt="logo" /></a>
                                </div>
                                <p>Ebookily is a publicly available free scientific platform. Learning has never been so easy.</p>
                                <div class="footer__social">
                                    <a rel="nofollow" href="https://www.facebook.com/ebookily"><i class="fa-brands fa-facebook"></i></a>
                                    <a rel="nofollow" href="#"><i class="fa-brands fa-twitter"></i> </a>
                                    <a rel="nofollow" href="#"><i class="fa-brands fa-linkedin"></i></a>
                                    <a rel="nofollow" href="#"><i class="fa-brands fa-instagram"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <div class="footer__wrapper">
                            <div class="footer__widget">
                                <div class="title">
                                    <h5>My Account</h5>
                                </div>
                                <ul>
                                    <li><a rel="nofollow" href="/about">About</a></li>
                                    <li><a rel="nofollow" href="/dmca">DMCA & Copyright</a></li>
                                    <li><a rel="nofollow" href="/terms">Terms</a></li>
                                    <li><a rel="nofollow" href="/privacy">Privacy</a></li>
                                    <li><a rel="nofollow" href="/contact">Contact</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-12">
                        <div class="footer__wrapper">
                            <div class="footer__widget">
                                <div class="title">
                                    <h5>Infomation</h5>
                                </div>
                              <a title="DMCA.com Protection Status" rel="nofollow" target="_blank" href="https://www.dmca.com/site-report/ebookily.org"><img width="150" height="53" src="https://images.dmca.com/Badges/DMCA_logo-grn-btn150w.png?ID=145a9254-51e9-46c5-b021-51f04aba7b31" alt="DMCA.com Protection Status" title="DMCA.com Protection Status"></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-3 col-sm-12">
                        <div class="footer__wrapper">
                            <div class="footer__widget">
                                <div class="title">
                                    <h5>Talk To Us</h5>
                                </div>
                                <div class="address">
                                    <ul>
                                        <li>
                                            <a href="mailto:contact@ebookily.org"><i class="fa-solid fa-envelope"></i>contact@ebookily.org</a>
                                        </li>
                                        <li>
                                            10 Brugstraat <br />
                                            Zevenbergen <br />
											Netherlands
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="footer__bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="footer__content text-center">
                                <div class="content">
                                    <p>
                                        © 2024                                        Copyright @ <a href="/">Ebookily.org</a>
                                    </p>
                                </div>
								
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

<div class="flyoutMenu">
            <div class="flyout__flip">
                <div class="flyout__inner">
                    <div class="menu__header-top">
                        <div class="brand__logo">
                            <a href="/"><img src="/assets/images/logo/logo.png" alt="logo" /></a>
                        </div>
                        
                        <div class="closest__btn action__btn">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M18 6L6 18" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path d="M6 6L18 18" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            
                        </div>
                    </div>
                    
                    <form action="/search.php" method="get" class="search__form full__width">
                        <input type="search" class="form-control" name="q" placeholder="Search Books & documents" />
                        <button type="submit">
                            <img src="/assets/images/search.png" alt="search" />
                        </button>
                    </form>
                    
                    <div class="flyout__menu">
                        <ul class="flyout-main__menu">
                                <li>
                                    <a href="/category/technique">Technique</a>
                                </li>
                                <li>
                                    <a href="/category/history">History</a>
                                </li>
                                <li>
                                    <a href="/category/mathematics">Math</a>
                                </li>
                                <li>
                                    <a href="/category/linguistics">Linguistics</a>
                                </li>
                                <li>
                                    <a href="/category/computers">Computers</a>
                                </li>
                                <li>
                                    <a href="/category/other-social-sciences">Social Sciences</a>
                                </li>
                                <li>
                                    <a href="/category/psychology">Psychology</a>
                                </li>  							
                        </ul>
                    </div>
                </div>
            </div>
        </div>

<script src="/assets/js/jquery-3.6.0.min.js"></script>
        
        <script src="/assets/js/bootstrap.min.js"></script>
        
         
        <script src="/assets/js/swiper-bundle.min.js"></script>
        <script src="/assets/js/scripts.js"></script>
    </body>
</html>

React. Быстрый старт

How to Download?

Is it Free?

Book is not loading. What to do?