How to create a simple HTML5 Canvas Game with JavaScript

FREE

Create an HTML5 Game from scratch using JavaScript to draw on canvas apply animations and interaction with keyboard

https://coursevania.com/courses/how-to-create-a-simple-html5-canvas-game-with-javascript/

Классная статья - Оптимизация подключения REST API для React приложений

Спойлер - там не только про Реакт. Рекомендую всем почитать

#js #api

​React JSX

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

JSX это — расширение языка JavaScript. Фундаментально, JSX является синтаксическим сахаром для функции React.createElement(component, props, ...children)

JSX код:

 <MyButton color="blue" shadowSize={2}>
   Click Me
 </MyButton>

компилируется в:

 React.createElement(
   'div',
   {className: 'sidebar'},
   null
 )

React можно использовать и без JSX, но большинство людей ценит его за наглядность при работе с UI, живущем в JavaScript-коде. Помимо этого, JSX помогает React делать сообщения об ошибках и предупреждениях понятнее.

JSX допускает использование любых корректных JavaScript-выражений внутри фигурных скобок.
const user = {
firstName: 'Марья',
};

const element = (
<h1>
Здравствуй, {user.name}!
</h1>
);

​​visx | visualization components for #react

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

https://github.com/airbnb/visx

#ts

15 ответов на вопросы собеседования по React с решениями

https://www.sitepoint.com/react-interview-questions-solutions/

Вы не знаете JS. Замыкания и объекты

Автор: Кайл Симпсон

Год издания: 2019

Скачать книгу

#javascript #русский

5 крутых трюков с JavaScript Promise

https://davidwalsh.name/javascript-promise-tricks

Javascript RegExp

Автор: Sundeep Agarwal
Год издания: 2019

Скачать книгу pdf
Скачать книгу djvu

#javascript #english #beginner

13 прокси-ловушек

Proxy в JavaScript позволяет перехватывать основные операции с объектом (изменение и назначение свойств, перебор в цикле и т. д.)

В статье на демо-примерах разобраны 13 таких перехватчиков: https://prglb.ru/1zmkw

#javascript #proxy

Умные способы написания JSX в вашем приложении на React

https://medium.com/javascript-in-plain-english/smart-ways-to-write-jsx-in-your-react-app-f435aa12bb96

JavaScript для FrontEnd-разработчиков. Написание. Тестирование. Развертывание

Автор: Кириченко А. В.
Год издания: 2020

Скачать книгу

#JavaScript #русский #middle

Оптимизированные для поиска SPA с React Helmet

https://blog.logrocket.com/search-optimized-spas-react-helmet/

Рассказываем, что такое наборы в JavaScript, как они работают и как их использовать.

Читать статью

Отличный туториал по разработке PWA приложений (сам посмотрел и теперь пилю свое)

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gTxqJBcDmoi5Q2pzDusSL7

React 16 Essentials, Second Edition

Автор: Artemij Fedosejev, Adam Boduch
Год издания: 2017

Скачать книгу pdf
Скачать книгу epub

#React #english #middle

React programming. The Ultimate Beginner's Guide to Learn react js Programming. Step by Step

Автор: John Bach
Год издания: 2020

Скачать книгу pdf
Скачать книгу epub

#react #english

Что такое Render в React и как его зафорсить?

https://www.telerik.com/blogs/what-is-render-react-how-do-you-force-it

React быстро. Веб-приложения на React, JSX, Redux и GraphQL

Автор: Мардан Азат
Год издания: 2019

Скачать книгу

#React #русский #middle

⚛️ Локализация приложений React с i18next

Перевод интерфейса на разные языки – головная боль разработчика рассчитанных на международную аудиторию программ. Предлагаем вам быстрый и простой способ локализации приложений React с помощью плагина i18next.

https://prglb.ru/4e571



#react #tools

Неплохая объяснялка про хуки в Реакте.

https://www.sitepoint.com/react-hooks/

Как работают хуки в Реакте

На меня вчера внезапно снизошло понимание того, как работают хуки. До этого почему-то картинка никак не могла сложиться полностью. Теперь могу поделиться своим озарением с вами.

1. Хук - это просто механизм для вызова ререндеринга компонента, когда что-то происходит вне этого компонента.

То есть хуки представляют триггеры, по которым вызывается ререндеринг.

2. Сложнее всего было понять, как хуки привязываются к экземпляру компонента.

Оказалось, что при создании экземпляра компонента Реакт запоминает, какой именно компонент сейчас создаётся, и когда из него вызывается какой-нибудь useState, Реакт знает, к чему привязывать нужную переменную.

То есть привязка хука к компоненту осуществляется самим Реактом снаружи, при вызове функционального компонента.

Надеюсь, я кому-то ещё помог понять)