Learn React With This ONE Project

[@TechWithTim]

Access my free guide on "How To Make Money From Coding" by signing up for my newsletter: techwithtim.net/newsletter

[@useronetwothree-z6f]

thx tim

[@ElenaS-de9hq]

Thanks for your efforts! I would like to see more of your projects with Windsurf. 💪

[@Huy-G-Le]

Uh hi, I'm having problem starting from the UseEffect section, where no movie title or poster or year would show up. This happen after I replace the const movies with const [movies, setMovies] = useState([]); Can anyone help please? I did everything word for word but this happen.

[@iowatheother4986]

help please! react hooks in eslint becomes undeclared after the node module appears. then it tells me to type npm fund, and a list pop ups, and when i run dev, i get client and ssr page reload. [vite] (client) page reload [vite] (ssr) page reload 107 packages are looking for funding run `npm fund` for details frontend@0.0.0 │ │ └── eslint@9.18.0 │ │ └── @eslint-community/eslint-utils@4.4.1, eslint-visitor-keys@3.4.3, @eslint/eslintrc@3.2.0, eslint-scope@8.2.0, eslint-visitor-keys@4.2.0, espree@10.3.0 │ │ └── @humanwhocodes/module-importer@1.0.1, @humanwhocodes │ │ └── ajv@6.12.6 │ └─┬ github │ │ └── chalk@4.1.2 │ └── │ └── ansi-styles@4.3.0 │ │ └── vite@6.0.7 │ │ └── postcss@8.5.1 │ └── nanoid@3.3.8 │ │ └── @babel/core@7.26.0 │ └── browserslist@4.24.4, caniuse-lite@1.0.30001692, update-browserslist-db@1.1.2 └── array-includes@3.1.8, call-bind@1.0.8, function-bind@1.1.2, define-data-property@1.1.4, gopd@1.2.0, has-property-descriptors@1.0.2, define-properties@1.2.1, es-abstract@1.23.9, array-buffer-byte-length@1.0.2, arraybuffer.prototype.slice@1.0.4, available-typed-arrays@1.0.7, call-bound@1.0.3, data-view-buffer@1.0.2, data-view-byte-offset@1.0.1, es-to-primitive@1.3.0, is-date-object@1.1.0, is-symbol@1.1.1, function.prototype.name@1.1.8, functions-have-names@1.2.3, get-symbol-description@1.1.0, globalthis@1.0.4, has-proto@1.2.0, has-symbols@1.1.0, is-array-buffer@3.0.5, is-callable@1.2.7, is-data-view@1.0.2, is-regex@1.2.1, is-shared-array-buffer@1.0.4, is-typed-array@1.1.15, is-weakref@1.1.0, object-inspect@1.13.3, object.assign@4.1.7, own-keys@1.0.1, regexp.prototype.flags@1.5.4, safe-array-concat@1.1.3, safe-push-apply@1.0.0, safe-regex-test@1.1.0, string.prototype.trim@1.2.10, string.prototype.trimend@1.0.9, string.prototype.trimstart@1.0.8, typed-array-byte-length@1.0.3, typed-array-byte-offset@1.0.4, reflect.getprototypeof@1.0.10, which-builtin-type@1.2.1, is-async-function@2.1.0, is-finalizationregistry@1.1.1, is-generator-function@1.1.0, which-boxed-primitive@1.1.1, is-bigint@1.1.0, has-bigints@1.1.0, is-boolean-object@1.2.1, is-number-object@1.1.1, which-collection@1.0.2, is-map@2.0.3, is-set@2.0.3, is-weakmap@2.0.2, is-weakset@2.0.4, typed-array-length@1.0.7, unbox-primitive@1.1.0, which-typed-array@1.1.18, has-tostringtag@1.0.2, side-channel@1.1.0, side-channel-list@1.0.0, side-channel-map@1.0.1, side-channel-weakmap@1.0.2, get-intrinsic@1.2.7, is-string@1.1.1, array.prototype.findlast@1.2.5, array.prototype.flatmap@1.3.3, object.fromentries@2.0.8, object.values@1.2.1, resolve@2.0.0-next.5, is-core-module@2.16.1, supports-preserve-symlinks-flag@1.0.0, string.prototype.matchall@4.0.12, array.prototype.flat@1.3.3

[@techandgaming6040]

