Learn React In 30 Minutes

Excellent as usual. This provides a solution I was looking for. I've recreated my WordPress blog with 500 posts with Astro and I'm recreating the CMS infrastructure I need from scratch with mongodb. I need my partner to be able to add things to posts such as related links, on page toc, json-ld faq, etc. that I can modify and display with components.

This functionality seems to be a super simple way to allow entry of the elements using the form in a manner I can capture and load into the db. I've been needing to learn React. Now its an imperative.

why do i get error e404 when i write npx creae-react-app.

Sorry I had to go away from this tut because after removing the boilerplate around 5 mins in I couldnt get "hello world" to appear in the localhost:3000 page :S Shame!

In 30 minutes you will learn how to write react. See ‘react’

when i run the npx command i receive 8 errors. I did everything as you show in your video...

You made it more complicated than needed by using the same var names 10 different ways.

For me there was a problem with uuid library. After pasting to the terminal "npm i uuid" i got error of 79 vulnerabilities (13 low, 20 moderate, 42 high, 4 critical). With info about maintain this issue by typing "npm audit fix --force" into the console. But it gets me only into the loop with localhost:3000 wont load properly. I found a solution. Type into the terminal: npm set audit false. It solve the issue about vulberabilities, but it gets bunch of errors when load the page. I found solution you need to import uuid as following: import { v4 as uuidv4 } from "uuid"; instead of import uuidv4 from "uuid/v4"

It was fun

i did the exact the same stepts and it couldnt load

impressive is the wrong word for this. this was a total waste. can we stop with the “Learn ___ in [insert some ridiculous clickbait timeframe]” videos?

nobody is “learning react” based off of this video. the learning stopped after the install. after that it was just a rushed bunch of word vomit telling you exactly what to do. any first timers will leave this video MAYBE knowing how to recreate this very specific thing only, but most likely would need to play it simultaneously while they copy step by step.

terrible misleading garbage.

anyone else having issues with the useEffect overwritting the array of todos with an empty one?

HOLD UP VERSION 12

You are a legend!

He said doto once

you and Andrew Mead are great teachers... pildoras informatica para los que solo hablan español

As soon as I run the npx command I get errors: PS C:\Users\rogal\web-development> cd .\learn-react-in-x-minutes\
PS C:\Users\rogal\web-development\learn-react-in-x-minutes> npx create-react-app .
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\rogal\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\rogal\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rogal\AppData\Local\npm-cache\_logs\2023-07-03T19_19_33_508Z-debug-0.log
PS C:\Users\rogal\web-development\learn-react-in-x-minutes> cd ../
PS C:\Users\rogal\web-development> cd ../
PS C:\Users\rogal> cd ../
PS C:\Users> cd .../
cd : Cannot find path 'C:\Users\...\' because it does not exist.
At line:1 char:1
+ cd .../
+ ~~~~~~~
+ CategoryInfo : ObjectNotFound: (C:\Users\...\:String) [Set-Location], ItemNotFoundException
+ FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Commands.SetLocationCommand

Anyone know whats going on? Looked around online; some people said to delete node_modules folder and package-lock.json, but when I search for package-lock, there's like 15 different ones in different places on my computer.

That was awesome! I wanted to learn React and that really helped me, thanks alot!

You CANNOT learn react in 30 minutes unless you already have a basic hands on knowledge.

Todo todo={todo}

React really is trying to decorate poo but you only have poo to decorate it with... (Great tutorial though thx)

he said cums

a dog shit video of explaining how to use react, why would you even name it learn react in 30 minutes when your examples are shit and lack explanation also they are hella buggy leading to 'learn react in 30minutes' to a fucking 3 our debug session, waste of time

Great tutorial!
But why is it necessary to make a copy of the todos list instead of just modifying the state on it directly?

You are SO FAST...

a conceptual overview of react would have been helpful here....

Awesome video so my question is when it comes to creating project like this one do you just know from the start how to do all those things or does it required try and error and optimizations because from the look of it just just know how to do it without really think about it

i got it all working perfectly but the saving the data in storage
it just wont save it

Very difficult to follow, jumping around in files simply saying "now over here" - need to be glued to the video and constantly rewind to get something out this.

Damn.no-nonsense,quick and on point

thank you

todo.......todo...todo.............todo.....todo

if only someone makes a videos of him only saying TODO

A little quick for me as I'm new but still helpful!! Although... the todos got confusing towards the end lol. Also I had to modify the uuid import.

What extension are you using to have HTML snippets in the app.js file? I had to type in button and input instead of getting the snippet. Cant find a extension that works either

i had lots of issues with this tutorial what was supposed to take me 30 minutes to execute, took me 24 hours to make! Beware before thinking it is just a simple code, there are issues with the code in which im shocked at how this guy was able to run without any issues like i did

for people watching it now. Import import { v4 as uuid } from "uuid"; and use ` return [...prevTodos, { id: uuid(), name: name, complete: false }];`
if you have any issues

So in minute 22 i wasn't able to recover correctly the todos after refreshing . Doing some debuggin seems that the setItem was running 2 times. This was because the if statement that check for storedTodos will always resolved to true even if the array was empty, efectivly clearing the array. I had to check that the length of storedTodos was greater than 0 inf the if evalutaroand then it would work correctly.

What font are you using in VSCode

Hi Kyle, thank you for a great video

I have one question if you move the TodoList component in Apps.js down so that it is below the count of todo's in the list, the list starts to multiply itself at one point I had a 114 todos in my list all of then the same and then you have to remove them one by one...
Why is that happening?

very well explained

Very good video. I have some experience with angular for front end stuff, and always thought React looked kind of daunting. I find the simplification of the concepts in this video very helpful.

the boy you still got it

The way you call todo is making everything complicated 😢

I feel like you were more focused on making this video short than actually explaining things. I just felt like I was copying code for the most part and all the todos with the same name became confusing eventually

Great video. I now thoroughly understand why I have no desire to learn React because this shit looks over-complicated for no damn reason.

Thanks for this! Couldn’t really follow it but I will watch on repeat

Is there possibly a new version of this available, or an alternative you might recommend since we're about 3.5 years after this recording?

This has been the best help so far in my preliminary search to learn ReactJS having never used it (primarily C# background is what I have). Some of the versioning is different, though - and producing different output (or no output when I apply your edits about 5 min. in).

could you explain what 'todo' does...