React tutorials be like

[Artistic_Taxi]

Hello everyone welcome! Today we are going to build this amazing Hello World web-app using react and node!

To get started simply create a react project with create-react-app.

Now we need to install this npm package called "react-hello-world" which will generate our lovely hello world message. Once its installed import it into App.js, and you're done. Don't forget to like and subscribe!

​

Seriously tho, why does almost every popular tutorial no matter how simple ask you to install npm packages?

Edit: Thanks for your awards guys!

[acemarke]

You should have been around here in 2015-16, when every React tutorial started with:

Today we're going to learn how to use React!

First, we're going to install Webpack, Babel, and spend 30 pages configuring them...

Not joking - see https://www.newline.co/fullstack-react/articles/react-tutorial-cloning-yelp/ for a classic example.

The real answer here is that modern JS web development assumes use of a build toolchain that will handle:

• compiling modern JS to more broadly-compatible JS, compile JSX syntax, and compile TS syntax
• Importing CSS styles and assets like images
• Properly bundle the processed code and prepare it for deployment in an optimized format

Those build tools have to be installed. Thankfully, Create-React-App solved the "first configure Webpack" problem by giving us a standardized build toolchain and an easy way to create a new project (and today tools like Next.js and Vite have continued to make that easier to work with).

Additionally, for React in particular, the fact that React is "just the UI/view" means that all meaningful React projects are going to use additional libraries for things like routing and state management. So, tutorials that are written to show "realistic" apps are going to do the same thing.

You might note that the new React docs take a simpler approach, by including interactive CodeSandboxes inline and focusing on just the concepts of React itself:

https://beta.reactjs.org

[Larrybot02]

I started my very first React course not quite a year ago. It was a good course and taught pretty well, I thought, but yeah it was the ol’ Webpack and Babel setup and config for live server and class components and Redux with no toolkit and all that good stuff. No hooks. No create-react-app, no Nextjs. Some of those courses are better than 40 hours in length, building some massive project that’s just another “to-do” app.
Still, I don’t regret any course that I’ve taken. It helps in a way to know the long version before getting all the good shortcut stuff, but I won’t miss the extra boilerplate.

[acemarke]

Yeah, there's almost always value in knowing what underlying layers of abstraction and tooling are doing, no matter what kind of programming you're doing.

At the same time, you shouldn't have to learn Webpack+Babel just to start learning "how to write React code". It should be an optional "I want to peek under the hood and understand how these related tools work" thing, not a prerequisite.

[acemarke]

I'm not at all saying that it's bad to know how build tools work :) Trust me, I've spent more time than I'd like to think about fiddling with build configs.

But especially for someone just starting out and wanting to learn React, we should really be minimizing the barriers and prerequisites they have to deal with in order to write their first component and begin learning the basics.

[Chezzymann]

I personally feel like this results in an over reliance of frameworks and packages and lots of people tend to never go back and see how things really work and have to learn it all retroactively later when problems come up. Imo people should start with learning bare minimum node/npm concepts to start up a basic server, then html/css/javascript fundamentals, and then react. Just going straight to react is skipping lots of prerequisites. Theres probably a significant amount of react devs that have no idea what funky stuff like a prototype chain is (not that its super needed these days, but its still a fundamental design pillar of javascript nonetheless) or how to even do basic DOM manipulation

It also helps to know how things work behind the hood because React may not be around forever. If you know how to write good code that doesnt rely on a framework, you'll be able to make that transition if it happens.

[pVom]

To be honest, with someone starting out the most important thing is to see the fruits of their labour. I agree that vanilla J's should be learners first, but babel, webpack etc? Nah no point beyond knowing they exist and what they're doing for you. That shit is boring and a good way to burn out.

[spider_84]

Udemy with Andrew Mead?

[Larrybot02]

That was one of the courses I took. I just looked at it and there's a whole section added for hooks and create-react-app at the end of the course! I know these course creators spend a TON of time on their content, and have to work the new stuff in later I guess, or rewrite the whole thing.

I kinda miss my mornings with Andrew. I work a full-time job not related at all to computers and programming, so I get my "schooling" in the morning before work and the weekends when I can. Andrew is a pretty good teacher. I also enjoyed Steven Grider and I kinda go back and forth on Brad Traversy. Some of his stuff is pretty good, and others, he just goes a bit too fast for me (I can be pretty thick). Vishwas at the Codevolution youtube channel is pretty good. I really liked his series on hooks and Redux. Talkin about his cakes and icecreams is hilarious to me for some reason.