You don't learn react in this video but if you already learn react , you wanna revise it ⚛️ this the best video 💥

[@SmashBrosRPG]

This is by far one of the best tutorials I have ever seen *PERIOD* - you are really good at explaining things. Please make more videos on React!

[@user-tv7ji4vn7h]

You rock Tim, every time I want to learn a new framework or tool, I come to you. I was using Odin Project and was so confused, but everything you're saying is crystal clear and is even making me excited to learn it. You have a gift. Thank you so much

[@tharanabopearachchi6838]

A Great video for beginner level who knows some contexts about react. This Vedio helped me to sharpen and clarify some of the concepts which I barely understood. Thank you so much for this Tim.

[@HardCorn12]

in the movie card component we can set a isVisible state which is defaulted to true. then in the parent component you create a function that is being sent down to the movie card - in that function you can set the isVisible to false and when you search - if the movie name does not have the searchQuery in it - set the isVisible to false. that way you dont need to have api calls in the search since you already loaded everything in the initial render - i know im not so clear here but hopefully i made sense . other than that - great refresher for those who didnt touch react for a few years and wanted a small reminder.

[@6moin9]

love the way you explain everything, every small thing which i found like its new, u have explained them well and very effectively and efficiently in time. one of the Best videos, you also dont confuse or throw everything out at once, step by step and the way of explaining is just awesome!. Ive subscribed !

[@angelorigo]

Great tutorial, specially to someone who needs to start learning ReactJs fast

[@MrShrestha07]

Can u help me a bit

[@rahim5165]

Just Amazing!!! Clear and straightforward. It is best for those who are already familiar with React fundamentals. If you want to practice, I would suggest you add filtering by movie type eg. action, sci-fi, horror, romance etc.

[@sanioksasha3338]

Bro, this one is phenomenal! Please keep doing recat tutorials. You could even continue doing this project, like you know making it more functional, bigger and more advanced.

[@LynxesYT]

Great video Tim, we are looking for a complete full stack python project from you❤❤

[@KazukiyanOfficial]

To be honest, the usage of the useState hook is much clearer to me after watching this tutorial. 😊 Cheers

[@RockstahRolln]

Watch the one by Bro Code!

[@voicefilms]

My favorite channel when it comes to coding big up Tim!

[@flashamm]

Just a heads up that I did not see down in the comments yet. In the favorites functionality, there is an issue with displaying the empty favorites part of the component because even if favorites is empty, it is still an empty array and therefore if (favorites) is still true. If anyone is having issues, you can change this to favorites.length > 0 and then it should work properly.

[@cecilselormamediku9560]

If favorite is empty it's return false

[@flashamm]

@cecilselormamediku9560 for me it was not returning false until I changed it to what I said.

[@garzuze]

Great video! It should get more recognition.

[@GigelBosket]

This project ate my brain but at least now I have more actual knowledge and know how to connect each react element

[@RichardHorvatich963]

I'm pretty new to react. Working on a website and from spending all day on it, I learned how to do what most of this video is teaching up to API calling. I see you used map() to create the movie-grid in rows. Is there any reason this is better/worse compared to using flex in CSS? And thanks for this video. API's, state and useEffect seem to be the higher level stuff I'm going to need to actually be able to get a job as a developer. I have html/css skills. Something I notice about React is how clean the code is when using a component to create a lot of the same type of component, for this example, the movie-cards. Instead of loads of copy and paste 's, it's one short html component, and then they get called from a different file. Super clean.

[@yourlocalhuman3526]

flex wrap creates inconsistent displays of cards (elements) when there is a line (row) that has an unequal amount of cards compared to the other rows that appear before it. mad coincidence but I just had this video pop up in my feed that explains this. search "Why I don't use flex-wrap anymore (and what to use instead)"

[@RichardHorvatich963]

@yourlocalhuman3526 for this issue is flex and flex-wrap the same, as they are different for what I typically use them for. But thanks for the find. I'll have to experiment to see exactly what you mean.

[@bharatdubey83]

bro please include some advanced react concepts also

[@flyingzeppo]

His name is Tim, not Bro. It's literally in the name of the channel.

[@rafaelfigfigueiredo2988]

Yeah Bro if you want a Bro you should head to Bro Code where there's a Bro who codes Broh

[@rafaelfigfigueiredo2988]

Actually just checked he does code react lmao check him too

