learn react ui logoLearnReactUI

Checkout great react content!

Here you can find great react courses which will make you ready for the industry. Years of frontend development experience is distilled and transformed into education content.

content

Nasıl Frontend Uzmanı Olurum?

Birçok eğitim içeriğinden faydalanmanıza rağmen Frontend alanında kendinizi derinleşmiş hissetmiyorsanız, işe başladığınızda Frontend konusunda kendinizden emin olamıyorsanız, mevcut mimariyi anlamanıza rağmen kendi kodlarınızı geliştiremiyorsanız, LearnReactUI.dev bu konudaki tüm ihtiyaçlarınızı tek bir yerde karşılayabileceğiniz bir eğitim sitesidir.

content

How To Became Frontend Master

You do not think that you have deep knowledge in the Frontend area, although you have studied many learning contents, you are not confident in Frontend when you start a new job, you cannot develop your codes although you comprehend the existing architecture, LearnReactUI.dev is the website where you can meet all your relevant requirements in a single place

content

JS ile Fonksiyonel Programlama

Fonksiyonel programlama nedir? Şu ana kadar bize okullarda öğretilen programlamadan bir farkı bulunuyor mu? Öğrenmemiz avantajlı mı? Nerelerde kullanılır? Bu ve benzeri soruları cevaplamaya çalışacağız.

content

Basitten Karmaşığa Frontend Uygulamaları

Bu yazıda react projelerini veri erişimine göre basitten karmaşığa doğru analiz ediyor olacağız. Veriye olan ihtiyaç, verinin alınma şekli, tutulma şekli, özellikleri ve buna benzer birçok konu aslında projenizdeki konsept ve kütüphanenin değişmesine neden olmaktadır. Uygulama karmaşıklığını bu açıdan önceden biliyor olmak bize birçok avantaj sağlayacaktır

content

Simple To Complex Frontend Applications

In this article, we will be analyzing react projects from simple to complex according to data access. The need for data, the way data is retrieved, the way it is kept, its properties and many similar issues actually cause the concept and library in your project to change. Therefore, if we can estimate the difficulty level of our project before we start the project, this will help us to make better decisions about the following concepts

content

React Hooks Nedir?

React Hooks UI bileşenlerin ortak kod ihraçlarını paylaştığı ve diğer 3rd Party kütüphanelere daha çabuk entegre olmayı sağlayan bir yöntemdir. Aspect Oriented Programming veya Cross-Cut konularına aşinaysanız, bu kavramlar size çok yabancı gelmeyecektir. Loglama, Persist, Auth, Rendering, State Management gibi bir çok konuda bileşenler ortak fonksiyonları paylaşırlar. Bunun 4 farklı yöntemi bulunur; Inheritance, High Order Component, Render Props, Hooks. Bu E-Kitap'ta Hooksları işleyeceğiz.

content

What Are React Hooks?

React Hooks is a way for UI components to share common code exports and integrate more quickly with other 3rd Party libraries. If you are familiar with Aspect Oriented Programming or Cross-Cut, these concepts will not seem very foreign to you. Components share common functions in many areas such as Logging, Persist, Auth, Rendering, and State Management. There are 4 different methods for this; Inheritance, High Order Component, Render Props, and Hooks. In this eBook we will cover Hooks.

content

Teknolojik Değişim ve Baskının Üstesinden Gelmek

Teknolojinin hızlı değişimi, finansal resesyon, yapay zekanın getirdikleri ve tüm bunların yazılım geliştiricileri üzerindeki baskısını ele aldığım E-Kitap'ta, bu baskıyı aşmak için ne tarz yöntemleri kullanabileceğimizden de bahsettim.

content

Overcoming Technological Change and Pressure

It is an e-book on the pressures on software engineers caused by rapid technological developments, financial recession, and artificial intelligence, as well as how to resist this strain.

content

JavaScript'in Tarihsel Gelişimi

JavaScript nasıl doğdu, nasıl gelişti, hangi kırılımlar JavaScript'in gelişimini çok etkiledi. EcmaScript güncellemeleri ile birlikte 2015 - 2023 arasında JavaScript dilinde nasıl bir değişim oldu. Tüm bu konuları örnekler ile birlikte E-Kitap içerisinde bulabilirsiniz.

content

The Development Of JavaScript Through Time

How JavaScript is true, how it developed, what the first and second phases are, and how new features were introduced to JavaScript with EcmaScript upgrades between 2015 and 2023. All of these subjects are covered in this e-book.

content

Temel İnternet Kavramları

