💡 Нашел новое место для вдохновения дизайном сайтов.

Сайт → https://seesaw.website

@react_tg

🏆 Stagger Cube — вращающийся куб с анимацией расширения-уменьшения квадратиков в каждой из сторон. Реализована с помощью CSS и JavaScript

https://codepen.io/hexagoncircle/pen/qBdEGrj

@react_tg

🖥 Сайты вы найдете сниппеты кода Javascript:

➽ javascripting - https://javascripting.com

➽ codepen - https://codepen.io

➽ codemyui - https://codemyui.com

➽ jsfiddle - https://jsfiddle.net

➽ jsbin - https://jsbin.com

➽ 30secondsofcode - https://30secondsofcode.org/js/p/1/

➽ freefrontend - https://freefrontend.com

➽ snippit - https://snippit.io

➽ codesandbox - https://codesandbox.io

➽ glitch - https://glitch.com

➽ tabnine - https://tabnine.com

➽ github - https://github.com

@react_tg

🖥 Compound components - это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым.

Это как в BEM нельзя использовать E - элемент, отдельно от B - блока.

На гифке пример, как вы можете использовать этот паттерн, чтобы сделать свои компоненты открытыми для расширения и закрытыми для модификации.

@react_tg

🖥 Полезные сайты, на которых вы можете попрактиковаться в использовании JavaScript:

1. Codewars
https://codewars.com

2. JS challenger
https://jschallenger.com

3. W3resource
https://w3resource.com/javascript-exercises/

4. Герой JS
https://jshero.net/en/koans/var.html

5. Edabit
https://edabit.com/practice

@react_tg

🖥 Представляем Million.js 3.0!

Million.js - это чрезвычайно быстрый и легкий (<4 кб) виртуальный DOM, который позволяет ускорить работу компонентов React на 70 %.

Сделайте React быстрее⚡️.

▪Github
▪Документация

@react_tg

🖥 Тестирование приложений React - ключевая часть процесса разработки.

И в этом подробном руководстве объясняет, как это сделать с помощью Cypress.

Вы узнаете, что такое сквозное тестирование, как организовать и запустить тесты, как отладить код и многое другое.

https://www.freecodecamp.org/news/cypress-for-end-to-end-testing-react-apps/

@react_tg

🖥 Если вы хотите попрактиковаться в React разработке попробуйте создать этот проект: ипотечный калькулятор.

Вы узнаете о функциональных компонентах, Material UI, работе с пропсами и многом другом.

▪Смотреть

@react_tg

🖥 CSS Reaction — анимация в стиле логотипа React, реализованная на чистом CSS

https://codepen.io/pavlovsk/pen/OXGdoN

@react_tg

Как реализовать простой контроль версий с помощью JavaScript, чтобы лучше разобраться в Git

Что такое Git и управление версиями в целом?

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

Зачем разбираться в Git?

Во-первых, чтобы не использовать команды бездумно, когда что-то пойдет не так. Во-вторых, важно понимать, как работает система, с которой мы взаимодействуем каждый день.

Мы разберем основные понятия Git на примере реализации упрощенной системы управления версиями под названием Gitj.

Реализация

Выполнение первой команды Init

Как вы, наверное, знаете, мы запускаем проект командой git init, после чего Git создает папку .git и сохраняет в ней данные. Нам предстоит это реализовать.

Две важные папки, которые создает git, — это refs и objects. Objects (объекты) — это строительные блоки Git. Они могут быть 3 типов (на самом деле их 4): commit, tree и blob. Сейчас мы подробно рассмотрим каждый из этих типов. В папке refs есть подпапка heads, содержащая ветви и последний коммит каждой ветви (из названия должно быть понятно, что в ней хранится голова ветви). У нас также есть важный файл HEAD, который хранит текущую ветвь или коммит (иногда необходимо выполнить проверку в коммите, а не в ветви).

Создадим эти папки при вызове функции init.

const fs = require("fs");

function init() {
// создается папка .gitj и подпапки .gitj/objects,.gitj/refs и .gitj/refs/heads
fs.mkdirSync(".gitj");
fs.mkdirSync(".gitj/objects");
fs.mkdirSync(".gitj/refs");
fs.mkdirSync(".gitj/refs/heads");
// создается файл с именем .gitj/refs/heads/master
fs.writeFileSync(".gitj/refs/heads/master", "");
// создается файл с именем .gitj/HEAD
fs.writeFileSync(".gitj/HEAD", "ref: refs/heads/master");
}

init();

Git Add. Добавление файлов в индекс

📌 Продолжение

@react_tg

🖥 Принципы SOLID в React: так ли все с ними гладко?

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

Должен сказать, что не согласен с тем, как подается информация в таких материалах (иначе я бы, конечно, не стал публиковать эту статью).

Проблема, на мой взгляд, заключается в том, что авторы рассказывают только о том, как прекрасны принципы SOLID, не упоминая об их возможных изъянах и подводных камнях.

Никто не задается вопросом: а применимы ли вообще принципы SOLID в React-приложениях? Именно это мы и обсудим, так что читайте дальше.

📌 Читать дальше

@react_tg