Видео

A lesson that I learned the hard way: There is no "right way". Avoid premature optimisations! The first example works perfectly fine without even requiring any JavaScript. When you need to change it, you'll easily see all places that need to be adjusted at the same glance. Adjusting multiple lines at the same time is almost no work, especially with the right IDE. As long as all the lines to change are obvious, you don't introduce any technical debt! The architecture is simple and flexible. But what about the second example? You bake the assumption that the texts might change while the classes stay the same into the architecture. Now, if your customer decides that one of the buttons needs custom markup, what are you going to do? You'll need to refactor, maybe create a second array with class names, or maybe create an array of objects that hold the text and the class names? But what about the class names that are the same? Maybe spend some time figuring out the "default" classes and a way to add custom ones and remove some of the default ones? What about other extra markup? Maybe, you want an icon before one of the texts, maybe some additional accessibility attributes? You made it much harder to implement all of these changes. With the first example, it would have been easy! Don't waste your time thinking about extensibility you don't need! You'll make your code more prone to break and harder to maintain in the long run, and also less performant in most cases.

I agree with the sentiment of the video but I disagree with the example. The option on the left is the simplest and optimal solution to this problem. If you need to change a style you can find and replace within your selection. No worries. The option on the right adds complexity for no gain. Premature optimisation is often the enemy of good software. Let's say that you have a second page that requires navigation. A common error is to copy and paste the link list on the left. This is makes the codebase worse. You have now duplicated styles and functionality between components. It increases work as changes need to be done in two areas. It increases the risk of a bug as you may not realise the change must be done in two places.. At this stage, you would want to create a NavigationLink component to encapsulate the styling and functionality. The option on the right in the video would be suitable for dynamic pages and again, you would likely use a NavigationLink component. Like I said, I agree with the general video premise. I just feel it would be better expressed by demonstrating how developer decisions can help/hinder the maintainability of software as navigation evolves. I feel the static example in the video misses the wider point. Thanks for posting the video. It was well presented and generally enjoyed it 👍

You know, if you're working for just yourself, then what you said in this video, is correct. However, you need to put into account, that most developers work for companies. And this is where the problem truly arises. CEOs, for the most parts, they don't care about the quality of your code, they just want "fast food" software. I ain't lying here, this is a very well known fact. Just like in this video, it showed that good things take time to master. But CEOs, they don't "take time" to do crap. Therefore, most developers learned the cold, hard truth that they have to adapt to the way CEOs work, to code faster, better, in order to "race" with the speed of the CEOs. It's the "rat race" after all. Unless the CEOs change their ways of doing things, if not, I bet, more and more developers will continue to do exactly what you told them not to.

thanx Ryan <3 , can u link me yout video about generateStaticParams ?

thanks a lot man, simple and efficient <3

Thanks very helpful😶‍🌫

Key =item Is triggering me pretty hard

can you make an auth video using tanstack router ?

First comment here. I don’t have a degree yet, but learning web development currently. Here in my country they seams value a degree holder over someone that is good at what him or her does.

Hey Ryan👋🏻, great video! I'm currently working on a Next.js project where I have separate frontend and backend directories. I'm curious if there's a recommended way to integrate both frontend and backend within the same project directory? As a beginner learning Next.js, I'd appreciate any insights you might have on consolidating project structure. Thanks for your help! 🚀

I am encountering an issue with TanStack Router while trying to implement file-based routing. The requirement is to navigate to the homepage with a URL ending in /index.html. Could you please guide me on how to incorporate the .html extension in the routing setup, given that the project uses file-based routing?

I always asked to myself why thi new tag: now it is crystal clear. Thanks!

Thanks, i struggled with this so much. Now i get it!

Subscribed within first 5 minutes. Exactly what i was looking for. Api routes for dummies! Thank you

hey ryan i am a junior web developer and i would like to request u to review my react code that i made for login and sign-up in my project but it is not done yet. I think it will be done tomorrow. Thank you Ryan.

Who on earth writes react the same way as imperative code

What does that mean

