Building a React.js App: Notetaker Introduction
In this video, we introduce our sample application and discuss our objectives for this series on React.js.
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
Thanks!
Hi Tyler, these are really great. What IDE are you using? Thanks much!
Thanks Jason! Sublime with Brogrammer Theme with Oceanic Next Color Scheme.
Awesome, thanks!
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..
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.
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?
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.
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.
Sorry didn't see this comment! Glad you're updating everything. Egghead is awesome.
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.
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.
Thanks for the update Tyler!
The lesson video has been updated!
Well done with the update Tyler!
I just went trough the whole course without a single error.
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.
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.
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
note that this course is outdated' it uses react v0.14.3, which was released on Nov 24, 2015 and requires the use of firebase, which no longer interplays well with the course as it was originally recorded.
github repo with commit history corresponding to lessons? nice touch