React Basics Flashcards
How do you create a new React app?
in command line:
mkdir FolderName
cd FolderName
npm init
How do you add a new module to your React app?
in command line:
npm install modulename –save
How do you create a server for your React app using the express module?
//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’);
});
What argument does require(‘’) take?
The name of the module in a string
//example
//this gives us access to the entire express api
var express = require('express');What does this line of code in in server.js? var app = express();
Creates a new app that has access to the entire express library
How do you tell your React app which folder to user on the server?
app.use(express.static('public'));
//express.static('') tells the server which folder it will useWhat does app.listen() do and what two arguments does it take?
- It starts the server
- 1. port name 2. a function that will be called when the server runs
What 2 things does the Babel library do for your React app?
- 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
- It converts JSX to javascript
What is the react-dom library used for?
It is used applications in a web enviornment
How do you run the server for your React app?
node server.js
What are React components?
Building blocks for your regular app’s UI
What is the common naming convention for React components?
//first word is capitalized the rest are camelcase //e.g. ReactComponent
What argument does the React.createClass() function take and what does it do?
- it takes an options object
2. it describes the behavior of the class
What is the only thing required of a react component method?
render: function() {
return();
}
What syntax does the return(); method take in this render?
render: function() {
return();
}
jsx
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>
);
}
});
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.
What is the syntax for rendering a react component inside a render?
What are component properties?
It’s a way to pass data into component when you first start it
What is the syntax to pass a javascript variable in jsx
{ }
How do you set a default prop?
getDefaultProps: function () {
return {
name: 'React',
message: 'This is the default message!'
};
},How would you add a property called name to a component called Greeter
What do you wrap JSX expressions that are longer than 1 line?
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>
)
Basic JSX rules
- Only 1 outer element in a variable
What is ReactDOM?
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.
What is ReactDOM.render
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.
What happens when you try to update the DOM in React?
- The entire virtual DOM gets updated.
- The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
- The changed objects, and the changed objects only, get updated on the real DOM.
- Changes on the real DOM cause the screen to change.
What does the JSX attribute className render as in html?
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.
What’s a self-closing tag?
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>
How do you execute regular JavaScript code in JSX?
You can do this by wrapping your code in curly braces.
{1+2}
How are JSX event listeners like similar to HTML listeners like onclick written in JSX?
In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.
