Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 985 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building a React.js App: Notetaker Introduction

1:32 React lesson by

In this video, we introduce our sample application and discuss our objectives for this series on React.js.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this video, we introduce our sample application and discuss our objectives for this series on React.js.

Avatar
wil

github repo with commit history corresponding to lessons? nice touch

Avatar
Jason

Hi Tyler, these are really great. What IDE are you using? Thanks much!

Avatar
Tyler

Thanks Jason! Sublime with Brogrammer Theme with Oceanic Next Color Scheme.

In reply to Jason
Avatar
Morgan

May I suggest that if its really that difficult to keep up with all the changes in react world (and I imagine it would be!) that you don't charge users until it settles down?

less than 5 minutes into the first video I had issues and its been an uphill battle since!

So far I have spent more time on SO trying to debug NPM/webpack errors than watching or writing code.

Also, why do I have to pay before I can see the comments? I probably wouldn't have bothered if I could see the dramas others had.

Anyway, I think the quality is top notch and I like Tylers style but its hardly worth watching in it current from..

Avatar
Tyler

Hi Morgan. Thanks for the kind words. I've set aside some time this weekend to go through the whole series and update everything. So the new updated videos should be out in ~1.5 weeks.

In reply to Morgan
Avatar
compile

Spent the weekend battling with errors like these:

ERROR in ./app/App.js
Module build failed: ReferenceError: [BABEL] /Users/user/Documents/eg/react/01-build-react-app/01-get-started/app/App.js: Unknown option: direct.presets

No success. You said if you get stuck clone the repo. Made no difference cloning 01-getting-started?

In reply to Tyler
Avatar
Tyler

I mentioned in another comment that I'll be spending this weekend going through all of the videos as well as the github repo updating everything. In the mean time, feel free to email me at tylermcginnis33@gmail.com when you get stuck and I'll respond ASAP.

In reply to compile
Avatar
Andrew

Agreed. While most of the videos on here are very good, I'm not happy with this one. This video series is awesome in theory, but it's just too much of a mess to work through. At this point I'm better off just reading the documentation on React, webpack, etc.

In reply to Morgan
Avatar
Andrew

Sorry didn't see this comment! Glad you're updating everything. Egghead is awesome.

In reply to Tyler
Avatar

Do you have an ETA on when the updated videos will be posted? I'm not particularly interested in learning how to create a React app with outdated information.

Avatar
Tyler

Syntax has changed, principles have not. I have the first four video updates complete. I'll be getting to the rest of the video updates throughout the end of this week. They should all be up on egghead early next week. In the mean time, you can keep track of my updates on the Github repo. The first 4 branches are up to date with the changes I've made.

In reply to
Avatar

Thanks for the update Tyler!

In reply to Tyler
Avatar
egghead.io

The lesson video has been updated!

Avatar
Morgan

Well done with the update Tyler!

I just went trough the whole course without a single error.

In reply to Tyler
Avatar
Tyler

That is SO good to hear. Thank you for the update. Whenever I do a massive update I'm always scared I'll miss one small thing that will derail the whole course. Again, thank you.

In reply to Morgan
Avatar
Timothy

HI Tyler, is there a fast way to visualize the components' relationships like a grid as in the example that you showed in the lesson. Thanks.

Avatar
oagostinho

Hi Tyler McGinnis

Congratulations for this excellent course.

I would like to know if you have any experience to use React.js with Play Framework? I am little to confuse how to be the best way. For example, to use JSX on the server side or on the client side by Babel.

What do you think?
Thanks!
ORlando Agostinho
Lisbon/Portugal

What's up, everyone? I am really excited to introduce this brand new series all about ReactJS.

Usually what happens when people start out learning React is that they go to the docs, and everything looks good, and React makes sense. But when they go to build a real application with it it's pretty difficult, because you need to know more than React to actually build React applications.

That's what we're going to do in this series. We're not only going to talk about React, but we're also going to talk about things like webpack, and how to take your JSX and transform it into JavaScript. We're going to talk about how to persist data with Firebase, specifically with ReactFire.

We're going to talk all about React Router and how to do routing, and how to make network requests with Axios.

My goal by the end of this series is that you'll understand a lot of the fundamental aspects of React, but you'll also know how to build full React applications, using all of these different tool sets.

The app we're going to be building is this simple React Github Notetaker. Basically what you're going to do is, if you enter in a user name, it's going to search github, pull in their information. You have their profile. You have their repos.

But over here, we're also going to be able to persist some notes about this specific user, using Firebase. So, I can come in here and add a new note. Then I can also come in here.

If I change the user name, what's going to happen is it's going to re-fetch the data, repopulate our views. Then, as always, we can add a new note over here, too



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?