Web veya Mobil uygulama geliştiren bir ekipte yer alıyorsanız. Öncelikli öğrenmeniz gereken konulardan biride uygulamaların internet üzerinde nasıl çalıştığını anlamak olmalı. Bu e-kitap Temel İnternet Kavramlarını yoğunlaşarak bu konuları derinlemesine anlatmaya çalışıyor.

content

Fundamental Internet Concepts

If you are developing a Web Application, whether you are a Frontend, Backend or FullStack developer. The primary thing you need to learn and understand is how applications work on the internet.

content

Tarayıcılar Nasıl Çalışır ? (Chrome, Edge, Firefox vb..)

Tarayıcıların çalışmasını derinlemesine inceleyerek kullanıcının web sayfasını gezerken, veya bir web uygulamasını kullanırken arka planda neler döndüğünü , hangi işlemler yapıldığını bilmek Frontend Developer için çok önemlidir. Çünkü geliştirdiğimiz tüm Web Uygulamaları bu platformlar üzerinden sunulur, Daha Kaliteli ve Hızlı uygulamalar geliştirmek için tarayıcıların iç yapısını bilmeniz gerekir.

content

DOM API Kullanımı

Web Sayfası veya uygulaması özünde bir DOM Ağacı ve bu ağaç üzerindeki düğümler ile kullanıcının etkileşimi üzerine işleyen bir yapıdır. Bundan dolayı DOM ‘un ne olduğunu öğrenmek, DOM’un nasıl kullanılacağını öğrenmek çok çok önemli. Zaten bu yüzden bütün çıkan Frontend Framework’lerin ana odağı bu DOM API kullanımı ve bunun geliştiricilere nasıl yansıtılacağı oluyor. E-Kitap içerisinde bu konuyu aşağıdaki başlıklar altında topladım.

content

React Web Uygulamasının Mantıksal Modeli

Frontend uygulamaları aslında hepsi aynı mekanizma ile çalışır. - Teknoloji ve Frontend Konseptleri - Domain (Uygulamanın Yetenekleri) Bu 2 yapı birbirine çok iyi harmanlayarak Frontend Web Uygulamalarını ortaya çıkarıyoruz. Aynı oyunlarda ve çizgi filmlerde olduğu gibi..

content

React Web Apps Conceptual Framework

In reality, all frontend programs use the same mechanism. - Technology and Frontend Concepts - Domain (Application Capabilities) Frontend Web Applications are created by expertly combining these two structures. As in video games and cartoons.

content

Building a Remember Me Page: A Step-by-Step Guide

In "Building a 'Remember Me' Page: A Step-by-Step Guide," we provide a comprehensive walkthrough for developers aiming to create an effective and user-friendly password recovery page. The article is divided into key steps: - Google Captcha Integration - Form Design and Validation - Server Communication - Layout Design and Styling

content

Mastering React Client State Management

In "Mastering React Client State Management," we guide developers through various state management techniques in React. Covering: Props Drilling, React Context, Zustand, Jotai, Singal, Redux This guide empowers developers to select and implement the optimal state management approach for their React projects.

content

Lets Develop A Simple Calculator

Dive into our comprehensive guide titled 'Let's Develop A Simple Calculator', where we take you step-by-step through the process of building a fully functional calculator using React. Explore the power of React's state management, learn best practices for UI/UX design, and harness the potential of modern web development.

content

JavaScript Foundations

This ebook serves as your essential guide to the core principles and concepts that underpin the versatile JavaScript programming language. Whether you're a novice or an experienced developer, you'll explore variables, data types, operators, functions, and more. It's the perfect starting point to strengthen your JavaScript skills and set the stage for your web development journey

content

Logical Model And Concepts for React Apps

This is a comprehensive ebook that demystifies the fundamental principles behind building React applications. It provides a clear and simplified explanation of the logical model and essential concepts involved in creating robust and efficient React-based web applications.

content

Controlling re-renders on React Class Components

Unlock the secrets of controlling re-renders in React Class Components! Learn efficient techniques and best practices to optimize performance and enhance the user experience. Dive into the intricacies of shouldComponentUpdate and leverage the power of PureComponent to fine-tune your components.

content

How to control re-renders on React Func Components

To control re-renders in React functional components, use React.memo to memoize components based on prop changes, and React.useMemo and React.useCallback to memoize values and functions. This optimization ensures that components only re-render when necessary, enhancing performance by avoiding unnecessary rendering of unchanged elements.

content

React Tab Visibility Optimization

In React applications, optimizing tab visibility is paramount for a seamless user experience. This ensures that timers, animations, or periodic tasks associated with a specific tab are halted when the user switches to another tab or minimizes the window, contributing to a more efficient and user-friendly React application.

content

How To Download a File in React

