Why Learning React is a Really Great Idea

Faith: Hello! So we're talking about React today and the new course, Intro to React.js, which you've both been working on. Firstly, can you give a brief summary of what React is?

Isabel: React is a front-end framework that builds off of Javascript, and it was first developed by a team of Facebook engineers. Now it's grown into this huge community and it's maintained by a huge team, but for someone who might be newer to coding, who doesn't know what a front-end framework is, React is basically a very design- and visual-friendly tool where you can just spin up websites in like 30 seconds. It's built off of the idea of making building blocks and then building on top of those building blocks to make more and more complex pieces that form a website.

Faith: Wow, that sounds really versatile. Can you just explain how this new course has changed from the old React course we did and what the Intro to React course is going to look like?

Isabel: First of all, React is an ever-changing, living framework. It's not a one-and-done type thing as technology is not, and so the last time we made our React course was a couple of years ago and a lot of things have changed since then, a lot of the best practices have changed since then. So we basically want to do this topic justice at SuperHi and revisit how we teach React, teach the more modern practices, include the newer features and just make sure it's very easy to learn because it is a very accessible framework.

Ryan: Yeah, so probably the biggest thing that we get students asking a lot about is Hooks. Hooks are a new React API that allow you to do away with classes, and it's the simplified API for dealing with state management and effects and a whole load of other stuff within functional components. This is where React's been moving in the last couple of years and this is the really big thing that's come out since we last updated the course. So what we were thinking was that we didn't want to just update the course, slap in Hooks and call it done, maybe throw in Context or another API. That wasn't really going to cut it because as Isabel said, there's a lot of best practices that have changed as well over the years, really we'd like to update the projects and take advantage of this thing to really just go for it.

So rather than the one – the original so-called long full course, we've got three short courses now, and each of them is frankly, probably going to be longer than the current long course because that's just the way that things have been working out. But specifically in Intro to React we you really want to concentrate on the why and the what and all those sorts of questions that students might have when getting started with React: "Why do I want to pick up React?", "Why do I want to use React rather than just Javascript?", "Why do I want to use it rather than another framework?" and "Why do I want to use a front-end framework at all versus back-end?" All those sorts of questions that people have. We'd love to introduce people to our answers as we see them and in doing so build out React projects. We've got three projects and four chapters in Intro to React, and the other two courses still to come.

Faith: So would you say this is more aimed at front-end developers exclusively, or do you think designers would find this really useful? Who is this aimed at?

Isabel: That's a really great question. I think React is special because it does straddle that line between: are you a front-end developer, are you a UI developer, are you a product designer with a bit of technical experience in that? I think it's actually very flexible in that sense. If you are a designer and you enjoyed learning Javascript and you do have a bit of a penchant for code, I think you are someone who could pick up React. It might be a different set of barriers than someone who already has some more technical knowledge but I think because React is so design-friendly, it wouldn't be as difficult for a designer to pick up as opposed to let's say learning a backend framework, learning Rails or learning Java or something like that.

Ryan: Yeah, so we do assume a little bit of knowledge coming into the course. We'd expect that you've probably taken our Foundation and our Javascript for Designers courses, or you have an equivalent knowledge. That means you've got the basics of HTML and CSS and of Javascript as well. So not jQuery, but Vanilla Javascript. Just how all those little things play together and how everything works. It's not like you have to like Java or Rails. We're going to introduce the command line and all that stuff that you need to know to actually get up and running with React. That core Javascript knowledge is great to base things on. If you don't already have it, then there is our Javascript for Designers course which will build you up with the knowledge that you need to be able to get started to take the React courses.

Faith: So you mentioned there were three projects in Intro to React? What is your favorite?

Isabel: So the first project is a super simple photo gallery where you can click on the image to see the next one. And so it's an image carousel. Very visual, very simple, super easy to pick up.

The second one is a little bit more complicated. This is actually Ryan's idea, but it's basically this puzzle image interaction where you have one image on a website and you're building all these cursor tracking interactions where you can actually slice the image into a puzzle piece. Depending on where your cursor is on the screen, the image will either unify and come together or it'll be floating on the page. So very interactive, very visual, very cool. I think it will be really fun for the students to learn.

That's part one of the second project. In part two we're going to be teaching the students how to build a signup form and the input validations and error handling and that goes with the form. What happens when you mistype something in the form, how does it interact? What happens when you do succeed in filling out the form? What's the user experience with that? So that's also a little bit complicated.

The third project is my personal favorite. It's a book club that features books written by Black authors. It's really cute and playful. You can click on a book to see more info and you can also search by the book, title or author.

Isabel: Ryan, what's your favorite project?

Ryan: It's got to be the second one, I think. I came up with it just from stealing ideas from various sources, looking at interactions and the way people had done things. I was also looking at stuff that students were asking about. We have so many great questions from students going, "Hey, I've seen this website, how do I do this?" and it's just really cool being able to give them answers in the form of this project. Because it was actually out of the back of a student question of, there was various bits of texts flying all over the screen. And as you move the cursor to a certain point, the texts came together. And so we've just taking that idea and worked in it with images to turn it into a puzzle.

