Player FM - Internet Radio Done Right
Checked 2d ago
הוסף לפני two שנים
תוכן מסופק על ידי Ryan Solomon. כל תוכן הפודקאסטים כולל פרקים, גרפיקה ותיאורי פודקאסטים מועלים ומסופקים ישירות על ידי Ryan Solomon או שותף פלטפורמת הפודקאסט שלהם. אם אתה מאמין שמישהו משתמש ביצירה שלך המוגנת בזכויות יוצרים ללא רשותך, אתה יכול לעקוב אחר התהליך המתואר כאן https://he.player.fm/legal.
Player FM - אפליקציית פודקאסט
התחל במצב לא מקוון עם האפליקציה Player FM !
התחל במצב לא מקוון עם האפליקציה Player FM !
How to Use Conditional Rendering in React.js Like a Pro
Manage episode 433811436 series 3493400
תוכן מסופק על ידי Ryan Solomon. כל תוכן הפודקאסטים כולל פרקים, גרפיקה ותיאורי פודקאסטים מועלים ומסופקים ישירות על ידי Ryan Solomon או שותף פלטפורמת הפודקאסט שלהם. אם אתה מאמין שמישהו משתמש ביצירה שלך המוגנת בזכויות יוצרים ללא רשותך, אתה יכול לעקוב אחר התהליך המתואר כאן https://he.player.fm/legal.
Code: https://github.com/coderyansolomon/conditional-render
Docs: https://react.dev/learn/conditional-rendering
Learn exactly how to conditional render content in React.js!
296 פרקים
Manage episode 433811436 series 3493400
תוכן מסופק על ידי Ryan Solomon. כל תוכן הפודקאסטים כולל פרקים, גרפיקה ותיאורי פודקאסטים מועלים ומסופקים ישירות על ידי Ryan Solomon או שותף פלטפורמת הפודקאסט שלהם. אם אתה מאמין שמישהו משתמש ביצירה שלך המוגנת בזכויות יוצרים ללא רשותך, אתה יכול לעקוב אחר התהליך המתואר כאן https://he.player.fm/legal.
Code: https://github.com/coderyansolomon/conditional-render
Docs: https://react.dev/learn/conditional-rendering
Learn exactly how to conditional render content in React.js!
296 פרקים
כל הפרקים
×
1 5 JavaScript Tricks You Wish You Knew Sooner 10:24
10:24
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:24

1 This One Line Makes Your Next.js App Feel Instant ⚡ 10:06
10:06
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:06
Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching
Struggling to understand the difference between controlled and uncontrolled components in React? In this video, I'll walk you through simple examples of both, explain when you should use each, and show you the real-world pros and cons. 📚 What you'll learn: What a controlled component is What an uncontrolled component is How to implement both types of inputs Which approach is better for different situations Whether you're building simple forms or complex user interfaces, mastering this concept will make your React apps cleaner and easier to maintain. #react #webdevelopment #reactjs…
TLDR; don't mutate state directly. Always use setState when updating a piece of state. Also, pass a function when updating state based on previous state.
Today I explain a key point regarding server and client components in Next.js and passing props. Also, I explain what you should know regarding client boundaries in Next.js
Docs: https://www.korbit.ai/ I'm not affiliated with this tool in any way. We've just found it useful the last few months using it on our team. If you know any tools, or even something better than Korbit, let me know in the comments below.
Learn the recommended way to fetch data in Next.js as well as some patterns to know about client and server components.

1 Learn Modern React.js In 20 Minutes 20:43
20:43
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי20:43
In todays video, I cover the core concepts of React.js in about 20 minutes. Of course, this isn't everything you need to know. But it is a good starting place and review for some.

1 What "use client" Really Does In Next.js 10:17
10:17
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:17
docs: https://nextjs.org/docs/app/building-your-application/rendering/client-components

1 Finally Understand Server Components In Next.js 11:36
11:36
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי11:36
Docs: https://nextjs.org/docs/app/building-your-application/rendering/server-components
Docs: https://nextjs.org/docs/app/building-your-application/rendering
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
Learn how to use Suspense and streaming for sequential data fetching in Next.js
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#patterns
Docs: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#reference

1 Did You Know This About Custom Hooks In React.js? 11:51
11:51
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי11:51
Docs: https://react.dev/learn/reusing-logic-with-custom-hooks#recap

1 Your Complete Guide To Middleware In Next.js 15 10:47
10:47
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:47
Middleware Docs: https://nextjs.org/docs/app/building-your-application/routing/middleware
Docs: https://react.dev/learn/you-might-not-need-an-effect#subscribing-to-an-external-store
Docs: https://react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes

