- Видео 594
- Просмотров 1 125 106
Miss Xing (邢老师)
США
Добавлен 31 мар 2012
29. React 18 with TypeScript - React Router 6: Change Title
@MissXing
In this video, we’ll show you how to dynamically change the page title based on your route in a React application using React Router! 🌟 Whether you’re building a multi-page app or a single-page app with different sections, having a descriptive title for each page is crucial for a better user experience and SEO.
📝 What You’ll Learn:
1. How to use React Router to manage different routes in your app
2. Setting up a custom title for each route to match the page content
Using the useEffect hook to update the document title when the route changes
3. Use functional component to refactor the code.
Source code:
github.com/TinaXing2012/react/tree/main/day7-react-router/src
In this video, we’ll show you how to dynamically change the page title based on your route in a React application using React Router! 🌟 Whether you’re building a multi-page app or a single-page app with different sections, having a descriptive title for each page is crucial for a better user experience and SEO.
📝 What You’ll Learn:
1. How to use React Router to manage different routes in your app
2. Setting up a custom title for each route to match the page content
Using the useEffect hook to update the document title when the route changes
3. Use functional component to refactor the code.
Source code:
github.com/TinaXing2012/react/tree/main/day7-react-router/src
Просмотров: 53
Видео
28. React 18 with TypeScript - React Router 6: Protected Routes
Просмотров 46День назад
In this video, we’ll walk you through how to implement Protected Routes in a React application! 🚀 Whether you're building a user dashboard, an admin panel, or any app that requires authentication, protecting certain routes is essential for securing sensitive information. 🔐 What You'll Learn: 1. How to set up React Router for navigation 2. Implementing protected routes using React Router and Rea...
27. React 18 with TypeScript - React Router 6: useRoutes Hook
Просмотров 8321 день назад
@MissXing Description: In this video, we’ll explore the powerful useRoutes hook in React Router, a feature that simplifies route management and enables a more declarative and flexible approach to handling navigation in your React applications. You’ll learn how to: 1. Understand the useRoutes hook and how it replaces the traditional approach of defining routes with Route components. 2. Create an...
26. React 18 with TypeScript - React Router 6: Nested Routes
Просмотров 7921 день назад
@MissXing In this video, we dive deep into nested routes in React Router, a powerful feature that allows you to create more complex and structured routing for your React applications. Nested routes enable you to render components inside other components, making it easy to manage layouts and subviews in a clean and organized way. You’ll learn how to: 1. Set up nested routes to create a hierarchi...
25. React 18 with TypeScript - React Router 6: end and Navigate
Просмотров 3821 день назад
@MissXing Description: In this video, we’ll cover the Navigate component from React Router, which simplifies the process of programmatically redirecting users to different routes within your React application. Whether you’re handling login redirects, conditional navigation, or routing after form submissions, Navigate makes it effortless! You'll learn how to: 1. Use Navigate to perform automatic...
24. React 18 with TypeScript - React Router 6: Link and NavLink
Просмотров 5021 день назад
@MissXing In this video, we'll explore two essential components in React Router: Link and NavLink. These components are key to implementing navigation in your React applications, allowing users to move between different pages without reloading the entire app. You'll learn how to: 1. Use the Link component to create clickable links that enable navigation to different routes. 2. Understand the di...
23. React 18 with TypeScript - React Router 6: BrowserRouter, Routes, Route, etc
Просмотров 8121 день назад
@MissXing In this video, we dive deep into React Router, a powerful library used to handle navigation in React applications. We'll explore the core concepts of Routes and Route to help you manage page navigation in a single-page application (SPA). You'll learn how to: 1. Set up React Router in your project. 2. Use the Route component to define different paths and their corresponding components....
22. React 18 with TypeScript - Virtual DOM Diffing
Просмотров 173Месяц назад
@MissXing In this video, we'll dive deep into React's Virtual DOM (VDOM) and explore how its diffing algorithm optimizes UI updates for high performance. The Virtual DOM is a key part of React's architecture, allowing it to efficiently manage changes to the user interface without direct manipulation of the real DOM. But how does React decide what to update, and how does it make the process so f...
21. React 18 with TypeScript - Axios: a promise-based HTTP Client for node.js and the browser
Просмотров 150Месяц назад
@MissXing In this tutorial, you'll learn how to seamlessly integrate Axios with React to handle API requests efficiently. Axios is a popular HTTP client that makes it easy to fetch data from APIs, handle responses, and manage errors-all with minimal setup! What You'll Learn: 1. What Axios is and why it's better than the built-in Fetch API in React. 2. How to install Axios and set it up in a Rea...
20. React 18 with TypeScript - Component Driven Development with Workshop (CRDU Todos)
Просмотров 272Месяц назад
@MissXing In this video, we dive deep into Component Driven Development (CDD) using React! What you'll learn: What is Component Driven Development (CDD)? Understand the core principles of CDD and how it can streamline your React development process by creating self-contained, reusable components. Breaking down UI into Components: Learn how to break complex UIs into smaller, manageable component...
19. React 18 with TypeScript - Cross-Level Component Communication: Context API
Просмотров 87Месяц назад
@MissXing In this video, we’ll explore how to facilitate cross-level component communication in React using the Context API. This powerful feature allows you to share data and functionality across your component tree without the hassle of prop drilling. You’ll learn: Introduction to Context API: What it is and why it’s useful for managing global state in your React applications. Creating a Cont...
18. React 18 with TypeScript - Two Siblings Component Communication (2 ways to solve the problem).
Просмотров 103Месяц назад
@MissXing In this video, we’ll explore how to facilitate communication between sibling components in React. While siblings don’t have direct access to each other’s state, we’ll show you effective strategies to make them work together seamlessly. You’ll learn about: Lifting State Up: How to move shared state to a common parent component, enabling siblings to access and update it. Callback Functi...
17. React 18 with TypeScript - Child to Parent Component Communication
Просмотров 92Месяц назад
@MissXing In this video, we’ll dive into the important topic of child to parent component communication in React. This concept is essential for creating interactive applications where child components need to share data or trigger actions in their parent components. You’ll discover: Lifting State Up: How to manage state at a higher level and pass it down to child components. Callback Functions:...
16. React 18 with TypeScript - Parent to Child Component Communication
Просмотров 55Месяц назад
@MissXing In this video, we’ll focus on the essential concept of parent to child component communication in React. Understanding how to pass data between components is key to building robust applications, and we’ll guide you through the process step by step. By the end of this tutorial, you’ll have a clear understanding of how to utilize props for effective communication between parent and chil...
15. React 18 with TypeScript - Communication between Components
Просмотров 64Месяц назад
@MissXing In this video, we'll explore the fundamental concepts of component communication in React, a crucial aspect of building dynamic and responsive web applications. We'll break down how components interact with one another through props, state, and context, enabling you to create more maintainable and scalable code. In this video, we brief explained about different types of components com...
14. React 18 with TypeScript - Rules of using React hooks
Просмотров 141Месяц назад
14. React 18 with TypeScript - Rules of using React hooks
13. React 18 with TypeScript - useReducer Hook
Просмотров 232Месяц назад
13. React 18 with TypeScript - useReducer Hook
12. React 18 with TypeScript - useMemo Hook
Просмотров 158Месяц назад
12. React 18 with TypeScript - useMemo Hook
11. React 18 with TypeScript - useCallback Hook
Просмотров 171Месяц назад
11. React 18 with TypeScript - useCallback Hook
10. React 18 with TypeScript - useEffect Hook
Просмотров 127Месяц назад
10. React 18 with TypeScript - useEffect Hook
8. React 18 with TypeScript - Stateful vs Stateless Components
Просмотров 67Месяц назад
8. React 18 with TypeScript - Stateful vs Stateless Components
6. React 18 with TypeScript - useRef hook
Просмотров 142Месяц назад
6. React 18 with TypeScript - useRef hook
5. React 18 with TypeScript - useState Hook
Просмотров 109Месяц назад
5. React 18 with TypeScript - useState Hook
4. React 18 with TypeScript - Responding to Events
Просмотров 107Месяц назад
4. React 18 with TypeScript - Responding to Events
3. React 18 with TypeScript - What is component in React?
Просмотров 131Месяц назад
3. React 18 with TypeScript - What is component in React?
2. React 18 with TypeScript - JSX Syntax
Просмотров 116Месяц назад
2. React 18 with TypeScript - JSX Syntax
1. React 18 with TypeScript - React Intro + TypeScript Project Setup in VSC
Просмотров 397Месяц назад
1. React 18 with TypeScript - React Intro TypeScript Project Setup in VSC
7. Redux Toolkit - Introduce Redux Toolkit with Demo
Просмотров 54Месяц назад
7. Redux Toolkit - Introduce Redux Toolkit with Demo
is it equivalent to middleware in expressjs?
How to prevent users from accessing the .jsp file in the webapp folder because sometimes I want it to access via the servlet with the corresponding name then use the setAttribute function and then forward it to the .jsp page
Please tell me how to change the deployment location, because my C: disk has a limit, I want to save it on D: disk
I don't see the use of the word "destroy()... being called!" when stopping the server, please help me, and can you tell me more where tomcat is created in the directory, why must there be Archetype when creating project, otherwise it will not be possible to create tomcat
perfect🥰
I really like your way of teaching ♥
Crystalizing knowledge is not always a easy job, but you've done it masterfully here, thank you for sharing your knowledge.
Great explanation, thank you!
Are there any upcoming videos planned for this series?
It's a playlist, you should find more videos related to it, check my playlist.
Very resourceful, thank you for your effort on sharing knowledge!
Excellent content, congratulations!
U are not good with RUclips videoes. But contents are rich good. I will follow on. Thanks
I am using tomcat 10.1x which uses jakarta namespace replaced with javax namespace. We arefacing issues while implementing ttiles in jsp Anyone has any idea on this ?
Sorry, I haven't worked on the Servlets and JSPs for long time, based on the comment, I cannot tell the exact question you're facing.
Great content, thank your for your work!
Thank you for your support. I'm glad you are enjoying the content.
Amazing work, congratulations and thank you!
Glad you enjoyed it.
Excellent content, congratulations for your work!
Thank you for your effort on sharing knowledge, awesome content!
I appreciate your kind words!
Thank you, but it would have been helpful to link the solution videos in the description.
Sorry. Usually I put the Github link of the source code under video description. It's been long since the video is created.
Marry me
Haha...
Wow, one of the best tutorial on the subject
Thank you for your kind words, I'm glad you find the video useful. Let me know if you have any questions!
please make a video on context Api in react using javascript please
Keep watching, you'll see the video about Context APIs in the Playlist
your series for react is helpful
thank you for your efforts !! great explanation .
Add where clause for salesrep to reduce dataset for customer
You're Back Again ❤
very good, thank you
what is the i have to know before study this list? and i like you ❤❤
Thank you. Basic Javascript and TypeScript, a little bit about DOM.
@@MissXing thank you, sorry one another question, i now study spring security and i study your newest palylist, there are any thing else to study in spring security? and thank you again❤❤
@@MostafaKaoud-vn7xd Yes, there are you can learn after the playlist, like refresh the token, OAuth, etc.
@@MissXing thank you very much♥
Here the is no option is coming for create new serverlet
I just finished watching your entire React and Redux playlist. Will there be more videos added to this series, and are there any planned topics on security?
Yes, the topics remaining are axios, VDOM diffing, react router, still working on it, get interrupted by other tasks this week.
i realy like you, there are no explanation like you so i am proud that you are my teacher❤❤
Thank you
Hi mam Can u make videos on Spring boot Microservices architecture pls mam With a project
That's a great idea, I'll plan on it. Thanks
Hello Tina, i notice that it doesn't have 18th video on the list. Did you miss it?
Thank you so much. I've correct it. There's no missing video, I labeled it wrong.
Great explanation ❤
CRUD in title would yield more views, probably. I've never seen anyone naming it CRDU.
Como mamas, mejor cállate
Thank you for the effort you put into sharing your knowledge with the community. Blessings.
Good Explaination. PLease make a video on react memo, useMemo and useCallback in depth
Thanks. It's already there, you can find it in the React 18 with Typescript playlist in my channel.
ngl this series helped me a lot to understand jsp but man you are so cute (chatt am i wrong for falling in love with an online teacher?)
It's wonderful to watch an explanation that goes straight to the point, ramping up the complexity as necessary, without complex drawings about every class behind the scenes. Thank you!
Very clear explanation 😍 thank you so much
Tks 🎉
Thanks for nice videos
You are very clear to explain this shopping cart! Thank you.
Hi Ms.Tina
This is the latest version of react js , you teaching?
The latest one is 19 but still under development.
Thanks for all the content you have created I just wanna ask you if you can make a little intro for typescript before you start the react-typescript course ?? thanks in advance
Sure, I can do it after I finish react, but not sure when. Thanks
Thank u
啊啊啊老师你终于回来了😭😍你的视频是ytb上讲的最好的~
非常感谢 我女儿放preschool了 终于有点空闲时间