Nice, but if you create a nextapi to handle functions from the backend, it logs users out after ah hour. I don't want to call my config from client side. I want to handle everything in next api functions

In imperative way you explicitly write the shortest possible code, that will just work, and you totally understand it. In "declarative" way you write the code you hope will work, using lots and lots of code that someone else wrote, and you, more often than not, don't really understand how it work.

it's quite simple: declarative means what you want, imparative means the how. look into languages that use annotation and decarators for a better understanding of declarative. like angular, typescript, spring boot. in angular if I want to create a service and use it inside a component, I don't need to imparitively create the service object and then pass it to the component to use. I just declare a class as a service and let angular do the creation and dependency inject for me into the component. HTML IS declarative, you just tell it what elements you want displayed and where and it takes care of rendering that in the DOM and displaying it in the web page. also CSS is declarative, you use it to tell the browser what colour the element should have as well as spacing, font, etc and never have to tell it how to do this. also functional programming is imparative. if you got a list of items and you want to perform operations on them and or filter some out, you would code up a for loop to imparitively iterative the items in the array and describe eact step, along with the if/else conditions. in functional programing, you would just stream the values and perfom a map, filter or other operations on it. with FP you're focued on describing the what, not the how. hope this helps.

Little tip, when you update a state based on its previous value prefer using the function instead of what you're doing with the items list for example. Like : [someNumber, setNumber] = useState(0); setNumber((prev) => prev+1) This way you're sure to always have the ACTUAL previous value. :)

Can you render a layout only for subroutes?

The difference is the same

If the submit button is blue then is declarative, if he button is red then it is imperative. Simple!

This article from the React docs might also help clear this up: react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative

good work

What could this library be used for in business practice? Can someone give some examples in words? Thank you!

not sure if this is a bug but I have a [domain] route that fetches from a database and that is showing as a static route

Redux toolkit doesn't have that much boilerplate , but as a beginner I find redux toolkit easier to read than zustand😅

Good stuff, well explained. It is great that you are not editing out the bugs!

obv info but thank you

I'm fairly sure the "ProductButton" component should just be an achor tag which you can do using the Link component. Just means you don't have to handle routing yourself.

Thanks for sharing this pattern, man. Great content ❤

But bro can you tell me what is generator function?

audio only feels like, ai talking instead of you

Bro what's the editor theme?

Hi Ryan, thanks so much for this video. I'm putting together yet another weather app, I know sooooo original. What I wanted to do is allow users to type in a location in the URL bar and get the current weather. I knew dynamic routing was the answer, but I wasn't sure how to set up this functionality. This video showed me how to do just that. Much ❤from Ohio

Awesome video!

Try avoiding React in the first place. Use it at your job, but invest your free time into learning tools that actually dk things right.

Ryan, not wanting to be a naysayer. Doing things in JavaScript doesn't make it more "accessible" mate. It just makes it easier as when you download ts scripts from the supabase site that don't LINT it is a pain in the arse. But what is more a pain in the arse is when we start a tutorial and we're using typescript and nothing you're showing us works. I would love to see you use ts and sort this craziness out for us. Like I said, really appreciate the effort but to show us JS you might as well be showing the greater NextJS community basic.

How do you consume the path from within a component?

Any reason you’re not opting out of routing by using ‘_components’ (private folder structure) instead of ‘components’ while in the app dir?

If you use 'src/' in your project structure, you can organize it like this: - src/app/ for all app route pages - src/components/ - src/db/ - src/lib/ This creates a cleaner structure. For components, the best practice I've found is to name them based on their function, like 'buttons', 'loading', or 'forms' - rather than naming them after pages (like 'settings' for the settings page). I'm a beginner in programming, and when my codebase gets too big, I find it difficult to locate things without proper organization."

Nice Sir

thanks

Thank you so much bro

please can you make a video about reseaults paginations? or add a load more using server side only?

Do we cheer on features that php and alike supported for about 20 years? Reactpeople are crazy.

True story 🍸

What about passwords? I don’t want my password to become a URL param for my website