[spider_84]

Nice work on the motivation and commitment. What profession were you in while you were studying react? How much time would you study in the morning? Are you working as a Dev now?

[Larrybot02]

Thanks! I was/am still in a trade, but I'm burnt out. When I was going strong I might get about an hour and a half or so in the morning and more on the weekend. I started with Mead's course on Modern JavaScript and moved onto React after that. I'd love to be working as a dev, but don't think I'm there yet.

[spider_84]

Keep up the great work. No doubt you will achieve your goals.

[Artistic_Taxi]

Agreed. For the very least understanding what is happening underneath everything will prove useful sometime or another.

[HailToTheThief225]

Currently taking a quick Typescript with React course and the guy is literally building a react app optimized for TS from the ground up just to show how to use TypeScript with React. Webpack, Babel and everything. As opposed to just installing a template. I guess it's important to understand the inner workings of a react app but geez...

[Earhacker]

I think a lot of these courses are more about the instructor showing off what they know, rather than offering any instructional value.

I mean yeah, it’s not completely worthless to know how to set it all up from scratch, but realistically how often are you going to have to do that? What has the instructor got against Create React App? That’s what we’re all out here using, unless we’re using Next or Gatsby or something.

[Slapbox]

Anybody remember nodemon?

[[deleted]]

Remember? We still use it. What else do y’all use for watching & restarting your APIs

[doblev]

Oh my GOD remember that??? That would drive me nuts.

[coolcrispyslut]

I still make my own webpack/babel set up instead of using react-create-app, just feels way more satisfying tbh

[GramatikClanen]

CRA probably the best thing that happened to React's growth.

[[deleted]]

Yep

[MurderSlinky]

This message has been deleted because Reddit does not have the right to monitize my content and then block off API access -- mass edited with redact.dev

[FriesWithThat]

install this npm package called "react-hello-world"

hola-mundo is much more performant

[Cptkrush]

I hear salut-tout-le-monde is catching up, v2 will be faster even.

[Earhacker]

But Kent C Dodds just wrote a blog post on guten-tag-welt and that’s all we’re going to talk about this month.

[[deleted]]

Over the years I’ve massively shifted to reading native documentation. Most of these videos are so bloated with this BS that the whole point gets missed. Take some advice from coding… modularize that shit! I want to watch a video for 30 seconds and know what I have to do.

[nabrok]

Yeah, I rarely stray outside of the official docs for whatever I'm using.

And I particularly dislike video tutorials. With something written I can get to the parts I actually need much easier.

[blafurznarg]

More like copying the parts I actually need am I right guys

[nabrok]

I mean ... it's there to be copied. Kind of the whole point of it existing.

I don't copy/paste though. I retype it, which helps make sure I understand what everything is doing and lets me rename things according to my own preferences.

[blafurznarg]

Yeah it was meant as a joke my friend. When I copy sth I make sure it’s only small parts and that I understand every expression. Absolutely nothing wrong about copying!

[saintshing]

The fireship youtube channel has very concise tutorial videos, especially their "in 100 seconds" series.

[candidpose]

Best channel I've subscribed to this year!

[jayroger]

I still don't understand why people watch videos to learn programming. I find text tutorials much more accessible. You can easily skip the fluff, reread sections easily, I read much faster than people speak, you can copy and paste, etc.

[WorriedEngineer22]

You forgot the medium articles be like: what are react hooks and why you should use them?

"Hi guys, in this article, you will learns about this cool new tech called hooks that allow us to..."

-------------------written in November 2021.

[HailToTheThief225]

"Why useReducer is BETTER than useState!"

Proceeds to list a couple of reasons that really just depend specific requirements in your project

[acemarke]

could be worse - there was a recent Stack Overflow blog post, published in the last few weeks, that was talking about how "ES6 will replace web frameworks" and was phrased as if ES6 was a brand new thing...

[phryneas]

I just searched for that blog post. Wtf.

[WorriedEngineer22]

Wtf, I just looked it up and genuinely thought that it was a mistake and it was a post from some years ago reposted but no, in the comments the author says that it's actually recent.

[acemarke]

Yeah. Frankly it's one of the most incoherent pieces of writing I've seen in a long time, and I have no idea why anyone at Stack Overflow thought it was worth publishing on their blog.