[@hellboy6167]

😂😂

[@mohammadalam9936]

Lol

[@leulwebshet9750]

Lots of love from Ethiopia🇪🇹

[@mohammedahmed-m7a]

Hahaha agincheshalew

[@Mecagothits]

same to you

[@Mecagothits]

really make things a lot easier

[@faisalhrbk]

bruh

[@Mecagothits]

@@faisalhrbk did you ge the state management ?

[@mitsk2002]

54:00 - Why isn't the import link automatically filling in once I start typing

[@hellboy6167]

Awesome 🙌 you made it very clear

[@alimihakeem841]

Thanks so much Tim. I found it helpful. ❤

[@darkshadow-og2ss]

That was some good time. Thanks Tim

[@ElenaS-de9hq]

I would like to see more of your projects with Windsurf.

[@Mecagothits]

bruh it s the same

[@WaverOst]

Nice interior :) Also, great tutorial, as always :)

[@elifdurukan9022]

I used your project to make practice, thank you so much!

[@LagrangePoint0]

Does it actually work once it is completed?

[@elifdurukan9022]

@@LagrangePoint0its work but its a basic project for beginners

[@minakadri2221]

Awesome Video ! Can you please do a second react project just like this one and maybe do a website with more pages and features .

[@Dreamer_78]

Спасибо Вам Большое За ваш труд! Было очень интересно и познавательно

[@abhilashm3278]

Thank you so much for this

[@lujdivertid]

I followed along and wrote all the code as they are supposed to be. The like functionality is not working. I tried a couple times to find the problem but I failed to find it. Overall, it is an amazing project to work on. Thank you Tim.

[@patrickmateus-iq8bi]

First here. What's up Tim, much love from Namibia🇳🇦

[@DiRo0566]

Thanks, great work!

[@Askerinoglu06]

perfection bbro thank you so muck

[@DineshReddy-o4q]

Always thank you ❤

[@MothS-m2r]

Windsurf is great at teaching programming👍

[@dfields9511]

gr8 vid, few months ago I used another youtuber's videos to learn react, I enjoy other perspectives. on the subject. app is a bit more useful then a Blog app

[@Mecagothits]

finally thanks Tm

[@ataru-music]

Really useful for kids.

[@AmeanAbdelfattah]

Can you do a video about how to build your own DBMS? I don't mean downloading sqlite or postgre and creating a database. I mean actually building one from scratch; what languages should we use, what knowledge should we have, etc. I've been using databases for years and its a project i always wanted to get into. Maybe perhaps making a small video demoing this? So i know where to start. Let know what you think.

[@FebinAugustine]

Hi Tim that's a good one... Could you please do the same like this where it's clear how to do register, login with backend. Also please tell how to use token and cookies.

[@RealWorldPortal464]

Can you make roadmap video for rust protocol engineer and rust block chain engineer focusing on job entering approach for freshers

[@shiwam_kun]

Hi Tim this video was helpful , but after halfway when u introduced hooks i kind of felt lost. Sorry but please if possible can you make one on hooks please ?

[@bharatdubey83]

next video on nodejs and mongodb please.

[@theperson624]

+1 Just like this tutorial

[@agarwal64]

Which font are you using?

[@ribarbs1246]

thanks bud!

[@Fundsaxis]

Nice and working perfectly on my local computer but when i wanted to deploy it, i ran into an error. When i ran npm run build i got a "dist" folder instead of a "build" folder

[@nils7768]

Great video! But I think you forgot to format your code (that was irony)

[@TechLearner-q9k]

windsurf is amazing

[@AbrahamPeter007]

The Movie DB is not opening champ. Is the server stopped service?

[@Arun30802]

Learn backend in one video tim✨

[@Mecagothits]

this is frontend

[@LagrangePoint0]

@@Mecagothits Does this project actually works? I've seen many comments of people complaining that it just doesn't work.

[@vriddhi04]

33:00

[@useronetwothree-z6f]

tim can we have a complete full stack python project tutorial from u?❤❤❤

[@panchamidinesh39]

in India the api website is not available, so what can be done?

[@GelzintVidaurre]

Can you make one that is with angular?❤😊

[@Ballthrower21]

Hi Tim, Is it possible for you to make a video about making a fullstack app in flask it doesnt have to be a crazy design mostly things like api’s blueprints, authentication, error handling etc all the things needed to make a good fullstack app.

