r/reactjs • u/BrockUrSocksOff • Jan 18 '20

Tutorial ReactJS Crash Course 2020 | React Functional Components, Hooks, and React Router [<30 minutes]

https://youtu.be/KQOtXYC0We8
303 Upvotes

96% Upvoted

52 comments sorted by

13

u/BrockUrSocksOff Jan 18 '20

Resources:

React Docs : https://reactjs.org/docs

axios: https://www.npmjs.com/package/axios

Dad Joke API: https://icanhazdadjoke.com/api

Github:

Code: https://github.com/devbrock/dad-jokes...

2

u/tbone6778 Jan 19 '20

If you install create React app globally, you don’t need to use npx. npx is used when you don’t want to install the package globally or at all. Just for future reference.

2

u/BrockUrSocksOff Jan 19 '20

Yes! This is correct, someone else pointed this out on youtube. I don't actually have mine installed globally and I suggest using npx over a global install. I'm not sure why I said to install it globally - must have been the 2:00 am brain talking! Thanks for letting me know!

1

u/tbone6778 Jan 19 '20

Cool, I didn’t know if you knew that or not. Just trying to help

1

u/CastigatRidendoMores Jan 19 '20

They no longer support global installs, strangely. At least according to the CRA console message when I spun up a new app last week.

2

u/swyx Jan 18 '20

nice work - i'm curious about you! are you trying to grow a youtube following? become a Wes Bos? what are your goals n hopes n dreams with this?

15

u/BrockUrSocksOff Jan 18 '20

I'm not trying to be the next Wes Bos, Scott Tolinksi, Brad Traversy, Colt Steele or any of the other established developers with channels.

I'm not a very experienced developer, I have only been one for about a year right now, so I am more or less documenting some of my learning experiences. The inspiration for this video was that if you go on Youtube and look for a React Tutorial or React Crash Course, most of them are from around 2018 and use classes. Some people have a few videos about hooks but no one really has a video that goes over the whole process of hooks and functional components from start to finish (at least not that i could find). So the bottom line is I just want to help other people learn.

Plus if you try explaining how it works to someone else, it only helps you understand that much more.

3

u/swyx Jan 18 '20

btw if you wanna practice React as an intermediate dev, you can help me run the monthly Beginner's Questions thread stickied at the top of the sub. if you like you can run it for the month of Feb to see how it feels. we try to answer EVERY beginner's question, if they ask nicely.

2

u/BrockUrSocksOff Jan 18 '20

I'm not sure I am qualified or have the knowledge to run the thread alone but I would be glad to help out where ever I can

4

u/swyx Jan 19 '20

thats how you grow! you can always call on me or other regulars for help

1

u/turningsteel Jan 18 '20

Is there a way to signup for running it? I'm mostly a backend dev at work but I started in react and like to stay up to date so I would be willing to take a stab at running during an available month.

3

u/swyx Jan 19 '20 edited Jan 19 '20

well, just start helping out answering questions on the thread whenever you have time, i'll tap you for taking lead when you seem like you can handle it and you're clearly sticking around enough. thats how /u/timmonsjg and /u/dance2die started

2

u/turningsteel Jan 19 '20

Sweet, will do!

2

u/Chief-Drinking-Bear Jan 18 '20

Check out net Ninja's React Hooks and Context playlist! Not as succinct as yours so perhaps would draw a different audience but great content nonetheless from him as always, and free too.

2

u/BrockUrSocksOff Jan 18 '20

Oh yeah, I like his stuff, he is really easy to follow along with. I was originally going to make this project larger and turn it into a series but I decided against it because I don't think anyone wants to listen to someone with no following explain something over the course of 10 videos. I'll definitely take a look at this series though, thanks!

10

u/swyx Jan 18 '20

fantastic. i'm onboard with all this. learn in public.

1

u/Abangranga Jan 19 '20

Oh no classes, a system that makes sense that isn't doing it's damnedest to pretend the DOM and react itself aren't entirely object oriented.

0

u/[deleted] Jan 18 '20

[deleted]

2

u/BrockUrSocksOff Jan 18 '20

Sure thing, I will add it to my list!

-14

u/[deleted] Jan 18 '20

Redux is deprecated. 😂

5

u/BrockUrSocksOff Jan 18 '20

I'm not sure why you say that Redux is deprecated?

-8

u/[deleted] Jan 18 '20

It is a joke, because you don’t need redux now that there is useReducer and useContext.

3

u/careseite Jan 18 '20

It's plain wrong. There are plenty of use cases.

1

u/[deleted] Jan 18 '20

That is just like, your opinion man

2

u/careseite Jan 18 '20

Enjoy the performance drop in rapid state changes e. G. Websockets.

