FAQ: React Programming Patterns - Review

This community-built FAQ covers the “Review” exercise from the lesson “React Programming Patterns”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Create a Front-End App with React
Create an Advanced Web App with React and Redux
Front-End Development
Front-End Development

Learn React
Learn React: State Management

FAQs on the exercise Review

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

H! Currently, I’m on the Full-Stack Engineer track (the course “React, Part II”) and have passed this project tasks, but during the project, I’ve noticed the usage of useState() function, I can’t recall whether we went through that concept previously, but in Review it is shown as if it had been taught already:

  • Created a function that calls the state setter method provided by useState().

Have I missed it, or will it be taught on the track later?

2 Likes

I am doing the Front End path and I have the exact same issue. I felt very lost and constantly having to google what was what, since states and hooks haven’t yet been explained through the course!

2 Likes

Hooks (such as useState() and useEffect() have not yet been explained.

I know what they are about because I already finished the Front-End Path and I am reviewing the contents. But I feel your frustration since I have already been there :slight_smile:

For what it is worth, the React Course have been refactored and now it is way better than it was just a couple of months ago. Stick with it. You will get it in the end.

1 Like

It’s a good sign they keep improving it. There’s still some work to do to make it easier to learn.

For one, I find the naming, let alone syntax rules, challenging. When something is called a container component, as opposed to presentational component (which is easier to understand), it’s easy to get lost. Container and component are close synonyms and it would be clearer if the container component was simply called state component.

I am also finding REACT challenging. I came across an interesting opinion (when I was trying to resolve an unrelated issue) that puts things in perspective in this Quora post.

It’s also worth pointing-out that this poster mentions Redux, which is covered in later modules (at least on the Full-Stack path and anyways is available to Codecademy subscribers) and that it’s important to understand the concepts at this stage and not stress-out over the detail.

I’m getting tired of reading “It’s just a library not a framework” argument written by fellow experts. So let me give you a fairly straight answer. Yes it is difficult!

I’m doing my 5th project in React with a leading Research & Advisory company, and currently training three young professionals in React and bunch of other stuff, so I think I know what I’m saying when I say React is difficult.

First of all, you will never use React alone to build anything in your life. Unless you think writing a stupid Todo app is the gold standard in React. When working on a real life application, the knowledge of following tools will constitute development in React.

  1. Redux (or any other equivalent library) for state management. React alone cannot (and should not) be used to manage the state of your application if at all you are developing a scalable solution for real life problems.
  2. Axios/Fetch/Superagent (library for performing API calls). Regardless of what backend technology you may use, you have to learn how to transfer data from backend to frontend and vice-versa.
  3. Webpack/Grunt (to bundle your code). TL;DR Webpack: When To Use And Why

It’s a waste of time if you don’t consider above tools when learning React. Combine everything mentioned above with React and you have a full fledged framework.

Now having said that, definitely there is a learning curve for both React and Redux. And it is not just about learning the terminologies. You have to do a lot of pre-thinking before writing a single line of code. And it will mostly revolve around designing and managing the data tree that you are going to have in your application. Trust me when I say this, development in React is a real pain in the ■■■ until you wrap your head around the (React+Redux)’s flow and state management principles and some nasty errors that will make you realize that things may not always work as per the documentation.

Once you get over the mess and find your own pattern of development in React, only then would you be able to enjoy working in React.

I would say, don’t waste your time learning React.js alone. Always start with a tutorial series that covers every single library mentioned above. PluralSight has a fantastic course which covers just that.

And please, don’t end up in the category of those who think developing a Todo app is enough to learn React. It is not! Nobody in the IT industry uses React alone.

1 Like

Hi everyone,

I successfully completed the ‘Video Player’ project, but I don’t understand why I must use bracket notation to reference the properties of the constant VIDEO. I recall from the lesson on objects that dot notation could be used to access properties of objects. There was one exception to this rule, but I don’t remember precisely what that exception was. Still, the keys of this object don’t appear to be the kind of keys that require bracket notation to reference. So, just to clarify, no bracket notation and the video player breaks (the form radio buttons cause no change), bracket notation and they magically work. Can someone dispel the magic for me? Thanks! onSelectVideoHandler is where this bracket notation is required.

const VIDEOS = {
  fast: 'https://content.codecademy.com/courses/React/react_video-fast.mp4',
  slow: 'https://content.codecademy.com/courses/React/react_video-slow.mp4',
  cute: 'https://content.codecademy.com/courses/React/react_video-cute.mp4',
  eek: 'https://content.codecademy.com/courses/React/react_video-eek.mp4'
};

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

  const onSelectVideoHandler = (newVideo) => {
    setSrc(VIDEOS[newVideo]);
  }

	return (
      <div>
        <h1>Video Player</h1>
        <Menu onSelectVideo={onSelectVideoHandler}/>
        <Video src={src} />
      </div>
    );
};

This is encouraging. I did pick up O’Reilly’s 2020 book on React to supplement the CC lessons and projects. I find dipping into two different wells for the same water after some time between helps me learn the material better. I feel like the scoping rules in Javascript carry over to React and the functionality it offers is pretty cool. Looking forward to the end unit project (Reddit Client) to get it all together.

1 Like

It was likely the lesson: Bracket Notation which mentions “We must use bracket notation when accessing keys that have numbers, spaces, or special characters in them”

Yes, the above listed situations aren’t the reason why your code wasn’t working. One of the situations that wasn’t listed in the lesson was “a property name that is held inside a variable can only be accessed using the bracket notation” (Working with objects - JavaScript | MDN)
[EDIT: Actually the “Bracket Notation” lesson does indeed talk about this situation)

Consider the following:

const VIDEOS = { fast: "abc", slow: "def", cute: "ghi", eek: "xyz" }

// Works fine
console.log(VIDEOS.slow) // "def"
console.log(VIDEOS["slow"]) // "def"

// Doesn't work fine
let word = "slow"
console.log(VIDEOS[word]) // "def"
console.log(VIDEOS.word) // undefined

In the above, VIDEOS[word] will be evaluated as VIDEOS["slow"] which works fine.

But, VIDEOS.word will be evaluated as VIDEOS["word"]. Since there is no property/key named word in the object, so undefined is returned (In other languages such as Python, trying to access a non-existent key would result in an error, but in JavaScript no error is thrown and instead undefined is returned).

Suppose, the object was:

const VIDEOS = { fast: "abc", slow: "def", cute: "ghi", eek: "xyz", word: "GAMMA" }

let word = "slow"; 
console.log(VIDEOS[word]) // "def"
console.log(VIDEOS.word) // "GAMMA"
// VIDEOS.word is not interpreted as VIDEOS["slow"]
// Instead, VIDEOS.word is interpreted as VIDEOS["word"]

In your code snippet, newVideo is a parameter and I assume a string will be passed as the argument.

setSrc(VIDEOS[newVideo]);

will work fine, but

setSrc(VIDEOS.newVideo);
// will be interpreted as:
setSrc(VIDEOS["newVideo"]);
// Since there is no newVideo property/key in the VIDEOS object, so
// undefined is returned.
1 Like

let word='slow' and VIDEOS.word will be evaluated as Videos['word']. This clears it up! Thank you!

1 Like