ReactJS - beginner

Question 1

How do you declare a new React component class?

Answer 1

You sub class React.Component

class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}

Question 2

What is the convention for writing Javascript class names ?

Answer 2

Upper Camel Case

for example: MyComponentClass

Question 3

How can you tell the difference between JSX that is HTML-like and JSX that is a component instance?

Answer 3

Capitalisation.

< MyComponentClass /> // component instance

<h1>Hello there</h1>

// HTML-like JSX

In a JSX element, a capitalised first letter says, “I will be a component instance and not an HTML tag.”

Question 4

How do you call a components render method?

Answer 4

You pass the component to ReactDOM.render(). ReactDOM.render calls the render method of MyComponentClass for you.

ReactDOM.render(
< MyComponentClass />,
document.getElementById(‘app’)
);

Question 5

What are “named exports”?

Answer 5

Named exports are variables that you export using the export key word like this :

// file.js
export const name='Tom';

And then import them by their name within curly brackets like this:

// otherfile.js
import { name } from 'file.js';

Question 6

What is a default export?

Answer 6

This is when a variable is exported from a file using the “default” keyword like this:

// file.js
const name="Tom"; 
export default name;

As this will be the default export when you import it you do not need to specify its name and can give the variable it will be placed into any name you want. The curly braces are not required for a default import.

// otherfile.js
import someName from 'file.js';

someName will now contain “Tom”;

Question 7

What is this ?

< MyComponentClass />

Answer 7

An instance of a React component.

Question 8

How do you view a components props?

Answer 8

You use this.props within the components class definition.

class PropsDisplayer extends React.Component {
render() {
const stringProps = JSON.stringify(this.props);
return (
<div>
<h1>CHECK OUT MY PROPS OBJECT</h1>
<h2>{stringProps}</h2>
</div>
);
}
}

Question 9

What does JSON.stringify() do?

Answer 9

It turns a JavaScript object or value into a JSON string.

Question 10

What does JSON.parse() do?

Answer 10

It turns a JSON string into a corresponding JavaScript variable.

Question 11

Can a web browser read a Javascript file that contains JSX?

Answer 11

No a web browser can not read JSX. The JavaScript file will need to be compiled first with a JSX compiler. This will translate any JSX into regular JavaScript.

Question 12

How can you write JSX code without using JSX?

Answer 12

Use React.createElement()

const h1 = <h1>Hello World</h1>;

// can be rewritten without JSX like this

const h1 = React.createElement(
    "h1",
    null,
    "Hello World"
);

Question 13

Can JSX elements have attributes ?

Answer 13

Yes they can have attributes just like HTML elements.

Question 14

Can you access variables declared outside of a JSX expression in a JSX expression?

Answer 14

Yes you can.

// Declare a variable
const name = "Tom";

// Access your variable from inside a JSX expression
const greeting = <p>Hello {name}!</p>;

Question 15

Can you nest JSX elements?

Answer 15

Yes JSX elements can be nested just like HTML elements.

Question 16

Can you use an if statement in a JSX expression?

Answer 16

No you cannot.

Question 17

How do you make a JSX expression appear on screen?

Answer 17

You have to render it. From the “react-dom” library you can use ReactDOM.render().

Question 18

How do you add an event listener to a JSX element?

Answer 18

You give the JSX element a special attribute.

< img onClick={myFunc} />

Question 19

How do you get Javascript code to run that is inside JSX?

Answer 19

You wrap it in curly brackets.
The code below will render a h1 tag with 5 inside it.

ReactDOM.render(<h1>{2+3}</h1>, document.getElementById(‘app’));

Question 20

How do you import the react library?

Answer 20

import React from ‘react’;

This creates an object named React which contains methods necessary to use the React library.

Question 21

In a JavaScript file where can a JSX element be placed?

Answer 21

Anywhere that a JavaScript expression can go, for example, in an object:

