Udacity's React Nanodegree Program

Updated 2021-01-23

This is my second Udacity nanodegree - my first was the Android Basics nanodegree. After spending a few hours on the course, I dont think it has the same production quality of the videos in the Android course, and there seem to be fewer quizzes which help reinforce knowledge and concepts along the way. Lesson 1 - Why React, and Lesson 2 - Rendering UI with React, are tiny, and Lesson 3 - State Management is a huge module. Maybe these could have been broken down differently.

By default exercises open in some kind of remote virtual machine, and an in browser development environment which is very similar to Visual Studio Code displays three panes - a file tree on the left, file viewing window on the right, and a console at the bottom of the screen.

At the beginning of an exercise, a couple commands need to be run to get started

• npm i install node packages
• npm start start the server

You can then click on a Preview button to view the current output of your site

npm start runs the site with a watcher so any file changes cause your site to be updated and reload.

I suspect the Udacity team implemented the standard virtual machines in order to reduce the number of support requests from novice students, but I prefer to use Visual Studio code and my own environment to work. There's an option to download the project files from the virtual machine by right clicking on a directory in the file tree and clicking Download.

One of the things I don't like about the browser based editor is the broken syntax highlighting

Exercise 2

I think the most challenging aspect of this exercise is the way the data is supplied. Rather than using arrays, data is provided as objects, and elements in the collection are each assigned to a property of the object.

  {
    id: 1,
    userID: '1',
    favoriteMovieID: '1',
  },
  {
    id: 2,
    userID: '2',
    favoriteMovieID: '1',
  },
  {
    id: 3,
    userID: '4',
    favoriteMovieID: '5',
  },
  {
    id: 4,
    userID: '5',
    favoriteMovieID: '2',
  },
  {
    id: 5,
    userID: '3',
    favoriteMovieID: '5',
  },
  {
    id: 6,
    userID: '6',
    favoriteMovieID: '4',
  },
];

After re-arranging the data it was possible to focus on the point of the exercise - creating React components.

    let movieTree = [];
    let userArray = Object.keys(users).map((key) => users[key]);
    let profileArray = Object.keys(profiles).map((key) => profiles[key]);

    for (const [, value] of Object.entries(movies)) {
      movieTree.push({
        id: value.id,
        name: value.name,
        users: userArray
          .filter(u => profileArray
            .filter(p => p.favoriteMovieID === value.id + '')
              .map(p => p.userID)
                .includes(u.id + ''))
      });
    }