Intro Stuff

Question 1

What are common patterns for doing conditionals in XML?

Answer 1

1. Ternary operator inline
2. Use the ‘&&’ operator, when there’s no ‘else’ condition.
3. Define a variable in an if/else above in the render() method, and then display that variable.

Question 2

How do you take advantage of booleans in Javascript?

Answer 2

You can write variables and then set them equal to the condition. Then use the fact that that variable will be either truthy or falsey later on.

Question 3

How do you loop in JSX?

Answer 3

Use array.map(fn)

class Messages extends React.Component {
   render(). {
      const msgs = [
           {id: 1, text: "Greetings!!"}, 
           {id: 2, text: "Goodbye!"}, 
      ];
      return (
          <ul>
            { msgs.map(m => <li>{m.text}</li>)  }
         </ul>
      );
   }
}

Question 4

How can you make your JSX variables considerably shorter in your return statment?

Answer 4

Use destructuring.

class Friend extends Component {
  render() {
    const { name, hobbies } = this.props;
    return()
  }
}

Question 5

How does map work?

Answer 5

It returns the result of the callback function for each item in the array.

Question 6

How do you put variables into a map return statement?

Answer 6

Put additional ‘{ }’ around the variables.

Question 7

How do you handle events with state?

Answer 7

1. Initialize state
   
   • Constructor
   • Super
   • Set ‘this.state’
2. Use the state key inside of return function.
3. Define a function inside the class that changes the state. handleClick(e)
4. Add the function on the event handler inside of return
   
   • this.handleClick
5. Bind ‘this’ inside the constructor
   
   • this.handleClick = this.handleClick.bind(this);

Question 8

What things do you put inside the class?

Answer 8

Render
Default props
Constructor
event functions

Question 9

What’s the shortcut for initializing state?

Answer 9

Leave the constructor out and just put something like this in the class:

state = {clicked: false};

Question 10

What’s the shortcut for handling events and updating state?

Answer 10

Inside of the class call:

handleClick = e => {
this.setState({clicked: true});
};

Question 11

Duplicate line up/down

Answer 11

Shift + Option + Up / Shift + Option + Down

Question 12

Move Line up/down

Answer 12

Option + Up / Option + Down

Question 13

Multi-select selection

Answer 13

Command + D (to select next occurrence(s) after you make an initial selection)

Question 14

Multi-select Cursor

Answer 14

Option + Click

Question 15

Toggle line comment

Answer 15

Command + /

Question 16

Show/hide terminal

Answer 16

Control + ̀

Question 17

Add Line Comment

Answer 17

Command + K Command + C

Question 18

Toggle Sidebar

Answer 18

Command + B

Question 19

How do you choose a random pre-programmed value?

Answer 19

Put all the values into an Array, and then use the Math.floor(Math.random() *length of array) method and put it into the index of the array.

** You’ll end up choosing a random index inside the array that you’re using.