Effortlessly integrate file downloads in your React app using the Fetch API. This concise guide walks you through setting up your project, creating a download function, handling file responses, and triggering seamless downloads.

content

Mouse Interactions In React Webapp

Enhance user experience in your React web app with seamless mouse interactions! Implement click events for intuitive navigation, mouseOver effects for dynamic UI responses, and clickaway functionality to dismiss pop-ups or menus. Elevate engagement with hover effects, offering a visually appealing touch.

content

Legacy React

React 10 yılını tamamlamış artık milyonlar tarafından kullanılan bir kütüphane, yıllar içerisinde birçok yapısal değişikliğe uğradı. Bu E-Book'ta ilk React'ın neleri içerdiği ve ne amaçla hangi pratikler üzerine tasarlandığını anlatmaya çalışıyor

content

Legacy React Advanced

React Legacy Advanced, React'ın temel yapılarına göre daha kompleks olan DOM yapılarından kaynaklı problemli kısımları nasıl çözebileceğimiz üzerine bir e-kitaptır.

content

React Routing

Routing son dönemde ekosistemdeki herkesin en çok önem verdiği konu Bu e-kitap'ta routing temel kavramları üzerinde durarak ileride React konusunda çalışacak kişilere büyük fayda sağlayacaktır. Web App için en temel konularından birisi olan Routing konusunda birçok bilgi ve pratiği bu kitapta bulabilirsiniz.

content

JavaScript'i Derinlemesine Öğren

Son dönemin en popüler ve en çok kullanılan programlama dili JavaScript diyebiliriz. Artık JavaScript her yerde Web, Sunucu, Mobil Cihazlar, VR Gözlükler. Bundan dolayı JS nasıl çalıştığını anlamamız biz geliştiricilerin daha kaliteli, esnek ve performanslı kodlar yazmamızı sağlayacaktır. Bu kitap JavaScript temel seviyelerini anlamış kişilerin daha derinlere dalarak JS arkaplanda nasıl çalıştığını anlamalarını sağlayacaktır.

content

JavaScript'in Temelleri

Bu E-Kitap JS temel kavramları ve pratik kullanımları üzerine odaklanlanmıştır. İçerisinde veri türlerini, operatörler, fonksiyonlar bir çok konuya yer verdim. JavaScript becerilerinizi ve web geliştirme becerilerinizi arttırmak için hazırlanmıştır.

content

JavaScript Async Programlama

Bu E-Kitap JS asenkron kullanımına odaklanlanmıştır. İçerisinde EventLoop, Callback, Promise, Async Await, Generator, Streams ve WebAPI de Async kullanım konusunda örnekler içerir.

content

JavaScript Meta Programlama

Bu E-Kitap JS meta programlama yani, mevcut çalışan kodu dinamik, esnek, değiştirebilir, tasarlanabilir yapabilmek için sunduğu bir takım yöntemleri incelemektedir. İçerisinde object structure, eval, function constructor, proxy, tagged template literals konuları işlenmektedir.

content

Ripple Effect Button

In this tutorial, we’ll create a reusable ripple effect component in React using SCSS. This effect is commonly used in CSS Animation to provide feedback when a user interacts with a button.

content

TypeScript'in Temelleri

Bu Kitap TS tipleri ve pratik kullanımları üzerine odaklanlanmıştır. İçerisinde temel veri tipleri, özel veri tipleri ve object oriented yaklaşımı gibi bir çok konuya yer alır. TypeScript becerilerinizi ve web geliştirme becerilerinizi arttırmak için hazırlanmıştır.

content

React Projesinde TypeScript

Bu E-Kitap React Projesinde React tipleri ile projenin nasıl oluşturulacağına, veya daha önceden yazmış olduğunuz legacy kodlarınızı nasıl TypeScript'e dönüştürebileceğiniz üzerine yoğunlaşmıştır.

content

Yazılım Mimarisi ve Geliştirme Metotları

Bu E-Kitap Yazılım Geliştirmenin Temeli olan, Yazılım Mimarisi, Yazılım Geliştirme Metodolojiler, Agile(Çevik) yöntemler ve tüm bu yöntemlerde kullanılan Fazlar üzerinde durmaktadır. Bu konuları doğru anlarsanız bu yoldaki seçimlerininiz doğru şekilde yapabilir ve yazılım geliştirme projelerinde başarılı olabilirsiniz.

content

Yazılım Geliştirme Prensipleri

Bu E-Kitap Yazılım Mimarisi, Yazılım Geliştirme Metodları ve Fazlarını birbirine bağlayan prensiplerdir. Bu prensipler sayesinde Yazılım Geliştirme'yi daha iyi anlayarak kavramlar arasındaki bağlantıyı kurabileceksiniz

