React Basics

Question 1

How do you create a new React app?

Answer 1

in command line:
mkdir FolderName
cd FolderName
npm init

Question 2

How do you add a new module to your React app?

Answer 2

in command line:

npm install modulename –save

Question 3

How do you create a server for your React app using the express module?

Answer 3

//create file under root directory
server.js
//in file server.js
var express = require('express');

var app = express();

app.use(express.static(‘public’));

app.listen(3000, function () {
console.log(‘Express server is up on port 3000’);
});

Question 4

What argument does require(‘’) take?

Answer 4

The name of the module in a string
//example
//this gives us access to the entire express api
var express = require('express');

Question 5

What does this line of code in in server.js?
var app = express();

Answer 5

Creates a new app that has access to the entire express library

Question 6

How do you tell your React app which folder to user on the server?

Answer 6

app.use(express.static('public'));
//express.static('') tells the server which folder it will use

Question 7

What does app.listen() do and what two arguments does it take?

Answer 7

• It starts the server

- 1. port name 2. a function that will be called when the server runs

Question 8

What 2 things does the Babel library do for your React app?

Answer 8

1. It allows you to use ES6 features for web browsers even if the browser does not include these features, Bable will compile them for you
2. It converts JSX to javascript

Question 9

What is the react-dom library used for?

Answer 9

It is used applications in a web enviornment

Question 10

How do you run the server for your React app?

Answer 10

node server.js

Question 11

What are React components?

Answer 11

Building blocks for your regular app’s UI

Question 12

What is the common naming convention for React components?

Answer 12

//first word is capitalized the rest are camelcase
//e.g.
ReactComponent

Question 13

What argument does the React.createClass() function take and what does it do?

Answer 13

1. it takes an options object

2. it describes the behavior of the class

Question 14

What is the only thing required of a react component method?

Answer 14

render: function() {
return();
}

Question 15

What syntax does the return(); method take in this render?
render: function() {
return();
}

Answer 15

jsx

Question 16

Why wouldn’t this render?

var Greeter = React.createClass({
  render: function () {
    return (
      <div>
        <h1>Hello React!</h1>
        <p>This is form a component!</p>
      </div>
      <div>
        <p>This is another form a component!</p>
      </div>
    );
  }
});

Answer 16

The render will only render one root html element. In this example there are two separate divs when there should only be one. The only way to render the second div is to place the second div inside the first.

Question 17

What is the syntax for rendering a react component inside a render?

Question 18

What are component properties?

Answer 18

It’s a way to pass data into component when you first start it

Question 19

What is the syntax to pass a javascript variable in jsx

Answer 19

{ }

Question 20

How do you set a default prop?

Answer 20

getDefaultProps: function () {
    return {
      name: 'React',
      message: 'This is the default message!'
    };
  },

Question 21

How would you add a property called name to a component called Greeter

Question 22

What do you wrap JSX expressions that are longer than 1 line?

Answer 22

If a JSX expression takes up more than one line, then you should wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:

(
  <a href="https://www.google.net">
    <h1>
      Click me I am Goooooogle
    </h1>
  </a>
)

Question 23

Basic JSX rules

Answer 23

1. Only 1 outer element in a variable

Question 24

What is ReactDOM?

Answer 24

ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

Question 25

What is ReactDOM.render

Answer 25

ReactDOM.render is the most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM. That is the way to make a JSX expression appear onscreen.

Question 26

What happens when you try to update the DOM in React?

Answer 26

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

Question 27

What does the JSX attribute className render as in html?

Answer 27

In HTML, it’s common to use class as an attribute name:

<h1>Hey</h1>

In JSX, you can’t use the word class! You have to use className instead:

<h1>Hey</h1>
This is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript.

When JSX is rendered, JSX className attributes are automatically rendered as class attributes.

Question 28

What’s a self-closing tag?

Answer 28

Most HTML elements use two tags: an opening tag (<div>), and a closing tag (</div>). However, some HTML elements such as <img></img> and use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a self-closing tag.

When you write a self-closing tag in HTML, it is optional to include a forward-slash immediately before the final angle-bracket:

Fine in HTML with a slash:

<br></br>

Also fine, without the slash:

<br></br>
But!

In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error:

Fine in JSX:

<br></br>

NOT FINE AT ALL in JSX:

<br></br>

Question 29

How do you execute regular JavaScript code in JSX?

Answer 29

You can do this by wrapping your code in curly braces.

{1+2}

Question 30

How are JSX event listeners like similar to HTML listeners like onclick written in JSX?

Answer 30

In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.