Advanced React Beta

Welcome to the beta release for Advanced React!
You can find a link to the course here.

Why take this course?
React is a powerful front-end library used in many of the most popular web applications on the internet. This advanced course will allow you to level up your React skills by learning techniques that you will likely encounter on the job as a front-end or full-stack developer.

To that end allow me to introduce @bspex who worked to create this course. They’re here to answer any questions you have.

As a reminder, you can find an explanation of the process for beta testing here.

1 Like

Cant wait to beta test this course! But is it worth moving the last module of Learn React to this course since it is called Advanced React?

1 Like

Great feedback! It’s something we’re aware of and in the process of deciding how best to resolve it one way or another before it goes live.

1 Like

Hello,

I’m having an issue with the custom hooks project. As far as I can tell, I wrote the code correctly but the button to change the theme does not work. Even just trying to log to the console from the onClick was not producing any results. To rule out user error on my part, I simply changed one thing to see if it would update in the embedded browser. As the image shows, the browser is not actually responding to the update.




The weird thing is that I opened the embedded browser session in its own window so that the components inside it would show up in React Dev tools, and the useTheme hook did show up there. If I manually changed its value to "light" or "dark" the page did respond. But otherwise, it did not.

Here’s an image of the light theme after using the dev tools to change it:




I’m not sure if the console log will be helpful, but there were a few errors showing up unrelated to what I had coded in the assignment:

Anyway, I’m not sure what the issue is, but I figured you’d like to know.

Hey, I think the state and state setter should be returned from the useTheme hook as an array – not an object. At least that’s what I did and that’s what I could get this one to work with.
So they should be destructured like this in the Header component:

const [onToggleTheme, isDarkTheme] = useTheme();

rather than this:

That’s how I returned it from the useTheme hook:

return [onToggleTheme, isDarkTheme]
1 Like

Yeah I had tried that at first but got an error about returning a non iterable object. Turns out you are right though because I wrote the return statement in the useTheme.js incorrectly. In fairness to myself, the hint in the instructions is incorrect, which sent me down the rabbit trail of trying to find the source of the problem elsewhere. It instructs us to return the onToggleTheme and isDarkTheme in an object, but returning them in an array solved the issue. It’s something that I likely would have found quite quickly in an IDE, but the online environment is pretty limited it seems.

I would have expected an error message or even for the page to stop rendering, but when I added the import statement to the Header component, it simply froze the state to whatever it currently was and no alterations to the code would actually appear in the embedded browser. But if I commented out the import statement, then the changes I made (providing they didn’t depend on the import), would show up normally. It’s really strange behaviour.

Just a thought, but perhaps it is better to not have hints instead of incorrect ones? I know the course is in beta and that course development is difficult work, but that was a pretty frustrating experience.

1 Like

Link to the lesson:

https://www.codecademy.com/courses/learn-advanced-react/lessons/react-context/exercises/provider-wrappers

Problem:

I cannot get past the first step: It just gives me a faint cross on lightgray background with no error message.
I thought that maybe if I do some of the later steps in advance, it would give me the check mark, but after finishing the exercise, I’m still stuck at that point. Yet the code seems to work, it is still displaying correctly.

Screenshot:

Code:

ThemeContext.js

import React from "react";

export const ThemeContext = React.createContext();

// Put your code here! ✨
export const ThemeArea = ({ children, initialTheme }) => {
  return (
    <ThemeContext.Provider value={initialTheme}>
      {children}
    </ThemeContext.Provider>
  )
}

ContactsApp.js

import React from "react";
import { ContactsSection } from "./ContactsSection";
import { ThemeArea } from "./ThemeContext";

const family = [
  {
    name: "Finn the Human"
  },
  {
    name: "Jake the Dog"
  }
];

const friends = [
  {
    name: "Marceline"
  },
  {
    name: "Princess Bubblegum"
  }
];

export const ContactsApp = () => {
  return (
    <div>
      <h1>Contacts</h1>
      <ThemeArea initialTheme="light">
        <ContactsSection contacts={family} name="Family" />
      </ThemeArea>
      <ThemeArea initialTheme="dark">
        <ContactsSection contacts={friends} name="Friends" />
      </ThemeArea>
    </div>
  );
};

1 Like

Looks to me like the lesson is broken. No way to move on even when getting and using the provided solution. @codecademy, maybe you can escalate this?

1 Like

Since this is related to a Beta course, the best thing to do is to share here:

So the curriculum team can be aware of it. Thanks for flagging :+1:

I’m sorry that you were having a frustrating experience on this project. In this case, however, you can return either an object or an array from useTheme() as long as you destructure them using the same data type in Header.js. We recommend using an object since that is a more common practice compared to arrays (using Arrays requires that the returned values and the destructured assignment are in the same order)

function foo() {
  return {a, b, c}
}

const {b, a, c} = foo(); // this assigns a to a, b to b, and c to c.

// vs...

function bar() {
  return [a, b, c]
} 

const [b, a, c] = foo() // this will assign b to a and a to b

If the application wasn’t updating in the browser, then that suggests an error was present in your code somewhere else. I’m going to add in the Output terminal component to the project so that these errors are surfaced to users.

1 Like

Thanks for catching this! It looks like there was a syntax error in the test code. it should work fine now.

1 Like

Could you be more specific about which exercise you are blocked on? Thank you!

My comments were a reply to @mirja_t .

Thanks for the reply. I believe I tried it with objects first but had problems with that, though it worked this time around. The only thing I can think of is that I had a typo or mistake elsewhere in the app, preventing it from working the first time around, which I later fixed without knowing it was the reason the app stopped working. So then I didn’t go back and try again with objects until prompted by you. Regardless of the cause, it was my mistake. Sorry for misdirecting my frustration at you.


I have a high-level question about the course that is somewhat related to my frustrations but hopefully more constructive.

Assuming that someone is coming to an advanced React course with some experience building apps in their IDE, it is a bit jarring to go back to an online IDE with no linter and limited debugging options. From what I could see, you cannot view the React components or the profiler in the embedded browser window; you need to search for the container component and follow the link to the session, opening it in its own window or tab.

Given that the first lesson of the advanced React course is concerned with dev tools and debugging, it seems odd to work on the projects in later sections without being able to use those tools. In my particular case, using ESLint likely would have highlighted my mistake immediately after making it.

I guess my question is: is there a reason why we couldn’t have the option to download the files so we could plunk them into VS Code and also use our browser’s debug features?

There’s a point at which one wonders if searching through the code manually for a missing semi-colon or typo is the best use of one’s time. The lessons so far (I’m debugging the last step of the Context project) have been quite helpful and are well worth the time going through them, but then I find myself wandering aimlessly through the project, trying to find a typo.

I have built quite a few React Apps locally so far and I would support @davejandrea partially. I wish the Redux News Reader project was available for download because debugging that online was a pain in the ■■■. Especially as I think that it did not reliably compile after pressing ‘Run’. But for such a small exercise like the custom hooks lesson, I prefer building that in Codecademy IDE because I can’t be bothered to set it up for just a few steps to do then. Also it is nice to have the instructions right next to the code. So I would make that dependant on the complexity of the exercise/project. For most of the lessons of the React stuff I find it well fit as it is – given the tests are set up well :slight_smile:

Even more I would appreciate if the last chaper about optimizing would require some input online.

1 Like

I agree that it is unnecessary for the lessons themselves. They are relatively bite-sized (byte-sized? :smirk:).

Some of the projects in either the React or Redux course basically let you choose whether to do it on CC or on your own machine. So it doesn’t necessarily have to be one or the other. If someone wants to just do it on CC, then that’s great. But for the clutzes like myself who seem to be blind to their typos…

1 Like

I’m loving this discussion! React has been a particularly challenging topic to cover given the relative limitations of the Codecademy environment and feedback like this is incredibly important to help us prioritize improving the online React experience (or at least making the off-line React experience more seamlessly integrated with our website).

To address an earlier comment, you CAN actually download the code in the Codecademy editor and throw it into your own local IDE. To do this:

  1. open all of the files that you want to copy (this is a pain, I know)
  2. Click on the “Tools” button above the editor (next to the “Get Unstuck” button
  3. Click on “Create a Gist”

From there you can download the gist as Zip!

Note, I would recommend that you use create-react-app and then copy the component files in from there since we use our own configuration to get React applications compiled in our own browser.

2 Likes

That’s very good to know. I was copying and pasting each page one at a time, so this method is still quite an improvement.

I just finished the course earilier today. The section on optimization is :fire: :fire: :fire:
I’ve been working on optimizing one of my projects before doing this course, but this section really tied everything together for me.

Just an observation about the course:

I was a bit surprised by how practical the course was. Often advanced courses get into some fairly arcane stuff that you feel like you may rarely use, but with this one everything felt useful. Starting out with diving into the dev tools and how to quantify some aspects of our projects was great. I definitely was not using the dev tools optimally.

Many thanks to everyone who worked on this course!