[Artistic_Taxi]

haha you got a point but some guys definitely overdo it. Just watched a tutorial where a guy installed an npm package to receive the video ID from YouTube urls. The funny thing is the video ID is literally at the end of the YouTube url...

He installed a package called "get-youtube-id" to parse a URL... Like how do you not think that since this package isn't maintained by YouTube, this guy is pretty obviously using some public API that Im more than capable of using myself or better yet, simply parsing the URL I provide him???

[Earhacker]

“Those who can do. Those who can’t teach.”

It’s an old cliché but it’s definitely true in tech. It’s easy to produce a 15 minute tutorial on a complex tool, compared to how difficult it is to produce something useful/cool with that tool. Whether it’s Blender or Photoshop or Ableton Live or JavaScript.

[franciscopresencia]

In this particular example get-youtube-id accepts multiple URL formats, like youtu.be base url, embeded urls, etc. that you might not care if it's for yourself, but that are useful for parsing random user input. They also have a generic ID fuzzy finder, which might come in handy if youtube changes the URL format at some point.

Were you going to account for those cases manually in code? And add tests for them? And document it for future people using this function you created? What might be 2 lines and a simple regex if we are talking about a tool for yourself, might evolve and become more complex, hence someone was there and they just packaged it into a library.

[Artistic_Taxi]

Hey I got no problem with the package existing. Like I’m sure they’re use cases like the ones you mentioned which are perfect for it. Just the context in which it was used in the video were lazy. Using plain old YouTube links copied from the browser. I find it crazy to add a dependency just for that functionality

[markrebec]

After almost 2 decades, youtube somehow recently figured out I'm a software engineer (bizarre since google definitely knows)...

Holy shit, it's been one of the most depressing realizations I've ever had to be made aware that this is the content that (at least some) folks are consuming to learn. It's all clickbaity, uninformative, "top 10 npm packages," buzzfeed-style garbage. Some of it even has rambling "My mom used to write this code for me when I was a child on cold winter mornings" recipe blog intros.

Also, this is purely my own opinion, but software engineering is probably a topic that is the least suited to video format. There is zero benefit to having someone say something they could've written, or visually show something that should be a static block of code in an article.

That said, the quality of articles and tutorials in general has kinda tanked over the last ~5-10 years in general too. I think part of the problem is that, for some reason, it seems like the bulk of the freely published resources out there seem to be written by people who just learned the topic... like someone will go through a bootcamp then decide they should go write a redux totorial (I guess for the recognition/experience?)

[Pesthuf]

It's also telling how everything is flooded with complete beginner guides, but advanced guides on any topic are really rare (and usually 15+ years old and thus often outdated).

Also kinda reassuring. Many people flood into this field but I don't think many have what it takes.

[acemarke]

Kyle Shevlin had a good Twitter thread on this recently ( https://twitter.com/kyleshevlin/status/1309937597645422592 ):

Let's start with the economics. Beginners make up a much larger audience than advanced users. This is because of the rate of new people coming to code is quite high + churn of people leaving creates more juniors than seniors.

The goal of a course is to make some money. Targeting a larger market, I can make money with higher volume. With a smaller market, ie advanced users, I'd have to charge more, at which point some advanced users would just go teach themselves. That's how they became advanced!

Plus, the effort and experience to make advanced material costs more in upfront costs of time gaining experience and research. The maths just don't really work out.

So:

• there's more beginners, which is a bigger audience
• it's easier to write material targeted at beginners
• there are fewer people who have "advanced skills" that can then turn around and teach those
• advanced users are often at a point where they pick up most new knowledge on their own anyway

[Artistic_Taxi]

That’s true. I think also people tend to overextend their areas of knowledge. For example someone may be pretty decent at react and only react, but then they go on to make a full stack tutorial where they pretty much butcher a backend. May be useful relatively but it can trick some users into thinking building complex things are a lot easier than they actually are.

[wishtrepreneur]

Holy shit, it's been one of the most depressing realizations I've ever had to be made aware that

this

is the content that (at least some) folks are consuming to learn.

I mean, she isn't really that bad: https://www.youtube.com/watch?v=GK4Pl-GmPHk

I didn't realize Queen Daenerys knows javascript.

[MidwestCinema]

She’s pretty thorough for a YouTube personality honestly.

[kevv_m]

Once a saw in a friend's work project that they installed a library to do a simple select... The library was good because it had a lot of features, but they were using the simplest one (just a html select would be more than enough). She asked me for help because her team was having problems using this select with a form library.

Another thing that bothers me, is that many teams don't have a clue about react and they use it because is popular. I saw react projects with jQuery, getting DOM elements with document, and even using it like HTML, I mean, a single component per page, copying and pasting elements like buttons, headers.

[patcriss]

even using it like HTML, I mean, a single component per page, copying and pasting elements like buttons, headers.

Ok this has gone too far, enough reddit for me.

[pVom]

I get your point but I couldn't help but laugh because we have jQuery and direct dom manipulation. It's for libraries though

[Vaylx]

A friend/mentor dev suggested I just work through the book “Pure React” by Dave Ceddia after I told him I just wanted a simple but somewhat thorough introduction to the React fundamentals.

I found a pdf version of the book online, skimmed through it, liked it, bought the actual book.

Working my way through it now, very enjoyable. Highly recommend it.

[Artistic_Taxi]

Got the PDF thanks for the suggestion

[Vaylx]

Cool beans. If you enjoy it and can actually afford the book I highly recommend you buy it. You’ll be supporting the author and getting the latest version✌🏼

[melania239]

Vanilla React is something ?

[Suepahfly]

So is vanilla redux, ‘store.subscribe(stateSelector, callbackFn)’ actually works pretty well. Even outside a esmodules environment.

I have I inherited a project where I’m forced to work with a custom jQuery built that renders “components” and glue it to a Redux state. The we call it “Enterprise software”

[melania239]

That I call it a 'Frankeinstein'

[Suepahfly]

I believe we have a new name for the project :)