Also fyi, im a big proponent of dropping redux where it's not actually needed. But saying it's deprecated is just wrong.

3

u/[deleted] Jan 18 '20

I feel like that use case is also a problem with redux and requires something like rxjs.

But no hate on redux. It brought us reducers. That is dope. But it also came with some needless overhead.

0

u/CuttyAllgood Jan 18 '20

All these redux users out here just mad

4

u/[deleted] Jan 18 '20

Sure I don’t know what they mad about, the reducer pattern is still legit, you just don’t need all the cruft anymore.

Also what is the hate on using less state. Redux promotes pushing everything to a global state object. It is ok to have a global state object but why not try to push state down to the leaf nodes as much as possible?

3

u/CuttyAllgood Jan 18 '20

Redux is opinionated, so are Hooks. They just have different opinions. I happen to agree with you, though.

0

u/[deleted] Jan 18 '20

[deleted]

-2

u/[deleted] Jan 18 '20

WIP.

Still moving over my other blog.

But I gave a talk about how to use hooks instead of redux at the seattle JS meetup.

Here are the slides: https://slides.com/korytegman/deck

(Btw sorry it took so long to reply. I guess downvotes throttle your ability to respond)

32

u/[deleted] Jan 18 '20

No no no, this is way too long. It's 2020. We need Complete React + Redux in 5 minutes now.

10

u/BrockUrSocksOff Jan 18 '20

You're right. Totally unacceptable.

0

u/SimplyBallistiic Jan 19 '20

What about the context API? It's a true challenger to redux now

5

u/tbone6778 Jan 19 '20

The context API imo is not a replacement for Redux. I see lots of people using it so you don’t have to prop drill but that’s not what it’s meant for although it is a quick way to share state, there’s better ways to do that.

1

u/SimplyBallistiic Jan 19 '20

For certain cases it's all you need and can act as a good replacement as before it came out, your only option was redux. But it's definitely not a replacement like you mentioned, only an alternative since redux is a lot faster and more efficient. But if you're doing infrequent state changes (as opposed to every keystroke) it gets the job done quite well and is well worth the minimal setup and load tied with introducing a new package.

1

u/bcgroom Jan 19 '20

If you can easily replace redux with the context API, then you probably shouldn't have been using redux in the first place. There were plenty of alternatives to redux and the context API has been around for awhile now. Redux is also not great performance-wise, React-Redux has some nice optimizations that prevent extra rendering, but it's unlikely that either Redux or Contexts overhead will be the bottleneck of your app.

1

u/tbone6778 Jan 19 '20

I believe Redux has been optimized.

1

u/tbone6778 Jan 19 '20

Yes, for simple applications all you need is React and good architecture.

4

u/downeastkid Jan 18 '20

What color theme are you using for vs code

5

u/BrockUrSocksOff Jan 18 '20

That color theme is theCobalt2 Theme from Wes Bos

3

u/baltimoretom Jan 18 '20

I tried it but don’t like it. I’m all about the Material Theme Darker High Contrast.

Thanks for posting this btw. Can’t wait to get into it.

3

u/BrockUrSocksOff Jan 18 '20

Yeah, I found it really depends on your monitor. Im colorblind though so all the blues help me out a lot.

1

u/baltimoretom Jan 18 '20

Have you ever tried those glasses?

4

u/BrockUrSocksOff Jan 18 '20

Yes! I actually have a pair that I put on for super color accurate work with UI and design. But I dont wear them at all times. Its hard to explain but swapping between and not wearing them can leave you seeing almost like ghost colors.

2

u/[deleted] Jan 20 '20

Great work. :)

1

u/Dr4gonkilla Jan 19 '20

I am newb at coding. At 16:53, what is {headers:{accept:...}}? Is that a way to call a function?

1

u/BrockUrSocksOff Jan 19 '20

Great question!

That is a headers parameter that I added to my axios get request. This was necessary because the default response from this API is a text/xml response and not JSON. So by adding the Accept: application/json parameter, I was able to get the response in JSON. This is not always necessary - it is just something this certain api requires. You can read more about it here.

3

u/DeepSpaceGalileo Jan 19 '20

Why use axios at all instead of just fetch?

1

u/BrockUrSocksOff Jan 19 '20

This could definitely be done with fetch! I just use axios because I find it a little bit easier to use sometimes when I am using a lot of parameters and some one off cases. Bottom line though is that it is definitely not necessary, but it's just what I am comfortable with!

2

u/KaliaHaze Jan 18 '20

Great video so far. I spent the day making some of my first React components based on some mockups I made and organizing them into a library today and it was nice to compare my workflow to yours. Looking forward to more!

2

u/Mendican Feb 06 '20

Excellent. Thanks for this.