const myTeam = {
manager: <li>Mark Rearden</li>,
apprentice1: <li>Thomas Mann</li>
}

Question 22

In a JSX element how is the event listener attribute’s name constructed?

Answer 22

It is constructed with “on” and the name of an “event”. For example “onMouseOver”.

Question 23

Is this HTML or JSX?

<p> Hello World </p>

Answer 23

It depends where it is. If it is in a HTML file it is HTML. If it is in a JavaScript file then it is JSX.

Question 24

Is this JavaScript or HTML?

conts h1 = <h1>Hello World</h1>;

Answer 24

It is JavaScript with some JSX!

Question 25

Read the answer aloud!!!!

Answer 25

opening tag, closing tag
opening tag, closing tag
opening tag, closing tag
opening tag, closing tag
opening tag, closing tag

Question 26

What are the arguments to the ReactDOM.render() method?

Answer 26

Argument 1 is a JSX expression. Argument 2 is a HTML element that the corresponding tree of nodes created from the JSX expression will be appended to.

Question 27

What are the methods for writing conditional statements within JSX expressions?

Answer 27

You can use the ternary operator and logical AND &&

Question 28

What do multi line JSX expressions require?

Answer 28

To be wrapped in parenthesis.

(
    <a href="https://www.whatever.com">
        Click me 
    </a>
)

Question 29

What do self closing tags require when written in JSX?

Answer 29

A forward slash immediately before the final angle bracket.

Question 30

What happens if you render the exact same content twice in a row?

Answer 30

The second render will do nothing. ReactDOM.render() only updates DOM elements that have changed.

Question 31

What is a important rule when creating JSX expression with multiple elements?

Answer 31

The first opening tag and the final closing tag must belong to the same element. A JSX expression needs a single outer element.

Question 32

What is JSX?

Answer 32

JSX is a syntax extension for JavaScript built to be used with React.

Question 33

What is React?

Answer 33

React is a JavaScript library.

Question 34

What is the virtual DOM?

Answer 34

The virtual DOM is a representation of the DOM that React uses to work out which real DOM elements need updating. Checking for updates in the virtual DOM is a lot faster than manipulating the real DOM.

Question 35

What will this return?

false && ‘hello there’;

Answer 35

It will return the value of the first falsy operand which is false.

Question 36

What will this return?

true && ‘hello there’

Answer 36

As both operands are true it will return the last operand ‘hello there’

Question 37

Who was React developed by?

Answer 37

Facebook engineers

Question 38

Can JSX elements use the class property?

Answer 38

No JSX requires the use of className instead of class. This is because class is a reserved word in JavaScript.

Question 39

How do you update state when state is an array?

Answer 39

You call the state setter and return a new array. You can place the contents of the old array into the new array by using the spread operator. You can then add any new elements as you normally would to an array.

const [things, setThings] = React.useState(["thing1", "thing2"]);
  function addThing(){
    setThings((prevState) => { 
      return [...prevState, `thing ${prevState.length + 1}`] });
  };

Question 40

How can you update state when state is an object?

Answer 40

You need to call the setter and return a new object. You can use the spread operator to return the original objects properties and then write new properties after this. If new properties already exist they will override the previous ones.

const [fields, setFields] = useState({ name: “”, email: “”, message: “”});

function updateName(name) {
    setFields(() => {
      return { ...fields, name: name };
    });
    console.log(fields);
  }

Question 41

What is the golden rule with state.

Answer 41

Never access state directly. Use the setter and avoid direct access such as

prevState++
prevState.push()
prevState.name=’newname’

Question 42

What is the best practice when accessing previous state?

Answer 42

As an argument to the state setting function you provide another function. This function will be provided with the previous state as an argument.

const [fields, setFields] = useState({ name: “”, email: “”, message: “”});

  function updateName(name) {
    setFields((prevState) => {
      return { ...prevState, name: name };
    });
    console.log(fields);
  }