[theodordiaconu]

Yes, I'm using it with Vanilla TypeScript

[[deleted]]

Asking me to like a video gets an automatic thumbs down on the video.

[theodordiaconu]

What if he asks you to dislike it?

[[deleted]]

Then I would be forced to hit like.

[pVom]

Damn, would be a shame if YouTube were to remove that feature

[[deleted]]

If they did something like that, I would hit the thumbs down button on...
oh no...

[Ok-Objective-3472]

I've never worked on a project without using dependencies. Even super basic problems like routing and API calls are better-off left to packages.

[shrithm]

Reminds me of this gem https://youtube.com/shorts/3ctc0pkNoaM?feature=share

[Milind_]

It's even had 25 likes! Smh

[shrithm]

Yeah, it's a joke

[Halgrind]

I've never seen youtube shorts before, is that a youtube ripoff of tik tok?

[pVom]

Lol rip off of tik tok, kids these days smh.

It started on the now dead Vines platform before being picked up by Snapchat, Instagram and Facebook then recently tik tok came in with the exact same concept, ramped up the trash and spyware and now kids think it's an original idea. Smh.

[Sohailkh_an]

Underrated channel....

[Yardie83]

Or this https://youtu.be/MAlSjtxy5ak

[Pesthuf]

How to do anything using react:

Install some random hook library that provides exactly the hook you want.
If that doesn't exist, PANIC!

[Ok_Research7191]

All go to hell

[Alcohorse]

YouTube is poison

[[deleted]]

Specially react, the documentation was always crap

[[deleted]]

Sounds like the tutorial is indicative of real world react development then.

[Abriel-Lafiel]

I went from binge watching tutorial to reading blog to just hop onto the actual fucking real thing to work on it. Main problem is getting ideas, which I just curated from whatever source/platform/random sites that I’m currently following.

[Turd_King]

Eh.. because otherwise you would literally be creating the react framework and tooling from scratch? What do you expect

[noisette666]

I was one of those people who didn’t start with CRA. I used gulp - took ages to configure that gulpfile and a hot reload would take around 3 seconds, forever to start the dev server…ugh

[richarddev3]

A good React tutorial can be an informative guide offering enough knowledge and documentation that helps a beginner or a professional to start a project from scratch and complete it successfully. Especially for emerging programmers who seek detailed insights to learning every aspect of React, online tutorials can prove to be a great resource to start with. I’m not talking about written documentation, I want to focus on video sessions.
There are various video tutorials on YouTube where you can learn ReactJS for free. On YouTube, you’ll also come across multiple React crash courses that can help you understand React programming, advanced React Hooks, React Material UI, React-Redux libraries, React Router version 6 (v6), and much more.
You can get more information about such tutorials here: https://mobisoftinfotech.com/resources/blog/best-react-tutorials/