6 проектов на ReactJS для начинающих
В этом видеоуроке подробно разбирается, как создать простые проекты уровня Junior, а именно:
— счётчик,
— модальное окно,
— простой опросник,
— конвертер валют,
— коллекция фотографий,
— список пользователей.
Ссылка на видео: https://youtu.be/eS0GL73tkmw
#reactjs
@react_tg
В этом видеоуроке подробно разбирается, как создать простые проекты уровня Junior, а именно:
— счётчик,
— модальное окно,
— простой опросник,
— конвертер валют,
— коллекция фотографий,
— список пользователей.
Ссылка на видео: https://youtu.be/eS0GL73tkmw
#reactjs
@react_tg
YouTube
Разработай 6 проектов на ReactJS (для начинающих)
В этом видео я тебе покажу как разработать 6 разных ReactJS проектов уровня Junior.
Данное видео подойдёт для тех, кто только недавно познакомился с ReactJS и хочет добавить к себе в портфолио проекты.
Видео по деплою: https://www.youtube.com/watch?v=-pJN9faoa8E…
Данное видео подойдёт для тех, кто только недавно познакомился с ReactJS и хочет добавить к себе в портфолио проекты.
Видео по деплою: https://www.youtube.com/watch?v=-pJN9faoa8E…
👍21🔥3❤2
Сборник шпаргалок для фронтенд-разработчика
В этих шпаргалках собраны не просто методы, функции и базовый синтексис, но и их подробное объяснение с примерами.
— Шпаргалка по тегам HTML5
— Шпаргалка по методам JavaScript для работы с DOM
— Шпаргалка по работе с медиа в браузере
— Шпаргалка по HTTP-заголовкам, связанным с безопасностью
— Шпаргалка по доступности веб-приложений
— Шпаргалка по Internationalization API
— Шпаргалка по Temporal API и Dayjs
Сохраняйте себе в закладки, чтобы не потерять.
#js #html #фронтенд
В этих шпаргалках собраны не просто методы, функции и базовый синтексис, но и их подробное объяснение с примерами.
— Шпаргалка по тегам HTML5
— Шпаргалка по методам JavaScript для работы с DOM
— Шпаргалка по работе с медиа в браузере
— Шпаргалка по HTTP-заголовкам, связанным с безопасностью
— Шпаргалка по доступности веб-приложений
— Шпаргалка по Internationalization API
— Шпаргалка по Temporal API и Dayjs
Сохраняйте себе в закладки, чтобы не потерять.
#js #html #фронтенд
my-js.org
Шпаргалка по тегам HTML5 | MyJavaScript
❤17🔥5👍4🤩1
DevSamples — полезная коллекции чужого кода
С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить
Основное внимание сервис уделяет исходным кодам для веб-разработчиков
Стоимость: #бесплатно
#web #css #шпаргалка
@react_tg
С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить
Основное внимание сервис уделяет исходным кодам для веб-разработчиков
Стоимость: #бесплатно
#web #css #шпаргалка
@react_tg
Devsamples
DevSamples | Code snippets for any need
DevSamples is a list of code samples for you to copy and paste into your projects as needed. The primary focus is on web development, but there are samples from a variety of languages.
❤10👍6🔥3
⚡Команда React представила новый сайт с документацией ⬇️
🗄 Новый сайт обучает современному React с функциональными компонентами и хуками
🗄 Вас ждут новые диаграммы, иллюстрации, задачи и более 600 новых интерактивных примеров
Please open Telegram to view this post
VIEW IN TELEGRAM
react.dev
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
🔥31👍11❤2
Наглядные примеры использования React Hooks
В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом.
https://css-tricks.com/react-hooks-the-deep-cuts/
#react #фронтенд
@react_tg
В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом.
https://css-tricks.com/react-hooks-the-deep-cuts/
#react #фронтенд
@react_tg
CSS-Tricks
React Hooks: The Deep Cuts | CSS-Tricks
Hooks are reusable functions. They allow you to use state and other features (e.g. lifecycle methods and so on) without writing a class. Hook functions let us
👍13❤3🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Learn React 18 with Redux Toolkit – Full Tutorial for Beginners
Learn how to use React version 18 and Redux Toolkit in this full course for beginners. React is a free and open-source front-end JavaScript library for building user interfaces based on components.
✏️ Course created by @CodingAddict
Source Code
React Tutorial:…
✏️ Course created by @CodingAddict
Source Code
React Tutorial:…
👍13🔥5⚡2😱2❤1
В новой документации React нет create-react-app. Это, мягко говоря, вызывает у многих недоумение. Начать новый проект React теперь рекомендуется с помощью одного из популярных в сообществе фреймворков на базе React.
Robin Wieruch вот предлагает свой взгляд на то, как начать проект React в 2023 году.👇
https://www.robinwieruch.de/react-starter/
Robin Wieruch вот предлагает свой взгляд на то, как начать проект React в 2023 году.
https://www.robinwieruch.de/react-starter/
Please open Telegram to view this post
VIEW IN TELEGRAM
Хабр
Create react app умирает?
Зайдя на официальный сайт React я не сразу понял, что произошло. Когда мы заходим на страницу документации React в раздел установки, мы можем увидеть различные предложенные варианты установки...
🤔13👍5🔥4❤3😁2
3 полезных ресурса для веб-разработки
1. Compressor.io — веб-приложение, которое уменьшает размер изображения без потери качества.
2. MockFlow — онлайн-инструмент для создания макетов и прототипов веб-сайтов и мобильных приложений. Не требует установки и прост в использовании: просто перетащите нужные формы и элементы на доску, а затем настройте их.
3. Flatiron — одна из крупнейших библиотек иконок для проектов.
#веб
1. Compressor.io — веб-приложение, которое уменьшает размер изображения без потери качества.
2. MockFlow — онлайн-инструмент для создания макетов и прототипов веб-сайтов и мобильных приложений. Не требует установки и прост в использовании: просто перетащите нужные формы и элементы на доску, а затем настройте их.
3. Flatiron — одна из крупнейших библиотек иконок для проектов.
#веб
❤17👍5🔥3
Креативное оформление списков
Мы очень часто используем списки, чтобы структурировать различную информацию. В этой статье вы найдёте подборку интересных вариантов оформления списков, которые вы можете использовать у себя на сайте, а также рассмотрите в каком случае будет наиболее удобен тот или иной вид списка:
https://web.dev/creative-list-styling/
Мы очень часто используем списки, чтобы структурировать различную информацию. В этой статье вы найдёте подборку интересных вариантов оформления списков, которые вы можете использовать у себя на сайте, а также рассмотрите в каком случае будет наиболее удобен тот или иной вид списка:
https://web.dev/creative-list-styling/
👍6❤2🔥1
React Labs: над чем работает команда React — март 2023 г.
1️⃣ React Server Components
2️⃣ Asset Loading
3️⃣ Static Server Rendering Optimizations
4️⃣ React Optimizing Compiler
5️⃣ Offscreen Rendering
6️⃣ Transition Tracing
Читать
@react_tg
1️⃣ React Server Components
2️⃣ Asset Loading
3️⃣ Static Server Rendering Optimizations
4️⃣ React Optimizing Compiler
5️⃣ Offscreen Rendering
6️⃣ Transition Tracing
Читать
@react_tg
react.dev
React Labs: What We've Been Working On – March 2023 – React
The library for web and native user interfaces
👍12❤4🔥3
Архитектура Teams теперь включает Fluent UI, WebView2 вместо Electron и React вместо Angular.
Подробнее
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥8❤4
React Spectrum — создание компонентов нового поколения
При переиспользовании компонентов или создании новых на основе старых нам необходимо каждый раз заново разбираться в.логике кода Это неудобно. Согласны?
Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.
В этой статье вы можете посмотреть, как работает эта библиотека, а также познакомиться с аналогами:
https://habr.com/ru/articles/718000/
#react #фронтенд
@react_tg
При переиспользовании компонентов или создании новых на основе старых нам необходимо каждый раз заново разбираться в.логике кода Это неудобно. Согласны?
Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей.
В этой статье вы можете посмотреть, как работает эта библиотека, а также познакомиться с аналогами:
https://habr.com/ru/articles/718000/
#react #фронтенд
@react_tg
👍18🍌3❤2🔥1
Полезная библиотека для понимания работы JS
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:
https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart
#js
👍26🔥3👎2❤1
Подборка полезных библиотек React-разработчика
Некоторые из них не очень активно поддерживаются, как хотелось бы. Речь про react-beautiful-dnd — вместо нее советуют использовать dnd-kit.
Читать
Некоторые из них не очень активно поддерживаются, как хотелось бы. Речь про react-beautiful-dnd — вместо нее советуют использовать dnd-kit.
Читать
GitHub
GitHub - atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React - atlassian/react-beautiful-dnd
❤🔥13👍2❤1
React, Visualized — простое интерактивное руководство по основным концепциям React.
https://react.gg/visualized
@react_tg
https://react.gg/visualized
@react_tg
react.gg
React, visualized – react.gg
React, Visualized – A visual exploration of core React concepts
❤15👍5🔥3
🔥 Top it channels
🖥 Linux
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux_read - бесплатные книги linux
@linux chat - чат linux для обучения и помощи.
@linuxacadd - linux с нуля
🖥 SQL базы данных
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
databooks - лучшие бесплатные книги по базам данных
🖥 Python
@pythonl - гайды по Python.
@pro_python_code – Python практика.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
🖥 Java
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
👣 Golang
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
⭐️ Нейронные сети
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
🖥 Machine learning
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
🖥 Javascript / front
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork - кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
🖥 Github
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
🍏 🖥 Mobile dev
@mobdevelop
🖥 Android
@android_its
🖥 Devops
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
📢 English for coders
@english_forprogrammers - Английский для программистов
🔢 Math
@dsmath - математика программиста
💡 ChatGpt bot
@Chatgpturbobot - бесплатный бот ChatGpt
@linux -топ фишки, гайды, уроки по работе с Linux.
@linux_read - бесплатные книги linux
@linux chat - чат linux для обучения и помощи.
@linuxacadd - linux с нуля
@sqllib - библиотека баз данных
@sqlhub - повышение эффективности кода с грамотным использованием бд.
@chat_sql - чат изучения бд.
databooks - лучшие бесплатные книги по базам данных
@pythonl - гайды по Python.
@pro_python_code – Python практика.
@python_job_interview – подготовка к Python собеседованию.
@python_testit - проверочные тесты на python
@pythonlbooks - современные книги Python
@python_djangojobs - работа для Python программистов
@python_django_work - чат обсуждения вакансий
@javatg - выучить Java с senior разработчиком по профессиональной методике.
@javachats - чат для ответов на вопросы по Java
@java_library - библиотека книг Java
@android_its - Android разработка
@java_quizes - тесты Java
@Java_workit - работа Java
@progersit - шпаргалки ит
@Golang_google - восхитительный язык от Google, мощный и перспективный.
@golang_interview - вопросы и ответы с собеседований по Go. Для всех уровней разработчиков.
@golangtests - интересные тесты и задачи GO
@golangl - чат изучающих Go
@GolangJobsit - отборные вакансии и работа GO
@golang_jobsgo - чат для ищущих работу.
@golang_books - полезные книги Golang
@golang_speak - обсуждение языка Go
@data_analysis_ml - data science
@vistehno - chatgpt ведет блог, решает любые задачи и отвечает на любые ваши вопросы.
@aigen - сети для генерации картинок. видео, музыки и многого другого.
@neural – погружение в нейросети.
@ai_ml – погружение в нейросети, ai, Chatgpt, midjourney, машинное обучение.
@machinelearning_ru – машинное обучении на русском от новичка до профессионала.
@machinelearning_interview – подготовка к собеседованию.
@datascienceiot – бесплатные книги Machine learning
@ArtificialIntelligencedl – канал о искусственном интеллекте
@machinee_learning – чат о машинном обучении
@datascienceml_jobs - работа ds, ml
@Machinelearning_Jobs - чат работы мл
@react_tg - - 40,14% разработчиков сайтов использовали React в 2022 году - это самая популярная библиотека для создания сайтов.
@javascript -канал для JS и FrontEnd разработчиков. Лучшие практики и примеры кода. Туториалы и фишки JS
@Js Tests - каверзные тесты JS
@hashdev - погружение в web разработку.
@javascriptjobjs - отборные вакансии и работа FrontEnd.
@jsspeak - чат поиска FrontEnd работы.
👷♂️ IT работа
@hr_itwork - кураторский список актуальных ит-ваканнсии
🤡It memes
@memes_prog - ит-мемы
⚙️ Rust
@rust_code - Rust избавлен от болевых точек, которые есть во многих современных яп
@rust_chats - чат rust
#️⃣ c# c++
C# - объединяет лучшие идеи современных языков программирования
@csharp_cplus чат
С++ - Универсальность. Возможно, этот главный плюс C++.
📓 Книги
@programming_books_it - большая библиотека. программиста
@datascienceiot -ds книги
@pythonlbooks - python библиотека.
@golang_books - книги Golang
@frontendbooksit - front книги
@progersit - ит-шпаргалки
@linux_read - Linux books
@java_library - Java books
@github_code - лучшие проекты с github
@bigdatai - инструменты по работе с данными
@mobdevelop
@android_its
Devops - специалист общего профиля, которому нужны обширные знания в области разработки.
@english_forprogrammers - Английский для программистов
🔢 Math
@dsmath - математика программиста
@Chatgpturbobot - бесплатный бот ChatGpt
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤13🔥2🥰1😈1
🔥 Тестируем GPT-4: Может ли искусственный интеллект создать веб-сайт на React.JS?
В Интернете есть бесчисленное множество заголовков о GPT-4. Некоторые говорят об эффекте калькулятора, некоторые говорят, что разработчики программного обеспечения обречены, а другие утверждают, что это конец света! В Интернете есть бесчисленное множество заголовков о GPT-4. Некоторые говорят об эффекте калькулятора, некоторые говорят, что разработчики программного обеспечения обречены, а другие утверждают, что это конец света! Но так ли это на самом деле?
В этой статье я поделюсь своим опытом использования GPT-4 для создания персонального веб-сайта с помощью React.JS и изучу, как он функционирует в качестве веб-разработчика.
▪ Читать
@react_tg
В Интернете есть бесчисленное множество заголовков о GPT-4. Некоторые говорят об эффекте калькулятора, некоторые говорят, что разработчики программного обеспечения обречены, а другие утверждают, что это конец света! В Интернете есть бесчисленное множество заголовков о GPT-4. Некоторые говорят об эффекте калькулятора, некоторые говорят, что разработчики программного обеспечения обречены, а другие утверждают, что это конец света! Но так ли это на самом деле?
В этой статье я поделюсь своим опытом использования GPT-4 для создания персонального веб-сайта с помощью React.JS и изучу, как он функционирует в качестве веб-разработчика.
▪ Читать
@react_tg
❤10👍3🔥1
Knapsack Pro — оптимизация времени запуска тестов в проектах, написанных на любом языке программирования
Инструмент помогает существенно уменьшить время, затрачиваемое на запуск тестов. Достигается это за счёт автоматического распределения их на несколько рабочих машин в облаке
Это позволяет сэкономить время и снизить затраты на серверное оборудование и тестирование
Стоимость: #бесплатно (но есть платные тарифы)
#тестирование #cloud #оптимизация
@react_tg
Инструмент помогает существенно уменьшить время, затрачиваемое на запуск тестов. Достигается это за счёт автоматического распределения их на несколько рабочих машин в облаке
Это позволяет сэкономить время и снизить затраты на серверное оборудование и тестирование
Стоимость: #бесплатно (но есть платные тарифы)
#тестирование #cloud #оптимизация
@react_tg
👍7❤2🔥2
Структуры данных во фронтенде
Структуры данных могут быть пугающими. Особенно для самоучек. Но с толковым объяснением и понятными примерами всё не так уж страшно.
Убедитесь сами:
https://profy.dev/article/javascript-data-structures
#фронтенд
Структуры данных могут быть пугающими. Особенно для самоучек. Но с толковым объяснением и понятными примерами всё не так уж страшно.
Убедитесь сами:
https://profy.dev/article/javascript-data-structures
#фронтенд
❤9👍3🔥1
Buildkite — автоматизация сборки и развёртывания приложений
Сервис позволяет создавать и настраивать пайплайны, которые автоматически собирают, тестируют и разворачивают приложения на удалённых серверах
С помощью Buildkite вы можете интегрировать свои любимые инструменты и сервисы, такие как GitHub, Bitbucket, Slack, AWS и многие другие
Инструмент предоставляет UI, позволяющий создавать и настраивать пайплайны без необходимости писать код
Стоимость: #бесплатно (но есть платные тарифы)
#автоматизация #деплой
@react_tg
Сервис позволяет создавать и настраивать пайплайны, которые автоматически собирают, тестируют и разворачивают приложения на удалённых серверах
С помощью Buildkite вы можете интегрировать свои любимые инструменты и сервисы, такие как GitHub, Bitbucket, Slack, AWS и многие другие
Инструмент предоставляет UI, позволяющий создавать и настраивать пайплайны без необходимости писать код
Стоимость: #бесплатно (но есть платные тарифы)
#автоматизация #деплой
@react_tg
👍11❤4🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
React Flow
Integrating React Flow and the Web Audio API - React Flow
React Flow - Customizable library for rendering workflows, diagrams and node-based UIs.
👍15🔥4❤1