Faith: You mention that the project was born out of a student question. What was your vision when making this course? Is React something that students have been asking to learn, or was it just a case you recognising that the old course needed to be updated?

Ryan: Yeah, absolutely. Students have been asking us about the React course because it doesn't have Hooks. They ask "How do we add Hooks in?" and we have done a lot to help students that want to use Hooks and we talk them through it and we help them out with it. We really wanted to get these improvements out and over the line so students could take advantage of all the latest modern Javascript features, modern React APIs, Create React app stuff, all that stuff that's come out the line since we recorded the course.

Students could easily swap out a section of images from the first project and have their own photo portfolio online in minutes, or they can take that image in the second project and change the header and the footer text and they'll end up with their own portfolio again, or mini websites. We just really want to help students make stuff that they can show off.

Faith: What programs and software do you need for this course?

Isabel: For the first two projects we're actually using this website called CodeSandbox, where you basically take a code editor and it's just online. So you don't need to download anything, you don't need to use the terminal on your laptop. You just go to codesandbox.io and you can just quickly create a React app in like 15 seconds. We're doing that because we wanted to focus on the foundations and not worry or stress the students about learning the entire environment setup. So the third project, we're saving that for the real project set up where the student is going to have to use their own local code editor, the terminal, and install any dependencies or packages that are needed to create a React App.

Ryan: I really liked that it's just VS Code in the browser. They have taken Microsoft Visual Studio Code and they've basically embedded it in the browser, so you get all those advantages that VS Code has. But the real big advantage is that it feels really comfortable for students that have already used Visual Studio Code. That's what we use to demo the third project as well.

So there's not this massive segway from a website to your own editor, it all feels quite comfortable. In the third project, we then are introducing NPM and Yarn and CLI and a bunch of other stuff on top of it as well but all you really need is a laptop with an internet connection and a recent version of Linux, Mac OS or Windows 10. Windows 10, we still have a few questions around just how to make it easiest for students. Whether or not we recommend they use WSL2, which is the Windows subsystem for Linux, which makes it feel a lot more like a Mac or Linux development environment. It will still work otherwise, but it can occasionally be a little bit awkward when things go wrong.

Faith: How necessary is it for front-end developers, for example, to learn this? I mean, is it something that would be expected or asked for by companies or is it a bonus?

Isabel: It really depends on the industry because if you're working in a very corporate setting, I think they would be using more traditional or older frameworks and things like that.

But Ryan, you have more work experience as a dev, what do you think?

Ryan: I think that when you talk about Javascript frameworks these days that React is the de facto framework. That shows in popularity figures, it's massively popular and there are others that are growing in popularity. Svelte is quite popular and it's one that we're interested keeping our eyes on.

There's frameworks that grow and shrink in popularity over the years. Angular's one. Started off massively popular. They released version two, that was a complete rewrite. They lost a lot of users then, but they've also gained more since. Something like Ember is decreasing in popularity, but there's all these React-like frameworks as well. So you have Preact and you have a bunch of other ones like that, where all the concepts that you learn in React are really easily carried over if you want to take what you learned in our course and apply it to a different framework. There are a lot of concepts that other ones borrow from React and use in their own way. So React definitely is, if people start talking about frameworks and front-end, then it's the number one framework that people think of.

In terms of businesses looking to hire people, it's usually the number one framework as well, which isn't to say that you have to have knowledge of React to call yourself a front-end developer. Personally, I've been a front-end developer for 15 years or so now and I ignored React for a really long time and still called myself a front-end developer and nobody pulled me up on it.

Faith: Sounds really useful. Because it's a such a connected community and there are always going to be updates and bug fixes, is there any problems in this, in the terms of it's a lot to keep up with? Does that make it difficult or limit the user or the developer in any way?

Isabel: I'm actually sort of connected to one of the engineers who developed React and Redux. His name is Dan Abramov and he has a very vital social media presence so I follow him on Twitter and I like to follow what he's working on and get a sneak peek of like, "Oh, is this going to make it into the next React build?" and things like that. It's really exciting because it really does feel like a living framework. I haven't personally run into any negative situation with the way that React is structured and how it's supported by the community.

Ryan: One of the really cool things about React is that they follow that Javascript way of doing things where they don't try and break things just for the sake of breaking things. I've got websites that I've written five years ago in React say, and I can go and boot them up and run them with the latest version of React. There'll be a few things to change but React's always great about telling me if something's not working, why it's not working or giving me a warning to let me know that the way I was doing things before has been superseded by another way.

While React doesn't often add a lot of stuff throughout the years, they are always working way behind the scenes in ways to make things faster and make things better. I think probably again, Hooks is the one thing that everybody recognizes as that modern React feature that was added relatively recently. But there's Context and which is that global state store. And then there's React Fiber, which is quite invisible, but that's part of how it runs through the threads and it's much faster because of it. And they're always working a way on things that don't break your old code, but do give you the opportunity to take advantage of it if you want to.

Faith: Cool. I don't know if this will be too hard to get into now as well, but what all Hooks in a nutshell?