1 Your Guide To Parallel Routes In Next.js 15 10:24
10:24
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:24
Parallel Routes Docs: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#loading-and-error-ui
Today I cover an issue you might run into with running code multiple times in React -- especially when running initialization code -- and how React thinks you should solve it Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers
Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
Docs: https://react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers
Docs: https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params
Docs: https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
Route Groups Code: https://nextjs.org/docs/app/building-your-application/routing/route-groups
Docs: https://react.dev/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes
Docs: https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware
Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects
Docs: https://nextjs.org/docs/app/api-reference/functions/use-router#disabling-scroll-to-top
Docs: https://react.dev/learn/you-might-not-need-an-effect#how-to-remove-unnecessary-effects
Learn how to use the redirect and permanenetRedirect functions in Next.js -- https://nextjs.org/docs/app/building-your-application/routing/redirecting#redirect-function

1 How To Actually Use The useEffect Hook In Modern React.js 12:48
12:48
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי12:48
Docs: https://react.dev/learn/synchronizing-with-effects
Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense
Docs: https://react.dev/learn/synchronizing-with-effects
Docs: https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
https://react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs
Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling#uncaught-exceptions

1 What Are Refs In React.js, Really? Why? 10:29
10:29
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:29
https://react.dev/learn/referencing-values-with-refs#recap
Docs: https://nextjs.org/docs/app/building-your-application/routing/error-handling
Docs: https://nextjs.org/docs/app/api-reference/functions/use-router

1 Actually Understanding Context In React.js 18:04
18:04
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי18:04
Docs: https://react.dev/learn/passing-data-deeply-with-context Starter Project: https://github.com/coderyansolomon/react-context

1 The Recommended Way To Link In Next.js 15 10:10
10:10
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי10:10
Docs: https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating Link API - https://nextjs.org/docs/app/api-reference/components/link
Docs: https://react.dev/learn/passing-data-deeply-with-context
Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#templates

1 The Only useReducer Video You Need 24:21
24:21
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי24:21
Docs: https://react.dev/learn/extracting-state-logic-into-a-reducer#comparing-usestate-and-usereducer

1 How To Use Layouts Correctly In Next.js 15 12:30
12:30
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי12:30
Docs: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates
Today, I discuss the problem of state not being reset when rendering the same component in the same position within the React tree. Read more about this here: https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position
Today, I give a brief overview of how pages work in Next.js 15 and a few important things to know regarding pages. Learn more from the Next.js docs here: https://nextjs.org/docs/app/building-your-application/routing/pages
Today, I cover having a single source of truth in your React application's state. Docs: https://react.dev/learn/sharing-state-between-components#a-single-source-of-truth-for-each-state

1 A Next.js Fundamental You Need To Master 13:18
13:18
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי13:18
Learn how to define routes in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Docs: https://react.dev/learn/preserving-and-resetting-state#
Today, I cover the change from sync to async apis in Next.js 15. Docs: https://nextjs.org/docs/app/building-your-application/upgrading/version-15
Today, I discuss what it means to lift state in React.js and show you an example of how this might be done.

1 This Is How To Structure State In React.js 11:19
11:19
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי11:19
Today, I cover 5 principles of structuring state in your React applications. Docs: https://react.dev/learn/choosing-the-state-structure#
Today, I discuss a few solid options for organizing your Next.js projects. Docs: https://nextjs.org/docs/canary/app/building-your-application/routing/colocation#project-organization-strategies
Today, I show you a cool new feature of Next.js 15 forms: Client Side Navigation

1 The Modern Guide To Using State In React.js 17:22
17:22
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי17:22
I show you a step by step process for how to think about using state in React.js

1 I Really Didn't Understand This.. 11:27
11:27
הפעל מאוחר יותר
הפעל מאוחר יותר
רשימות
לייק
אהבתי11:27
Today, I discuss declarative vs imperative programming in the context of React.js and why it matters.
As a web developer, it can be easy to just push a PR without considering how you can make things more maintainable and extendable in the long run.
ברוכים הבאים אל Player FM!
Player FM סורק את האינטרנט עבור פודקאסטים באיכות גבוהה בשבילכם כדי שתהנו מהם כרגע. זה יישום הפודקאסט הטוב ביותר והוא עובד על אנדרואיד, iPhone ואינטרנט. הירשמו לסנכרון מנויים במכשירים שונים.