[@TechWithTim]

I have many on this channel!

[@curiousBhavi]

wait how to get base url can anyone explain please

[@Vyom-h5n]

1:16:55

[@kathiravan3402]

Make a video on webscraping using js

[@Rambler_Gaming]

The search query is showing error, infact I ran your code too, it can't search movies now, please look after it once and tell us how to fix it, its showing the error message for the searchQuery.

[@theyash14]

React or html css for portfolio site?

[@tylerjohn3261]

Hey Tim. I think this video has been incredibly informational and helpful but I keep running into an issue after I install the Router where when I try to run the dev again, it tells me that the "dev" wasn't available in the json file even though I can clearly see it. I have followed your instructions watching this video three times and I am getting frustrated. I have been patient but dont know what to do anymore.

[@TechWithTim]

Make sure that your terminal is in the same directory as the package.json file

[@tylerjohn3261]

@@TechWithTim Thank you for the help.

[@leolu8588]

Yo you think you can continue the platformer series and like show us how to add new things maybe. Btw ur videos are great!!!!!

[@vannyaofficial7958]

good sharing brother 👦 ❤

[@lunstra_studios]

There is a lot of hype about typescript. Can you make one tutorial of that?

[@TechWithTim]

I have a full free video course on it

[@VictorHugoAlves7]

react is a library or a framework?

[@parkerblake-l6e]

library

[@iowatheother4986]

from what ive realized, react is a framework made up of javascript library

[@beinyourguard]

thanks!

[@JB12JB]

Why can't I see the .JSX files on my computer? I followed all the steps.

[@ezekielnano143]

Hi Tim, how do I get to join your software development programme

[@TechWithTim]

Simply sign up here; techwithtim.net/dev

[@Ginfio]

well done

[@akshitmitra523]

I faced an issue with CORS while fetching the API

[@kingC2689]

Can you make Same video for Django??

[@theperson624]

I have started learning React and will try to learn React from this video and give you feedback.

[@aichakhorchani4487]

not a lot of time since the vedio uploaded and the api database already changed so much less movies , some without pictures ..

[@aatalrashid]

SUBSCRIBED

[@azharalibhutto1209]

Great ❤❤❤

[@TechLearner-q9k]

bro how you blink like button when you say like in this video at 4:00

[@Digiweby]

38:00

[@Digiweby]

Date : 26/01/2025

[@crashoverride7496]

wait a second why state variables can change if you defined them with const ?

[@cecilselormamediku9560]

Great question 😂 I had the same, too. I'm going to do some research on it

[@yourlocalhuman3526]

your changing the value of the variable not the name. The value of the variable is determined from a dynamically changing thing/value. The variable cant be reassigned to something else but it's value can be change. The name of the variable cannot be chnaged tho

[@rannieperalta2192]

Fans from the Philippines here.

[@ricardocaballero6357]

I hate css too, love raw code but the design part is not my thing

[@Arun30802]

My bro 🖐🏻, I can build scalable backends with hit my head in the wall but i never want to center div. 😭

[@shubhankarpaygude]

that public API site is not loading what should i do

[@rejecht_3042]

check baseURL and Api key and make sure to console log too

[@faizshaikh5109]

Does anyone know what color theme tim uses in vs code?

[@JITHINMANOJS]

Monokai

[@Mecagothits]

Monokai

[@afclive9390]

For those of you who nees this: ♥

[@amoreschristianjosephd.7704]

❤

[@mawkuri5496]

mojo tutorial and flet tutorial please

[@Xpresstelevision]

❤❤❤❤❤❤❤❤

[@mintz347]

Try angular

[@TheComicSaga]

My navbar.css is not importing somehow, anyone? the name is correct , the import is also correct.

[@ZizouZ5]

check the path check the name of the css file (capital letters)

[@justchecking12]

1.34.45

[@iowatheother4986]

The Substance was very fucked up

[@epic3548]

You should give some subscribers an internship with you,my brother 🙏

[@kamgdy89]

without typescript? No thank you

[@nouarchami9007]

why u say at ny time ( i.... confused ) !!!! NO GOOD who are u...

[@harmansavla7510]

Eagerly waiting to meet you live on cam, mentoring me sir🫡

[@suhail_kc]

Learned a lot. Thank You ❤