Isabel: So basically before Hooks, there was a binary split between class components and functional components. Components are the building blocks of how you build the different features and things like that in React. And so there was class components where you could access something called lifecycle methods. Lifecycle methods are basically just the series of events that occur from the creation to the destruction of a component. And so if you wanted to do any fetching data or updating the state, you would use a class component and then functional components were seen more of as just being pure JavaScript functions that render React elements. They're supposed to be very simple. They're supposed to be used almost as like containers for HTML elements. So very black and white. This for this, that for that. But Hooks came in and Hooks muddied all that up.

Hooks is like, "Okay, so functional components can now have access to lifecycle methods." It just looks a little different. It's not going to look the same as a class component, but now functional components can be just as powerful as class components. The official message from the React engineering team is basically, "We don't want you to stop using class components. You can still use them. We're not going to get rid of them." Because a lot of bigger companies there, they're not always going to update their stack for every version. So they're probably still going to be a lot of old code, but they're just saying you can start learning more about using these super powered functional components and get more familiar with it and just let's all move towards that as the future. So that's the thing that students have been asking us about because it's a huge change.

Ryan: Like Isabel said, classes aren't going anywhere in React land. There's not many cases where you absolutely need them. But in general, everything's been ported over to Hooks. You've got state and effect Hooks, you've got memoization Hooks, and various other things like that. There's a few cases where you still absolutely need to use class components, but they are doing their best to get rid of those. You don't need to use it ever. And it's just about giving you the choice for the style of course, that you want to write and how you feel about maintaining that code later down the line. Personally, again, for somebody that slept on React for a few years, I also slept on Hooks. I liked the idea of them. I found them really complex to understand. So that's what we're really hoping to get through with this course is to make Hooks simple to understand for students.

There is a few other courses out there and there's blog posts and all that stuff, but it's just a matter of grabbing all that information together and turning it into real world projects that people can build and improve their understanding of Hooks and how they integrate with the React component life cycle and everything like that.

Faith: One of the limitations, I guess, is that React is very much about the view and the user interface, but how do you go about integrating that with backend?

Isabel: I think your perception is totally correct in that the power of React is to create it very quick, very easy to understand visual website but the backend... React isn't really built for that. So there's actually a billion tools nowadays to host your data super quickly on this stack and import it to React. There's so many different solutions because if you're not a full stack developer, who's comfortable building both backend and front-end, you do have to find another type of solution to be able to fetch data into your React project and to work with more complex databases.

Faith: Which of our courses that would be particularly complimentary to this? Do you think just the foundation course or anything else that really marries with it?

Isabel: I guess the most traditional one I would say is to take the Rails course so that you can build your own fully powered back-end. But that's a lot to learn. So I think the other quicker way is probably to take the AJAX API course, which teaches you how to connect databases and APIs that already exists in the world and connect them. Ryan's done a whole section in that course about how to connect your app to the Instagram API and did a show an Instagram feed in your project and things like that.

Ryan: Before React we'd expect you to have that Foundation and Javascript for Designers knowledge at the very least. Complementary to React, it's actually a really good idea, Rails. I wouldn't want to be learning them at the same time that there's a lot going on in there. I don't think I can keep that in my head, but if you were to take Rails and React, you'd have absolutely everything you need to build any website in the world, frankly. AJAX and APIs is a great choice that you could take alongside React for sure.

Faith: And... fun question... if you to give React a personality, if they came into the party, they arrived... Maybe shaders would be someone who arrives in a dress that's sparkly with a pattern. What would React look like? What's their vibe?

Isabel: Oh my god, I love this. The personification of React.

They make the rounds at the party, they can talk to everyone, they can hold their drink, but when it's time to consult in your friend, if you have a deep troubling issue or something, you don't know if they'll have time for you. I think that's how I would think about React. It's like the popular one who's like, "Ooh, look at me. I'm shiny."

Faith: Great! Anything else that you want to add? What's the best thing about React?

Isabel: React offers such a low barrier to entry for learning. I think that's what makes it such a wonderful framework is that it's so... I like to think about learning React as a monkey see, monkey do because the code is very easy to follow. It's so easy to create a new project that even if you don't really understand the inner workings of React, but you do watch our course, you can literally follow along and make a full project, and then you could go back or advance to the next project and actually understand how it works. It's so great for different type of learners. Learners who maybe don't have the greatest algorithmic knowledge or learners who maybe don't have a very complex technical background, they can still be experts in React. And I think that's what makes it so beautiful.

Ryan: I've tried a lot of frameworks in a lot of programming languages. I wouldn't say I've tried all of them, but if we're around them all up in our room and stick them in that room with React and shaders and whoever else is there, then I'd have knowledge of at least 80% of them, I think. React is just that one that I keep coming back to, it's so easy. Like Isabel said, it's just got that low barrier of entry that I can just really easily spin up a project and play around with the thing. These days, it's very rare that I would just use a plain HTML, CSS, JS project. Even if there's no need to use React whatsoever, I will still just go for React because I just found it's so much easier to get started with.

Faith: Wow. It sounds like students are going to love it.

Ready to dive in? Intro to React.js is ready to take now!