FrontEnd - Questions SASS/React

JavaScript
1

I’m currently learning React inside of the Front End Libraries. At the first glance it sounded very nifty and i was able to follow along just fine until all of a sudden three or four challenges after one another start to add random things like super/constructor/render, classes extending other classes alongside extremely long paragraphs inside the challenges themselves with information I’m unable to properly understand.

Although I didn’t have to do anything with these variables and parameters according to the challenge, they have been there now for a couple of challenges straight and you might understand that this can be very daunting and confusing for someone who has never seen react before. It does fulfill a function in the end to render the code onscreen and if I don’t know what it does, how can I understand what I’m doing at all during the challenge? I hope you understand it makes the react curriculum very confusing at times.

I’ve got a couple of questions I would love for someone to answer before I feel confident to continue as I’m currently stuck in what I call the ‘nestception’ challenge in React:

  • Can someone please explain to me, what is the use of render/constructor/super and class A extends React.component in like a nutshell and what is the ‘boilerplate’ for these?

  • The curriculum compiles code for you, which is neat. However, when I try to code along in Visual Studio code nothing runs or is compiled in some way. How does this work in Code? I think it’s better if the curriculum would teach this first so you’re able to code along if you want to do experiment outside of the curriculum.

  • Can someone please explain the use of the ‘nest-ception’ challenge for me in https://www.freecodecamp.org/learn/front-end-development-libraries/react/use-react-to-render-nested-components as it nests things, but what is exactly the point as it just shows up as plain regular HTML? Why would I need to nest something inside a nest inside a nest and move fruits around?

  • Another question, but this is more SASS-related. The SASS curriculum only had 9 challenges or so. It literally came by and went within an hour for me. Is that all there’s to it to SASS? If not, why isn’t it included in the curriculum? If it is, why is it important to learn SASS at all since perhaps except one or two nifty features it barely adds anything at all?

2

  1. I really wouldn’t worry about it right now. But you can read the React docs and the MDN docs on classes. I would suggest you take a modern React course. The freeCodeCamp YouTube channel has some good React tutorials. You won’t be using classes at all in new React code (most likely). You can learn about class components but until you actually need to work with them (maybe in old code) I wouldn’t spend too much time learning about them in the beginning.

  2. Use Vite to set up React locally.

  3. It is really all about reuse. The same component can be written once and used in many places. Say a nav component, instead of writing the same nav element on all pages you just reuse it. Nesting components are not really much different from nesting HTML. But in React you can pass data down to components so a nested component can have access to the data defined in the parent component.

  4. SASS/SCSS can be as complicated or simple as you like. A lot of people just use it for the selector nesting combined with a BEM naming convention. If you look at the SASS docs it has a lot of more advanced uses and can get fairly complicated. But I do think the curriculum touches on some of the main SASS features, although it is handled fairly briefly.

3

I’d recommend learning React from a different source. No one writes React like this anymore, and the curriculum content is very outdated.

4

These are just features of classes in JS – constructor is the function you always define on a class if you need to do some setup work (otherwise it is automatically defined for you). extends is used to create a class that is a child.of another class, ie it inherits methods. super, when used as a function call, calls the parent constructor. render is a method defined by React on the Component class, for which you need to provide an implementation. These aren’t React-specific things (apart from the render function, which is defined on the Component class you inherit from).

As @miketandy says, React is rarely written like this now, so specifically with respect to React I would also say another source may be more useful. However, lots of common things are written leveraging JS classes (for example Angular, Vue, WebComponents, frameworks to make working with WebComponents easier like Lit, etc etc), so it’s not wasted knowledge as long as you are using the process to understand what you’re writing.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.