React Basics Flashcards
(30 cards)
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.
Hey
In JSX, you can't use the word class! You have to use className instead: ```Hey
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.Also fine, without the slash:
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:
NOT FINE AT ALL in JSX:
