วีดีโอ

⌚Timestamps: 1:20 Create Context, Provider, and custom hook with useContext hook 7:45 Manage Unit Setting in the Header component with Context API 10:51 Use Context to change the data across App 14:59 Final Testing of the Unit Setting Switcher in the Weather App Project

⌚Timestamps: 1:10 Enable dark mode in the tailwind.config.js 1:40 Create function Header component 6:01 Add 'dark' class to HTML tag in React code to enable Dark Mode 7:51 Apply dark style across the React project

⌚Timestamps: 0:44 Create your own Toast Functional Component 3:01 Different types and Tailwind styles for the Toast Component 6:01 Implement 'Close Button' functionality to hide the message 8:32 Hide the message depending on the 'duration' prop 10:42 Test Toast Component with different messages, types, and duration 13:05 Integrate Toast Messages Component into existing Weather App React Project

Thanks for this tutorial

Nice project and teaching, bro. God bless! Abraço do Brasil!

⌚Timestamps: 0:30 Add new Property to Google Analytics 2:00 Inject the provided Script in the index.html file 5:50 Use the react-ga4 package for Google Analytics 9:43 Track events with ReactGA.event() method

⌚Timestamps: 2:16 Set Up the React TailwindCSS Project with ViteJS 6:21 Code a custom hook 'useGeolocation' to retrieve user's coordinates 12:09 Use 'useGeolocation' custom hook in the functional Weather component 20:34 Overview of OpenWeatherMap, add React Query and Axios 23:24 Create `useFetchWeather` Custom Hook using '@tanstack/react-query' 25:55 Fetch data by coordinates from API with `axios.get()` 31:18 Use Custom Hook `useFetchWeather` in the Weather Project 38:51 Build search bar and provide data to React Query 43:48 Fetch data by city name from API with `axios.get()` 48:32 Expand functionality to fetch forecast data with `Promise.all()` 58:34 React Query to manage and cache the data 59:58 WeatherCard reusable functional component with props 1:04:11 Function to get current date in provided format 1:08:26 Images using OpenWeatherMap data and links 1:12:24 Displaying Weather Details data 1:16:47 Forecast Functional React Component in the Weather Project 1:28:20 Deploy React JS Weather App on GitHub Pages

⌚Timestamps: 0:34 Preparing .env.production file with environment variables 1:29 Create and Set Up a New Repository 2:59 Configure the vite.config.js file 3:24 Install gh-pages 3:37 Update package.json 4:11 Run Deploy 5:19 Check the Deployed App on GitHub Pages 6:11 Change the code in the React project 6:35 Deploy the new version of the code to GitHub Pages 7:27 Check the changed App on GitHub Pages

⌚Timestamps: 0:58 WeatherCard reusable functional components with props 5:11 Function to get current date in specific format 9:15 Adding images to the components 11:15 Displaying Weather Details data 17:40 Forecast Functional React Components 26:18 Tailwind Styles to Component's Containers

⌚Timestamps: 0:26 Define background for specific div using Linear gradients (bg-gradient-*) 1:15 Change background-image by customizing Tailwind CSS theme 2:40 Use arbitrary values for one-off background-image value 3:21 Set background image for full-page using values from the theme 5:30 Set background image for full-page with CSS background-image property without Tailwind

⌚Timestamps: 1:45 Overview of OpenWeatherMap 3:15 Adding React Query and Axios to the React Project 5:05 Creating `useFetchWeather` Custom Hook using '@tanstack/react-query' 7:35 Fetch data by coordinates from API with `axios.get()` 12:55 Using Custom Hook `useFetchWeather` in the functional component 20:39 Build search bar and provide data to React Query 25:31 Fetch data by city name from API with `axios.get()` 30:15 Expand functionality to fetch forecast data with `Promise.all()` 33:50 JSX for forecast data 40:15 React Query to manage and cache the data 41:27 Final Testing of the Wheather API Application

⌚Timestamps: 1:50 Coding a custom hook 'useGeolocation' 6:09 Using 'useGeolocation' custom hook in functional component 8:02 Handling loading and errors from the useGeolocation' hook 10:37 JSX for displaying user's Geo Data with Tailwind CSS styles 15:06 Final Testing of the Geolocation Application

⌚Timestamps: 0:28 Creating a new project with ViteJS 1:17 Instaling Tailwind CSS 1:46 Configuring template paths 2:08 Adding the Tailwind directives to CSS 2:31 Starting the React project locally 2:51 Using Tailwind CSS in the React project 3:22 Removing default styles from App.css and index.css 4:01 Changing the styles using Tailwind CSS

⌚Timestamps: 2:03 Setting Up the ReactJS Project with ViteJS, @tanstack/react-query, Axios 3:30 Using the React Query example as an initial step 4:40 Create CharacterList functional component 6:26 Fetching data with Axios.get() from the API 9:05 JSX for displaying the characters 13:49 Styling the App with CSS 17:25 Build search bar and provide data to React Query 25:00 React Query to manage and cache the data 28:57 Final Testing of the Search Disney Character Application

⌚Timestamps: 0:13 Built-in vs. Library 4:37 Data Transformation 6:09 Error Handling 8:19 Request/Response Interceptors 10:10 Handling Query Parameters 12:16 Request Timeout

⌚Timestamps: 2:08 Setting Up the ReactJS Project with ViteJS 4:15 Create MockData functional component 5:57 API to retrieve fake data 6:49 Hook 'useState' to store mock data 8:30 Adding Axios to the project 9:42 Sending request to the API using Axios.get() function and retrieving the data with async/await 14:48 Error handling with try/catch 17:52 JSX for Persons' data 19:37 Styling the App with CSS 21:10 Using in-memory cache to reduce the amount of requests to the server 24:02 Implementing cache-age for in-memory cache 27:30 Final Testing of the Mock Data Application

⌚Timestamps: 0:34 Instalingl dependencies (vitest @testing-library/react) 1:15 Updating vite.config.js 1:37 Creating tests/setup.js 2:17 Updating scripts section in package.json 3:07 Creating .spec.jsx file for unit test 4:40 Adding 'describe' section 6:20 First unit test. Checking that the component renders correctly 8:45 Running unit tests with commands 'vitest run' and 'vitest' watch mode

I really like the way you start with end result and jump directly into execution. Excellent. If I may request if you could enhance the audio quality in the video it would be super awesome.

Nice ..

Great Work

Спасибо. Это видео помогло разобраться с тем, как делать запросы на эти апишки с валютами и как написать приложение конвертер-валют. Думаю, перепишу это на exchangerates io или fixer api с ключом, стилизую покрасивее и сделаю подобное решение с двумя useEffect своим первым пет-проектом. Кстати, у меня твой цсс сломал видимость текста. Базовая у меня dark+браузер мозилла. Цсс код, отвечавший за темы слил по цвету текст и задний фон.

it is great glad if u could just improve mic quality

Thanks. This is a great tutorial. Your lesson helped me a lot to understand drag and drop.

⌚Timestamps: 1:06 Setting Up the ReactJS Project with ViteJS 3:10 Create DragAndDrop functional component 9:57 Styling the App with CSS 12:57 Handling onDragOver event to prevent default behavior 14:25 Handling onDragStart event to pass the data 16:29 Handling onDrop event to drag and drop the items 27:05 Final Testing of the Drag&Drop Application

Hi, you have great tutorials. Could you create a Drag and Drop React application for beginners?

⌚Timestamps: 0:51 Setting Up the ReactJS Project with ViteJS 3:00 Create LyricsSearch functional component 6:18 Styling the App with CSS 9:07 Adding Axios to the project 9:46 API to retrieve the lyrics of a song 10:40 Hook 'useState' to store form's data 12:31 Sending request to the API using Axios.get() function and retrieving the data with async/await 19:23 Displaying Error with conditional rendering 20:05 Final Testing of the Lyrics Search Application

⌚Timestamps: 0:35 Setting Up the ReactJS Project with ViteJS 2:57 Create Meme functional component 5:03 API for meme's images 6:50 Styling the App with CSS 10:50 Hook 'useState' to keep meme's state 11:55 Hook 'useEffect' to retrieve memes from API using Fetch API with Promises 15:09 Displaying the image and text from the state and dynamically changing them 25:00 Final Testing of the Meme Generator Application

⌚Timestamps: 0:49 Setting Up the ReactJS Project with ViteJS 2:50 Create CurrencyConverter functional component 6:00 Styling the App with CSS 8:02 API for exchange rates 8:59 Fetch API, sending request to the API using fetch() function and retrieving the data with async/await with 'useEffect' hooks 26:47 Error handling with try/catch in async functions 29:51 Final Testing of the Currency Converter Application

🕒 Timestamps: 0:25 Setting Up the ReactJS Project with ViteJS 2:43 Create DiceRolling functional component 5:16 Adding Font Awesome Icon to the project 10:05 Styling the App with CSS using Animation 16:19 Use the 'setTimeout' function to roll the dice 19:58 Final Testing of the Dice Rolling Application

🕒 Timestamps: 0:42 Setting Up the ReactJS Project with ViteJS 2:14 Create MortgageCalculator functional component 4:56 JSX with Form and Input elements 7:53 Styling the App with CSS 14:24 Store input values into state variable with useState hook 17:00 Add onChange event handlers to inputs 19:53 Implement the function for calculating the monthly payment 27:41 Final Testing of the Mortgage Calculator Application

🕒 Timestamps: 1:15 Setting Up the JS/HTML/CSS Project with ViteJS 2:45 Creating the Game Board in HTML 5:13 Styling the Game Board with CSS 10:00 Preparing JavaScript variables for the game 11:59 Handling Click Events 17:10 Implementing the Tic Tac Toe Game Logic 27:37 Testing and debugging the Tic Tac Toe Application

🕒 Timestamps: 2:11 Extend Sign-Up form by adding the link to Sign-In form 2:44 Create SignInForm functional component 4:01 Navigation between Sign-Up and Sign-In forms with the parent component 9:43 Reduce code duplication by creating FormGroup component 17:06 Migrate styles to CSS modules 30:09 Final Testing and Debugging of the Forms Application

🕒 Timestamps: 1:41 Create a new React.js Project with Vite 5:08 Add SignUpForm component to the App, write JSX 9:50 Styling the Sign-Up Form with CSS 16:28 Store input values into state variable with useState hook 17:48 Hadle the Sign Up Form Submission with Validation 25:35 Add onChange event handlers to inputs 27:57 Provide error messages to the user 31:07 Adjust the styles for small devices 32:19 Final Testing of the Sign-Up Form Application

Browser validation or client side validation? 🙃

🕒 Timestamps: 2:14 Install Email.js npm package 3:10 Add ContactForm functional component to React Project 4:30 JSX for Contact Form with two inputs, textarea, and button 8:23 Styling the Contact Form with CSS 14:40 Store the form data into state variable with useState React hook 17:20 Event Handling for submitting the Contact Form 19:20 Emails.js docs, create Service and Template for emails 21:50 Send email from React code using Email.js 24:01 Conditional rendering to show message after sending the email 25:33 Using Environment Variables to store Keys 27:40 Testing the Contact Form Application

🕒 Timestamps: 0:00 Introduction 0:41 Setting Up the React Project 1:39 Installing React Router 3:13 Writing JSX code for Navigation 5:41 Creating Portfolio Pages and Components 8:33 Implementing Routing and Navigation 12:01 Styling the Portfolio App 15:17 Testing the App and Conclusion

Thank you Detailed video loved it , keep going

🕒 Timestamps: 0:00 Introduction 0:23 The design of the Tic Tac Toe Game 0:57 Setting Up the React Project 3:23 Creating the Game Components 6:12 Styling the Game Board 12:01 Managing State and Props 14:55 Handling Click Events 18:38 Implementing Tic Tac Toe Game Logic 25:28 Testing and debugging the Tic Tac Toe Application

Like it

Like it

⏱ Timestamps: 0:08 What is React JS? 2:02 Creating React Project with Vite JS 3:43 Run and check the App created with Vite 4:10 Structure of the React Project created with Vite 6:29 'Hello World' Project in React JS + Vite 9:10 What is JSX in React? The basic JSX Rules 11:07 Converting JSX into JavaScript code with React.createElement() 14:40 Simple JSX for To-Do List App 17:50 What is a Component in React? Types of Components 18:50 Creating Functional Component 23:43 Props in React. Key Features of Props 26:05 Object Destructuring in Functional Components 26:58 What Are React Hooks? The basic Rules of React Hooks 27:45 The ‘useState’ Hook 28:40 Input and Button elements in JSX 33:07 Store and change the input's value with the 'useState' hook 35:15 onClick Event Handler for the Button 37:40 Conditional Rendering in React 39:55 Data Structure for the To-Do List App. Array of objects in React JS 41:16 Adding the new todo object to the state array 43:55 Rendering an array of objects in JSX with JS map function 47:21 Removing an object by ID from the array using JS filter function 54:15 Adding checkbox element and event handlers to JSX 55:15 Searching for a todo object by ID in the array and modifying it 1:01:57 Deploying Vite App to GitHub Pages 1:06:28 Check the Deployed App on GitHub Pages 1:08:21 What is useEffect hook in React? Syntax and Key Concepts of the useEffect hook in React? 1:09:54 What is localStorage in JavaScript? JSON methods stringify() and parse() 1:10:46 Saving todos into localStorage using hook useEffect 1:13:02 Displaying todos from localStorage 1:17:31 What is Code Refactoring? Dividing Code into Small Components. Lifting State Up 1:18:40 Creating separate Component for adding todos 1:25:15 Creating ToDo Component for each todo row 1:28:25 Testing and debugging the To-Do List Application

great guide here. learned a decent bit from this. thanks!

Handy thing to learn!

great video!

ty for share my friend!!!

ty for this video bro

I actually happen to love your content as well haha

Great video!

Very well explained and easy to follow with the visuals.

great content , youve got me interested :)