A Beginners Guide to React Introduction

Kent C. Dodds

React

>=16.12.0

Welcome to The Beginner’s Guide to React! I’m happy you’re here. I recommend that you watch all of these videos through once without touching the keyboard. Just take notes. Then you can watch them a second time and follow along and change/break the code and review the bits that you need. I’ll show you how I get things up and running, but feel free to copy/paste the code to an environment where you feel comfortable.

No requirements needed when taking this course.
Recommend that you watch all of these videos through once without touching the keyboard. Just take notes. Then watch them a second time and follow along and change/break the code and review the bits that you need.
Download or clone the source code: Course Repo and ⚠️ switch to the egghead branch.

Copy and paste the start script in a terminal window to locally serve all the files. Access the files in localhost:3000.
- npx browser-sync start --server --files "./*.html" --no-open --no-notify --directory
- npx comes bundled with Node.js
- browsersync automatically reloads any changes made to the code.
- More info on browsersync
Recommended setup:

- code editor opened
- browsersync running
- developer tools opened

Additional resource

Check out Kent's Uses Page to learn more about his setup.

✏️ Edit on GitHub

Kent C. Dodds: 0:00 What is up, folks? My name is Kent C. Dodds, and I am super excited to be your teacher here on egghead.io, where I'm going to take you through the Beginner's Guide to React JS. We're going to start from the very, very beginning.

0:11 Whether you've been doing React for a long time, you just want to sharpen yourself on the fundamentals or you've never done any React before and you're just curious, this is going to be a perfect place for you because we're going to start with a totally blank slate.

0:24 When we're using React, we're using a bunch of other tools in the ecosystem around it. You've got a router, you've got state management, you've got the building tools like webpack or parser or whatever it is that you're using.

0:35 When you're using all these tools, it can be pretty difficult to isolate what is React and what is it doing for me. If you don't isolate it effectively, then you can't use it very effectively.

0:46 We start out with a literal blank index.html file. We write some HTML in it. We write some JavaScript directly in that HTML file. Then, poof. All of a sudden, we're writing some JavaScript to create DOM nodes. We're inserting those DOM nodes into the page. We are making it dynamic. It's awesome.

1:03 Then, we switch over from regular JavaScript to React, so you get a good sense of what piece of this puzzle is React solving and how can I use it most effectively in building applications.

1:15 Then, we upgrade to JSX. I'll show you some tricks of JSX. We go all the way through forms and HTTP, error handling, all of that stuff. You're going to love this.

1:27 When we get down to the very end, we're going to use some awesome tools like CodeSandbox, GitHub, and Netlify to deploy our application to the world. You can show it to your friends, family, your dog, and whoever it is that you want to show this to. You'll be so excited that you've built something that is available on the World Wide Web with React. It's super, super cool.

1:50 Let's go ahead. We'll dive into the workshop stuff so that you can see where the files are, how to get things up and running if you want to follow along, or if you just want to tinker with things as we go. Then, we can get into this awesome workshop that I've prepared for you.

2:06 The workshop is available to you on GitHub. You'll find it on my GitHub, kentcdodds/beginners-guide-to-react. I recommend that you switch the branch to egghead. That way, you make sure that the stuff that you're working with is exactly the same stuff that I recorded in the course and if we make any changes in the future, that will have them on the master branch. The egghead branch will always be exactly what you see me do in the course.

2:32 The course is just a bunch of HTML files, plus this start script that we'll take a look at. You can download this using Git if you're comfortable with that or you can just click Download ZIP and that will download the ZIP file to your computer. You can open that up and extract that and this is what you're going to find at the end of the day.

2:49 I am using VS Code. You can feel free to use Sublime or text editor or whatever it is that you want to, but I recommend VS Code and it's great. We've got each one of the lessons right here as HTML files that you can go through.

3:04 The HTML file that's available here is the finished version of our code. You can work through each one of these after watching the video, tinker around with it a little bit.

3:15 To get things up and going, you can just open this up, so we can click on Reveal in Finder here. We can double click on that and it will just open it right up in the browser for you. That will work for lots of this, but some of these lessons require that you're running a real server.

3:35 There are a couple ways that you can do that if you can figure out how to make that work yourself. I have the start script and that's what I'm using. We're using a tool called Browsersync. We're using npx to get that running. npx comes bundled with Node. If you get Node.js installed, then you can use npx.

3:51 You can just copy and paste this in a terminal window. That will get Browsersync up and running and then you can open up localhost:3000, where that will show you a listing of all the files. We'll go ahead and click on this first one.

4:04 Typically, in the workshop, I've got this open up side-by-side with my code editor. You're going to have it look a little bit like this. Here, you'll notice that I can hit save key and it automatically reloads.

4:19 We'll also want to have our developer tools open. I've got our developer tools right here. I have that up here at the bottom. We have two scripts in here that you don't find in the source code. That's added by Browsersync.

4:34 The cool thing about Browsersync is that you don't have to manually hit the reload button, you just go ahead and change something, hit save and it will automatically reload for you. That's why we're going with Browsersync. It's really nice for this.

4:50 You can feel free to play around with this stuff. As we go, you can clear this stuff out and type it out yourself or you can just wait until I go through the material and then you tinker around with the finished product, or you can just watch through the whole thing, take notes and then go through it again later on your own.

5:08 Whatever works best for you, I do recommend that the first time you go through this, you just watch and take notes because that typically ends up in a better experience for most people, but you do it however you want to.

5:19 I can't tell you how excited I am for you to go through this. I've worked hard to try to make this as approachable as possible, give you a deep foundational understanding without getting too much in the weeds. I can't wait to see the cool things that you build with this knowledge that you acquire through going through this material.

5:36 Please do let me know what you build and what you create with this knowledge of React. I can't wait for you to experience this. Let's go ahead and jump into the course.

Create egghead account to access 5000+ tutorials and resources from expert developers.

The Beginner's Guide to React

A Beginners Guide to React Introduction

Additional resource

You must be a Pro Member to view code for this lesson