React II - Video Player - Different way of writing code than previous lessons?

Language Help React.js
1

I have been super confused throughout the React II course, especially now that I am trying to build the Video Player.

Until now, we would create component classes as follows:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.chooseVideo = this.chooseVideo.bind(this);
    this.state = { src: VIDEOS.fast };
  }

  chooseVideo(newVideo){
    this.setState({
      src: VIDEO[newVideo]
    })
  }
  
  render() {
    return (
      <div>
        <h1>Video Player</h1>
        <Menu chooseVideo={this.chooseVideo} />
        <Video src={this.state.src} />
      </div>
    );
  }
}

And now the same code is written (from the initial App.js file in Video Player):

function App() {
  const [src, setSrc] = useState(VIDEOS.fast);

	return (
      <div>
        <h1>Video Player</h1>
        <Menu />
        <Video />
      </div>
    );
};

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);

Looking at the forum, it seems no one is using this newer (?) notation, was the course updated while I was going through the motions? Feeling very lost!

1 Like
2

@py8491744067

I donā€™t know when something may have been changed, but the difference between the Class components and the function components was explained early in React I (Ithink) that the Class notation is the older way of doing it, and theyā€™re teaching that notation so youā€™ll know what to do when you see it out in the wild, but then from there on out they were using the newer function notation.

You must have just missed that one explanation page on it.

3

I also noticed the difference when searching this forum for bugs in my source code. I have decided to use ChatGPT for debugging purpose and it works! I think the reason they have revised to use a JSX expression instead of Class expression is that maybe they want the learners to be familiar with the language commonly used in React app development. Take note that JSX uses combination of JS and HTML syntax while Class uses only JS.

4

I know Codecademy did an update to the curriculum and changed how components were being taught. I received a notification that you can read here. I had to go back and re-learn all of React I and part of React II. Iā€™m now at the same Video Player and none of this seems familiarā€¦

From the Change Log it appears that the entire State lesson was removed, but now this project uses state, but in a way that was not previously taught. Oof, struggling with this one and admittedly frustrated.

2 Likes
5

Agreed, Iā€™m pulling out my hair and beyond irritated

6

Ok so Iā€™m not crazy, I was like ā€œwhen did they teach us about use statesā€ as I started doing this one today. Thought I had skipped the state lesson by accident, but I guess others are noticing itā€™s just not there either.

2 Likes
7

I have also noticed recently while doing Video Player project and React Programming Patterns quiz that useState() is being casually used like it was introduced before, but it wasnā€™t. In quiz there were question asking me about useState() and I was blindly answering not having slightest idea what to make of that and now this project came along doing the same thing. Codecademy please fix it!

1 Like
8

Out of curiosity, can you provide a link to the course through which you are trying to complete the Video Player project and Patterns quiz?

I am seeing this project/quiz in the React course: https://www.codecademy.com/learn/react-101

Just before the ā€œReact Programming Patternsā€ module, there is the ā€œHooksā€ module which goes over The State and Effect hooks.

The course https://www.codecademy.com/learn/react-102 shows a message:

Our React content has been moved! You can now find everything in our Learn React course.

I think that in the 102 course, there might be no lessons on useState and useEffect.

9

Iā€™m doing Front-End Engineer course in which lesson on hooks is a bit further:
https://www.codecademy.com/career-journey/front-end-engineer/path/fecj-22-front-end-development/track/fecj-22-react-part-ii

10

Same Issue. UseState is being used here before itā€™s been actually covered in the Path.
Iā€™m doing front-end path as well.
In the new ā€˜learn Reactā€™ Hooks are taught before the video player project but in the front-end path itā€™s all messed up.

Itā€™s extremely annoying.

Needs to be fixed ASAP.

11

If you work for codecademy please bring this to their attention.
Thanks!

12

I am not associated with Codecademy.

I am not even a subscriber. Just a student playing around with some of the free content.

Usually in the exercises/projects, there is a dropdown menu ā€œGet Unstuckā€. One of the options in the menu is to report 'Bugs" or offer comments about the content. You can try that or you can try contacting support/help center with your concerns. Perhaps they may offer some suggestions.