My Start to Finish Review of the React Nanondegree at Udacity

I decided to enroll in the React Nanodegree because I have been trying to learn React for a while with little success. I have not found it easy to pick up because it is a significant shift from the traditional way of building web applications. It also uses a lot of ES2015 which requires a lot of new JavaScript topics to learn and get used to like classes and arrow functions. I have had success learning to code with mentor-based online programs previously. I completed a 36-week 1 on 1 online mentorship through the Bloc.io front-end web development program and was able to significantly level-up my skills in JavaScript and build an interactive web application that a few people use (RankedBlogs.com).

Week 1

The program just started and Udacity emailed me to let me know that the course is open. The first step is to read their student handbook which explains how the program will work. The program will hold our hand to guide us to build three React projects and then we will build three more React projects on our own.

I checked the program’s Slack community for the program where students can interact with other students and instructors. I also learned that there are mentors that you can contact anytime when you get stuck and code reviewers who review your code submissions and provide feedback.

The first project is building MyReads, a book tracking application.

The course starts with viewing and reading through an introduction to React concepts like declarative programming. Lesson 1 contains some short videos followed by a text explanation and quiz questions. There are also some in-browser code exercises.

filter-code

I learned how to bootstrap a React app and serve it locally. It is pretty quick and easy with Create React App. You just need to install Create React App with NPM.

npm-start

Week 2

I have four more weeks to turn in the first project, a book tracking application.

Previous to starting this program, I read through Learning React by @kirupa https://www.kirupa.com/react/. It was a really good intro to React and I feel a little more comfortable with all the weird syntax and conventions of React.

I was able to clone the starter files branch at https://github.com/udacity/reactnd-contacts-complete/tree/starter-files-added and then serve it locally with npm start.

starter-files

https://www.youtube.com/watch?v=Ju5mbCEFe9Q

I like Udacity’s approach of breaking up the lessons into small bite sized videos.

This 2 minute video really helped clarify the idea of props in React. In JavaScript you can pass arguments to a function. In React you can pass “props” into a component and then it can be accessed with this.props.nameoftheprop. So props are basically similar to an argument in JavaScript.

props

Week 3

The videos helped clarify the differences between props and state. Props are like arguments that are passed to a function, but the argument is passed to a component from the attribute value, e.g. name=“Earl.” Props are immutable, however state is different because it is intended to change (it’s mutable). You can set state by creating an object at the top of the component, e.g. state: {health: 100, power: 55, food: 44}.

We created a method to remove a contact in the App component which took me more than a couple times to wrap my head around.

It is essential to have the React Developer Tools extension added to Chrome so you can inspect React components on any webpage using React. It also shows the state and props of the component.

react-dev-tools

Week 4

I’ve finished the first three sections of React Fundamentals and started the fourth section which covers external data.

external-data

I feel like I have a better grasp of some of the important concepts of React like component lifecycle, state, props, and React Router. There are still some parts that are still a bit cloudy but I’m pretty comfortable that I have a good grasp of the foundational concepts and can start learning by building things.

I’m starting the MyReads application which is the first project of the course. The first step is to clone the starter template: https://github.com/udacity/reactnd-project-myreads-starter

After cloning the repo to my desktop and running “npm install” I can use “npm start” to view the app before the JavaScript is added.

starter-template

I was able to create a Book component and render the Book component in the BooksApp component.

placeholder-component

Week 5

I’m currently working on getting data back from the Google Books API. I imported BooksAPI into my Book component and am using ComponentDidMount to make the API call.

I found a YouTuber named Ricky Garcia who is documenting his journey through the React Nanodegree. It is interesting to see his progress at the same point in the course that I am currently at.

I’m currently trying to render the book information to the Search Results page after getting it from the BooksAPI.

I’m having some trouble using setState to change the state to the object returned from the call to the BooksAPI. I decided to try out the Live Help feature in Udacity which is a chat. Someone responded within a couple minutes.

The Udacity person offered some suggestions and then cloned my repo to troubleshoot and came up with a solution that worked. It seems like a good way to get help quicker than on the Slack channel.

It’s also great to read the conversations other students are having about the MyReads project in the Slack channel. I’m learning a lot by reading about problems other students are discussing and how they are solved.

Week 6

I was able to pass the input value with Props to the child component BookResults which is making the API request (with the help of someone on the Slack channel).

I can now render the images from the BooksAPI based on the input value entered.

render-book-search

I also change the state when one of the select menu options below a book is selected. I need to pass the state of the book to the main BooksApp component.

I tried to get live help on a Saturday night at 8:20pm PST and wasn’t able to get help after 30 minutes. I also posted my question Saturday morning on the Slack, but there was no response today.

Leave a Comment