Udacity React Nanodegree review - Part 1
Posted on August 23, 2020
I have been tackling the Udacity React Nanodegree, for a few different reason progressive growth at my work, and also I love to learn!
I finished the first part of the nanodegree a few days ago and decided to give an indepth review of what is covered, what you learn, how the teach it and what is completed by the end of it.
What do I do currently and why should you listen to me?
I have been a developer for almost 12 years for many large companies, freelanced and worked for startups. I also create content for Youtube, livestream and Twitch and create courses.
I have been writing React for quite a few years and focusing mostly on NextJS and React Native.
What do you need to know before starting?
To get started, if you are looking at this review you are probably wondering what are the minimum requirements to start this nanodegree? The minimum in my opinion is:
- Command Line or Bash.
In the course description they want you to be familiar with the following so maybe take that into consideration:
To succeed in this program, you need to have experience with building front-end web applications with:
- HTML & CSS
- Web Forms
You should have familiarity with the following:
- Web Accessibility Standards
- Using Node Package Manager (NPM)
- Git & GitHub
- Unix/Linux Command Line Basics
What is covered in part one?
Part one is about React fundamentals and covers the following topics which I will go into more depth:
- Why React?
- Rendering UI with React
- State Management
- Lifecycle Events
- React Router
Each one is covered in multiple sections that break down important concepts and make sure that you understand the concept before building on top of the concept.
To Begin with they describe the Compositonal model, which is why React is so powerful, if you are unfamilar with concept this is combining simple functions to create complex function. Here is an example of a function that is not compositon.
Here is an example of breaking that down to make a compositon based function
As you can see we just break out the function into two smaller DOT (Do one thing) functions and call them from another.
The Udacity team than relates Compositon to React by describing how React builds small pieces of the UI using components. If you have inteactive with React you know how important they are but they dig futher into them later on.
They use an example where you have a page and two components called Article and Sidebar obviously this might be a bit confusing if you never used compoennts before.
- set an initial value for the iterator - (
let i = 0)
- tell the
forloop when it needs to stop - (
i < people.length)
- get the person at the current position and add an exclamation mark - (
people[i] + '!')
- store the data in the
ith position in the other array - (
- increment the
ivariable by one - (
Unidirectional Data Flow
React is undirectional with it's data flow which means it flows one way from parent to the children. Udacity compares this how data bindings worked prior, where any part of an application code update code which could cause issue.
They also compare this to both Angular and Ember where two way bindings is a thing, so you can keep your data in sync no matter where its updated. Personally I also though Angular was powerful for this but it makes it hard to knwo where the data is being updated when an application becomes bigger.
The above image shows how data flows through a React application, the data lives in the parent component and is passed down to the child component. Even though the data lives in the parent component, both the parent and the child components can use the data. However, if the data must be updated, then only the parent component should perform the update. If the child component needs to make a change to the data, then it would send the updated data to the parent component where the change will actually be made. Once the change is made in the parent component, the child component will be passed the data (that has just been updated!).
So throughout the course quizes are used to make sure you understand the concepts as they are taught, so at this point Udacity asks a few multiple choice questions on the concept of data flows.
filter() and using map and filter together. This section uses the built in cloud code to practice these functions but only covers a couple of examples which was a bit of a let down.
It is important that you understand both .map and .filter and should practice them a few times before moving out to section 2.
Rendering UI w/ React
Now the real work begins, the Udacity team start to walk you through how to render React elements with more practical concepts versus theory.
Elements and JSX
You now get introduced to the react.element functionality and reactDOM and show how easy it is to create a HTML elements using React. Each video builds upon the next, starting with a simple <div> and building all the way up to creating a list using .map() that you learnt in prevouly lessons, by the end of the first section before moving on to components you will create the following:
This might look simple but is a great introuduction into rendering the DOM and using .map() to iterate content.
Intro to Components
Now that you have learnt the basics of DOM rendering, Udacity makes a small introduction into components. They take the original code I showed above into a React component:
Create React App
Up next they introduced Create React app which most people know about probably due to the React landing page talks about how easy it is to get a full working single page app working in "minutes". They simply explain how:
- It also installs Webpack, so we can generate the build
- It installs Webpack dev server, which gives us the auto-reload behavior we’ve seen up until this point.
Composing with Components
This section does a few things, first it shows you how components work and how simple they are used to implement using React. They then describe how components encourage us to build applications using composition instead of inheritance. Those two principles are
- the ability to encapsulate a bunch of elements in a component
- the ability to easily reuse each component by being able to configure each one differently and independently via props
Finally they talk about how you should "favor composition over inhertiance" by explaining how React uses composition to build user interfaces. We extend React.Component, but we never extend it more than once. Instead of extending base components to add more UI or behavior, we compose elements in different ways using nesting and props.
The state management section of the React fundamentals course covers the following concepts:
- Props - Allows you to pass data into components
- Functional Components - An alternative, and probably more intuitive approach to creating components.
- Controlled Components - Allows you to hook up the forms in your application to your component state
This is the first time you build an actual application, well sort of, they provide boilerplate code for both the server and client side code. By the end of the section you will of built a contacts application that:
Contacts app that shows a list of contacts. Each contact has an avatar, name, and twitter handle.
The app will also have a search bar that will allow you to filter the contacts or reset the the state to show all contacts.
It will also allow you to remove a contact and add a contact by entering a name, handle, and uploading an image.
This section is very detailed and long and focusing on creating the application which doesnt get finished until the end of the section as we need React Router! It goes in depth on how to pass data around, updating components, updating state and controlled components.
On top of creating the contacts application, there are two exercises that cover passing data. I was a bit disappointed in these two exercises for a couple of reasons:
- The solution is given to the student so they could 'cheat' potentially.
- The question doesn't lead the student to solutions it's more of a dump and go which for someone learning could be overwhelming.
This section is the longest and could probably be more effective if they chopped it down into two sections. One to create the application and on to cover the exercises about passing data.
Now that you learnt about local state which means you can load data from a variable without the need of databases.
Lifecycle events are specially named methods in a component. These methods are automatically bound to the component instance, and React will call these methods naturally at certain times during the life of a component. There are a number of different lifecycle events, but here are the most commonly used ones.
- componentDidMount() - invoked immediately after the component is inserted into the DOM
- componentWillUnmount() - invoked immediately before a component is removed from the DOM
- getDerivedStateFromProps() - invoked after a component is instantiated as well as when it receives brand new props
In this short section they cover
componentDidMount() and also how
render() should only be used for rendering and not fetching data, an important lesson to learn early!
The final section before you attempt to build your application that you submit for grading is about React Router. React Router is a way to create Single Page Applications.
By the end of the the contacts application you started will be finished and you will have learnt how to use the Route component, and the Link component. There are plenty of quizes to complete and exercises that reinforce them.
The final projec they as you to create a React application from scratch and utilize React components to manage the user interface. You’ll create a virtual bookcase to store your books and track what you're reading. Using the provided Books API, you’ll search for books and add them to a bookshelf as a React component. Use React's setState to build the functionality to move books from one shelf to another.
- You don't have to write any CSS
- They give you the API so you don't need to learn about that.
- You can reach out to community / mentors for help
- You have to make sure that you use one of the search terms in the Markdown otherwise the API doesn't work.
- You might struggle with figuring out how to organize the application
- The CSS has the classes already so you need to match them to make the app look nice or write your own.
The application you create uses all the things you have learnt from the the previous five section and really build upon the core concepts. I really enjoyed creating the application and spent a few hours finishing it up.
Would I recommend based upon section one?
So after finishing the first section of the course, I would certainly recommend the Nanodegree. They do a great job of building on each concept you learn and at a reasonable pace so that you won't feel overwhelmed.
When you first start thinking about becoming a developer, one of the things you might hear is you need to be a math(s) wizz. I am here to tell you that a small number of developers need the mathematics outside of algebra.
I have been a content creator in some manor for a number of years, and about halfway through the year I picked up creating Youtube videos, and Livestreaming as a new method of creating content.