content

Zustand ile State Yönetimi

Bu E-Kitap Zustand ile State Yönetimi anlatılırken, bu yeteneği gerçekleştiren en popüler kütüphanelerden olan Redux'un yerine kullanılabilir mi , Redux'ın yeteneklerine sahip mi ve bu kütüphaneye göre ne tür avantaj ve dezavantajları bulunduğunu analiz ediyor.

content

Rendering Teknikleri

Bu E-Kitap ile Rendering Örüntüleri ve bu örüntüleri Framework’lerin nasıl ele aldığı üzerine duracağım, sonra teknikleri daha detaylı analiz ediyor olacağız.

content

How to Build an Infinite Scroll List with React

Infinite scrolling is a web design technique used to load content continuously as the user scrolls down a page. Instead of requiring the user to click a "Next" button or pagination link to load more content, new content automatically loads when the user reaches the bottom (or a certain threshold) of the current page.

content

Building a React Animation Showcase with Lottie and Ant Design

In this tutorial, we'll walk through building an interactive React component that allows users to play and control animations using the LottieFiles library, combined with UI components from Ant Design

content

React Query 1 (Temel Bilgiler)

Bu E-Kitap ile React Query kütüphanesinin kullanımı üzerinde odaklanmış serinin birinci kitabıdır. React Query kütüphanesi sunucu ile istemci(client) arasında state yönetimi sırasında karşınıza çıkacak zorlukları geliştiriciden akıllıca soyutlayan veri çekme ve güncelleme kütüphanesidir. 

content

Adobe Color Palette Viewer in React

Adobe Color Palette Viewer is a React-based application that dynamically showcases various Adobe color palettes. It renders color tones in a table format using reusable components, with each color tone styled using SCSS. The project makes it easy to view and customize color palettes for use in design or development projects.

content

Audio Recorder in React

This project provides an audio recording functionality using the `MediaRecorder` API. It allows users to record audio from their microphone, play it back, and download the recorded file.

content

AI Assistant Animation Sample

This React project demonstrates an interactive assistant animation system. It allows users to toggle between animations, control talking states, and view an animated assistant built with **Lottie Player** and styled with **Ant Design** and **Emotion**.

content

How to use AWS Icons in React Project

This project demonstrates how to use AWS service icons in a React application. It includes various components for rendering individual icons, grouped icons, and categorized icons in an accordion layout. The sample also supports customizing icon sizes.

content

React Drag-and-Drop Sorting

This is a simple React example demonstrating how to implement drag-and-drop sorting using `react-dnd`. It allows users to reorder a list of items by dragging and dropping.

content

Draggable Sidebar with React

This project demonstrates a draggable sidebar component built with React, Ant Design, and `react-draggable`. The sidebar allows users to adjust its width by dragging the sidebar handle.

content

How to Develop Ellipses Text With Tooltip

The `TypographyEllipsesAndTooltipSample` component demonstrates how to handle text overflow in React using ellipses and tooltips. It provides interactive controls to customize its behavior and appearance.

content

How to Get Fav Icon From Domain Name

The `FavIconSample` component dynamically fetches and displays the favicon of a specified domain using Google's favicon service. It includes an input field for users to enter a domain name and instantly updates the displayed favicon.

content

How to Build Multi Language Support with React

This guide provides a step-by-step approach to creating a React application with multi-language support using the powerful `react-i18next` library. Internationalization (i18n) enables your app to reach a broader audience by offering content in multiple languages, improving accessibility and user experience.

content

Custom Color Palette Example

This project demonstrates a reusable color palette system implemented in React. The `CustomColorPalette` provides customizable color sets and a utility function for applying opacity to colors. The `CustomColorPaletteSample` component showcases how to use this palette in a UI.

content

Icon With Badge Component

A simple and reusable component for displaying an icon with a badge using Styled Components in React. The badge is ideal for showing counts, notifications, or other small bits of information.

content

Custom Typography & Layout

This project provides a set of reusable styled components for typography and layout, built using Emotion for styling and React.

content

RadixUI Color Palette Component

This project provides a React component to visualize a color palette using the Radix UI Colors library. It renders a table displaying various colors and their corresponding tones, offering a clean and organized way to explore the color scales.

content

Typography and Markdown Balancer Components

This repository contains two main React components designed to handle typography and Markdown-based text rendering with flexibility and responsiveness

content

AI Chat Sample

This project demonstrates an AI-powered chat system built using the OpenAI SDK. The ChatEngine module handles interactions with the OpenAI API, including message generation and context management