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.
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.
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.
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.
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.
Week 4
I’ve finished the first three sections of React Fundamentals and started the fourth section which covers 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.
I was able to create a Book component and render the Book component in the BooksApp 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.
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.
Week 7
I’m still working on getting the event handlers to work on my book component so that the user can change the state for any book.
Week 8
I’m having trouble changing the state of my book component with the select element. I have a handleChange method on my component where I setState to the selected value. I think the state is changing, but it is not rendering on my page. I thought when I use setState it automatically re-renders.
The React Nanodegree is supposed to take 4 months to complete. I learned that if you don’t finish within 4 months, it automatically extends for one more month. I am aiming to finish in 5 months.
It seems like it is rare to get live help within their 10 minutes as they promise. If I get stuck, I usually post my problem in the Slack and come back later. Usually another student has provided help or a solution within 24 hours. It is hard to tell who the faculty are in the Slack and it would be nice if they had some kind of symbol on their avatar.
Code Newbies is an excellent podcast for people looking to get started in the coding industry. This is an excellent episode that explains how to effectively answer coding interview questions like FizzBuzz.