React: Use Advanced JavaScript in React Render Method: What does it all mean?

JavaScript
1

Tell us what’s happening:

I am having trouble understanding the instructions and the code. I peeked at the solution and I don’t understand what it all means. By “all” I mean the instructions, code, and solutions to this challenge and all prior challenges in the React section. So I thought I should ask for some clarification.

Specifically:

  1. What is a “method” in React? Is it the same as a “method” in JS?
  2. What is “class” in React? Is it the same as “class” in JS?
  3. What is “extends React.Component?”
  4. What is “constructor(props)” and “super(props)”?
  5. What are “props?”
  6. What does it mean to “bind” or be “bound to”?
  7. What does the “this” keyword mean? (I’ve been working on this one for a few months now without generating much understanding)
  8. What is “state?”
  9. What is a React “component?”
  10. What does “render to the page” mean?
  11. What does it mean when a “component” “updates”?

I suppose I might have other questions as well, but these are the ones that come to mind right now.

thanks for reading my questions…

Your code so far


const inputStyle = {
width: 235,
margin: 5
}

class MagicEightBall extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    userInput: '',
    randomIndex: ''
  }
  this.ask = this.ask.bind(this);
  this.handleChange = this.handleChange.bind(this);
}
ask() {
  if (this.state.userInput) {
    this.setState({
      randomIndex: Math.floor(Math.random() * 20),
      userInput: ''
    });
  }
}
handleChange(event) {
  this.setState({
    userInput: event.target.value
  });
}
render() {
  const possibleAnswers = [
    'It is certain',
    'It is decidedly so',
    'Without a doubt',
    'Yes, definitely',
    'You may rely on it',
    'As I see it, yes',
    'Outlook good',
    'Yes',
    'Signs point to yes',
    'Reply hazy try again',
    'Ask again later',
    'Better not tell you now',
    'Cannot predict now',
    'Concentrate and ask again',
    'Don\'t count on it',
    'My reply is no',
    'My sources say no',
    'Most likely',
    'Outlook not so good',
    'Very doubtful'
  ];
  const answer = this.randomIndex // << change code here
  return (
    <div>
      <input
        type="text"
        value={this.state.userInput}
        onChange={this.handleChange}
        style={inputStyle} /><br />
      <button onClick={this.ask}>
        Ask the Magic Eight Ball!
      </button><br />
      <h3>Answer:</h3>
      <p>
        { /* change code below this line */ }
        {this.answer}
        { /* change code above this line */ }
      </p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Use Advanced JavaScript in React Render Method

Link to the challenge:

2

Hi Sharad,
answering all of these questions would take a long time. I would suggest to revisit the exercises that lead up to this one and should you get stuck again, ask the question that has the highest priority for you. Once that is clarified, the second priority etc.

3

Hi @michaelsndr,

Thanks for your reply and feedback.

I do understand that answering these questions would take a long time. The reason I asked the questions is that I have already revisited the exercises that lead up to this one and the problem is, I find the explanations to be very vague and perfunctory.

I’m not sure there is any real priority regarding my questions - they all seem relevant to understanding React, and unfortunately part of the problem is that from the explanations provided, I don’t have a good enough grasp to get a feel for what the salient issues would be, in order for me to have a better understanding.

I’ve watched several YouTube videos about React, but they have not furthered my understanding of the issues I mentioned.

Any suggestions/links for further reading/videos would be welcome.

thanks again for the feedback.

4

Hello there,

I want to start off by recommending this video: Deconstructing React
I found it immensely interesting and fun.

As for your questions:

  1. Yes, seeing as React is quite an Object Oriented Programming approach.
  2. Yes, the video above kind-of proves this. Do not think React is some new language; it is just made with JavaScript.
  3. extends is an ES6?/ES5 keyword that is identical to the use of it in any JavaScript class construction. I suggest you search more on this, if you are interested, as it is fundamental for OOP in JavaScript.
  4. Essentially, seeing as you can think of a class as a function, but the class definition does not consist of () after the class name, constructor(props) is the method to use the props parameter within the class:
// Declare a function that accepts an argument
function myFunc(prop) {
}
// Declare a class that accepts an argument
class MyClass {
  constructor(prop) {
  }
}
  • super(props) tells the class to inherit all of the props/methods available to the parent class that your class extends. Again, this is nothing specific to React.
  1. props is the common name given to the objects (arguments) passed to the component. The video linked above explains this well.
  2. I am not the best to explain this. I just do it :man_shrugging:. Whilst it is so prolific in React, it is just ye-old-average JavaScript.
  3. this is a fun thing to work with. It refers to an instance of an object. The only way I got my head around it, is by watching a few dozen of Daniel Shiffman’s Coding Challenges. He often employs OOP techniques to solve problems, and this is an important aspect of that.
  4. Again, the video might help you understand where state fits into JavaScript.
  5. I cannot think of words: MyClass is a component in both these examples:
// class component
class MyClass extends React.Component {
  constructor(props) {
    super(props);
  }
}
// Functional component
const MyClass = (props) => {
}
  1. Video above could help… In my words, rendering to the page occurs when you cause the component to attach to the document object.
  2. Official Documentation does a good job of explaining: https://reactjs.org/docs/react-component.html

My advice, start using React. Copy tutorials, create your own apps, encounter all the errors you can. This is the best way you will get to understand it.

Hope this helps

2 Likes
5

@Sky020, thank you for the answers and for the references to other resources! I will check them out.