Udacity React Nanodegree review - Part 1

function getProfileData (username) {
 return {
 pic: 'https://github.com/' + username + '.png?size=200',
 link: 'https://github.com/' + username
 }
}

function getProfileLink (username) {
 return 'https://github.com/' + username
}

function getProfilePic (username) {
 return 'https://github.com/' + username + '.png?size=200'
}

function getProfileData (username) {
 return {
   pic: getProfilePic(username),
   link: getProfileLink(username)
 }
}

<Page>
 <Article />
 <Sidebar />
</Page>

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:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';

const people = [{ name: 'James' }, { name: 'Mark' }, { name: 'Steve' }];

const element = (
  <ol>
    {people.map(person => (
      <li key={person.name}>{person.name}</li>
    ))}
  </ol>
);

ReactDOM.render(element, document.getElementById('app'));

This might look simple but is a great introduction 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:

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';

class ContactList extends React.Component {
  render() {
    const people = [{ name: 'Greg' }, { name: 'Mark' }, { name: 'Steve' }];

    return (
      <ol>
        {people.map(person => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ol>
    );
  }
}

ReactDOM.render(<ContactList />, document.getElementById('app'));

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 installs Babel so we can use the latest JavaScript syntax as well as JSX.
• 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.

State Management

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 doesn't 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.

Lifecycle Events

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!

React Router

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 quizzes to complete and exercises that reinforce them.

Final Project

The final project 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.

The Good

1. You don't have to write any CSS
2. They give you the API so you don't need to learn about that.
3. You can reach out to community / mentors for help

The Bad

1. You have to make sure that you use one of the search terms in the Markdown otherwise the API doesn't work.
2. You might struggle with figuring out how to organize the application
3. The CSS has the classes already so you need to match them to make the app look nice or write your own.
4. 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.