3 Flashcards
12.
S
What does nvm stand for?
Node version manager.
What is a nvm?
A simple way in the terminal for us to switch node versions.
What is npx?
A package runner tool that comes with npm 5.2.
What does npx do?
It runs a command of a package without installing it explicitly.
npx runs a command of a package without installing it explicitly. What does this mean?
Before we had npx we had to run
npm install -g create-react-app
Then we ran the create react app command to create our app.
create-react-app my-app
npx allows us to not install this global version of create-react-app and just simply run that one command to create our app.
How can you get older documentation of React?
By clicking on the version number in the Navbar of the site.
What can you do if you’re unable to get the create-react-app started?
You can use a code sandbox to use React in the browser.
https://codesandbox.io/s/new
13.
E
What is recommended after installing VSCode?
Add the code shell command to your terminal.
How do you add the code shell command to your terminal?
hold cmd shift P. Then type command. Here, you’ll see ‘Shell Command: Install ‘code’ command in PATH’. Click that and it will install the code command to your path.
What happens when you have your path setup?
You’re now able to use the code dot command to open up files and folders inside of your terminal.
What is the terminal?
The terminal is going to be the main way we navigate around our application as well as modify our files.
How can you install node?
The easiest way is to use nvm.
How do you install nvm?
Go to (link in resource folder). When you get to the link, scroll down to the the section called 'Installation and Update'. Copy the line of code and paste it into the terminal. This will clone down the nvm package and add it to your existing shell, which is the thing we're running inside of our terminal. NOTE: When you have nvm we have to close the terminal and relaunch it.
What should you do when you first install nvm?
Type in command -v nvm to check if it installed correctly.
NOTE: If you see nothing listed this means that nvm isn’t yet loaded to our shell.
Where can we find information that helps us when we install and check the version of nvm but nothing gets listed?
Scroll down on the webpage we used to find the line of code that we used to install nvm in the terminal and find the section on ‘nvm: command note found’.
What should you do if you don’t see anything listed after installing and checking the version of nvm?
First check to see if we have a bash profile.
How can we check to see if we have a bash profile?
By simply typing nano ~/.bash_profile. If after pressing enter nothing happens meaning there is no bash profile, instead of nano replace it with touch and then run nano ~/.bash_profile again.
What does touch do when entered in the terminal? (with ~/.bash_profile?)
It will open a new bash profile for you.
What do you do when you’re inside of the bash profile?
If at the bottom we see nothing that relates to nvm we need to run the line (from to website) of running
source ~/.bashrc
How would you save…….
Press cmd + x and then y and lastly enter.
What do you do after you’ve ……
type source ~/.bash_profile
What does typing source ~/.bash_profile in the …. do?
It uploads and reruns our bash profile that we just made made changes to.
What should all of this have done…….?
Now when we type nvm something will appear instead of nvm command not found.
If after typing nvm you get something other than nvm not found what does this mean?
We have nvm installed.
How can we install node using nvm?
First figure out what node version we want to run by going to the node website e.g. 10.16.0 LTS. Go to the terminal and type in nvm install 10.16.0 or any other version of node.
NOTE: Typing in nvm install node will give you the latest version of node.
How after installing node can we use it?
By typing in nvm use 10.16.0 in the terminal.
What is also installed when installing node?
npm.
What are we going to use npm for?
To manage the packages we use inside of our JavaScript applications.
What are packages?
Libraries.
How can you check if you have node installed?
By typing node -v in the terminal.
How could you check if you have npm installed?
By typing npm -v in the terminal.
What is yarn?
Another package manager.
Who made yarn?
Facebook.
When was yarn made?
During a time when npm had some issues.
How do you install yarn?
Go to the yarn resource and copy the yarn code and paste in into the terminal.
How can you clear the terminal?
By typing clear.
How can you check if yarn is installed?
By typing yarn -v
What is something to note when using yarn or npm?
You can switch between them freely, however, in one project you should ideally one use one or the other (they shouldn’t be used in the same folder).
14.
E
15.
N
How would you install dependencies from package.json in both npm and yarn?
npm install
yarn
How would you install a package and add to package.json in both npm and yarn?
npm install package –save
yarn add package
How would you install a devDependency to package.json in both npm and yarn?
npm install package –save-dev
yarn add package –dev
How would you remove a dependency from package.json in both npm and yarn?
npm uninstall package –save
yarn remove package
How would you upgrade a package to its latest version in both npm and yarn?
npm update –save
yarn upgrade
How would you install a package globally in both npm and yarn?
npm install package -g
yarn global add package
16.
Y
How can you get a new font on you computer?
Download it, unzip the file and install the font on your computer.
How would you switch your VSCode over to using a different font?
Navigate into your editor settings and change your font over to a new font; also make sure to enable font ligatures!
What do you also have to do add in order to enable the cursive?
The extension snazzy operator.
What should you do if you install extensions in VSCode and the changes don’t load?
Restart your editor.
17.
C
What is create-react-app?
A tool to help developers get started with building React projects quickly.
Who built create-react-app?
Facebook.
What is the reason for the create-react-app tool?
React is written in a version of JavaScript that is further along tan the version of JavaScript that our browsers understand.
What does Babel and WebPack do?
They take the React code that we write and convert them into that older version of JavaScript and HTML.
Why do we need Babel and WebPack?
Because our browser can’t understand the code we write.
What does create-react-app do?
It allows us to create a React app fast that already has all of the configuration you need to get started.
How can we use the create-react-app tools?
We call npx create-react-app my-app in the command line.
Before you use create-react-app what should you do?
Make sure you’re running the latest version of node.
How can you install nvm?
nvm install 10.15.3
NOTE: It’s recommended to install the latest LTS version of node.
How do you use nvm?
nvm use 10.15.3
What should you do after you use nvm?
Use the create-react-app tool.
How do you use the create-react-app tool?
We call npx create-react-app my-app in the command line.
What happens when you run this command?
npx create-react-app my-app
create-react-app is now building out our project and setting up the files, the WebPack, the Babel, all the things we need so we can start using React right away.
What should you do after running create-react-app?
cd into it.
18.
C
How can you see what create-react-app has made for us?
After cding into the correct directory, we use the ls command.
What has create-react-app made for us?
A README.md file, a node_modules folder, a package.json file, a public folder, a src folder and yarn.lock file.
Where are our dependencies?
In node_modules.
How can you open this up in VSCode?
By typing code .
What is in the package.json file?
It’s included for us react and react-dom as well as another library called react-scripts.
What does react-scripts do for us?
It’s what allows us to not have to worry about WebPack and Babel.
What scripts does react-scripts include for us?
start, build, test and eject.
What do the react-scripts scripts do?
They call react-scripts to do there respective things.
What does the start react-scripts script do?
It starts the project.
How would you use the start script?
In the terminal, in the correct folder type yarn start.
What happens when you use the start script?
It serves up a sample application of React inside of localhost:3000.
Where does our application live?
In the src folder.
Where does all the React code we write live?
In the src folder.
What is the public folder?
Where all the older versions of JavaScript and HTML files that the browser can understand live.
What does the build react-scripts script do?
It turns all the React code in the src folder into the version that the browser can understand and puts it inside of the public folder.
What does the test react-scripts script do?
Runs the test code that we write.
What does the eject react-scripts script do?
It takes out all of the configuration files that’s hidden from us for Babel and WebPack in case we wanted to manage it ourselves.
How do we import React into our project?
import React from ‘react’;
What does this line of code do?
import React from ‘react’;
It holds everything related to React that we need into the file.
How would you import a logo in a create-react-app app?
import logo from ‘./logo.svg’;
How would you import the CSS in a create-react-app app?
import ‘./App.css’;
What can you see in the index.js file in a create-react-app app?
We import the App function and using the ReactDOM library, render it to the DOM.
What does this line of code do?
ReactDOM.render(, document.getElementById(‘root’));
The ReactDOM library calls render and looks on the document object for an element with an id of ‘root’ and replaces it with our ‘App’ function.
Where is the div with an id of ‘root’ located?
In the index.html file in the public folder.
What is the entry way of out application?
The div with an id of ‘root’.
What is good about create-react-app?
If we make any changes to any of the files it will automatically update inside of out local host.
19.
R
How do you open up the terminal in VSCode?
Terminal > New Terminal
What is the shortcut of opening a terminal in VSCode?
Something.
What should you do when you open a terminal inside of VSCode?
Make sure you’re inside the project.
What happened if you run yarn start in the VSCode terminal and nothing happens?
You may not have yarn installed on your computer.
What do package managers do?
Automate the process of installing, upgrading, configuring or removing any libraries we want.
What happens when you successfully start your app in the VSCode terminal but noting happens?
Just manually go to localhost:3000 in the browser.
What will happens when you run npm build?
You get a build folder. It says it’s creating an optimized production build.
What is a good thing about create-react-app?
It optimizes the code for you.
What is inside the build folder?
A minified index.html file, a static folder which contain our minified css files, our minified JavaScript files. All the code that we wrote in the src folder has now been created into optimized build files.
What would we do with the build folder?
Put it on a server.
What does Babel allow for us?
First Babel is going to take all the JavaScript files with the weird React syntax and make sure they work on all browsers no matter what version (how old or new (similar to what jQuery used to do))
What is webpack?
A modular bundler.
What does webpack do?
It allows us to write modular code.
What is meant when we say webpack allows us to write modular code?
The build folder only contains a few JavaScript files even though we have many in the src folder.
How many JavaScript files will webpack create?
Three. (Is this right?)
What are some of the JavaScript files in the build folder?
The main…..chunk.js JavaScript file
What type of tool is create-react-app?
A cli.
What is a cli?
A command line interface.
What will we use to deploy our application?
The build folder.
What is the purpose of package.json?
It allows us to have this package manager so, as React is all about a component architecture meaning we can use other peoples code in other components, we can use package.json to install other (perhaps) React components.
Give an example of how you would
If you go to material-UI, you can install component library material-UI.
How can you install material-UI?
By running npm install @material-ui/core@next.
What happens when we install material-UI?
It gets added to out package.json file.
What is React doing underneath the hood?
If you go to the index.html file in the public folder, you have some pre set up code. The key thingis when you look at the body tag, the only thing we have is a div with in id of root?
Where are we going to inject our React application?
In the div with an id of root in the index.html file of the src folder.
What happens if you put a, for example, h1 tag with text below the div with an id of root?
It will render to the screen which means the app will be part React and part HTML.
Why is being able to put other html tags in the index.html file useful?
Because it means you can inject React into parts of an application if desired.
What will you see if you inspect the React app (which has some HTML underneath) and go to the elements tab, what will you see?
The app is inside the div with an id of root and contains just HTML tags.
What happens if you open up the React developer tools?
The developer tools notice our React app. It has an app component that it’s created for us, but at the end of the day it’s the same thing as the html we see in the Elements tab.
What does the react library import do?
Allows us to write HTML like syntax inside a JavaScript file.
What does the react-dom library import do?
Imports the react-dom. A robot that interacts with the DOM.
What is the React package?
It allows us to write JSX, build components and build the VirtualDOM.
What is the ReactDOM?
A little robot that interacts with the DOM.
What does ReactDOM.render allow us to do?
Grab an element from HTML and insert < App / > into it.
20.
D
What happens when you eject a create-react-app?
It gives you two folders called scripts and config.
What is in the config (and scripts?) folder?
Everything the create-react-app was hiding under the hood for us.
What are some of the things in the config folder?
A jest folder for tests. The webpack configuration (our module bundler).
What are some of the things in the scripts folder?
All the scripts that were run e.g. the build script.
Why is it recommended not to inject?
Because it reveals a lot of code and your code isn’t going to be better than the developers.
What are you ensuring when you use create-react-app?
We’re automatically getting the best system and project build out of the box.
What happens to create-react-app when there are updates or the industry changes?
create-react-app will update to reflect those updates/changes.
Why is ejecting not a good idea?
Because you lose all the benefits as create-react-app gets updates.
21.
C
How could you return JSX?
By writing a function or a class that returns it.
Why would you want to use a class to return JSX?
Because React has given us the ability to write classes that have a lot more functionality on them versus a function that returns JSX.
Whats the first thing you do when writing a class?
import component from React.
Show how you would import component from React.
import React, { component } from ‘react’;
How could you convert this function to a class?
function App () {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
class App extends component {
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}What do we get access to when we use a class/the component?
The render() method.
What is this code block referred to?
function App () {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
A functional app/(component?)
Why would you want to use a class instead of a class?
By using a class component we get access to state.
What is state?
It’s a JavaScript object with properties that we can access at any point inside of our class.
How would we access state inside of a class?
You would call the constructor() keyword. Inside of the constructor you would call super().
What does super() do?
It calls the constructor method on the Component class.
What does calling the constructor method on the Component class from super() give you access to?
It gives us access to this.state
Where does the state property in this code live?
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}
On our class App
Show how you would create a state property on this code and set it to something.
class App extends component {
constructor() {
super();
}
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}How would you render the string property living on the state object in this code?
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > { this.state.string } < p / >
< div / >
);
}
}How would you render the string property living on the state object in this code?
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
}
By using curly braces
class App extends component {
constructor() {
super();
this.state = {
string: 'Hello World'
}
}
render() {
return (
< div className='App' >
< p > { this.state.string } < p / >
< div / >
);
}
}
What does the curly braces between the p tags do in this code?
It tells the HTML that anything between them is going to be JavaScript.
Why is it useful to use state to render text as opposed to using a static string?
Because you can use it as many times as you want and you only have to update in one place.
How would you change the value in state?
By using a method called setState()
Where does setState() come from
The Component that’s extended from the class App.
What does setState() do?
It lets us modify the state object.
Where would you get access to the (method?)/property onClick?
On every HTML element.
What does onClick take?
A function.
What happens to the function taken by onClick?
It gets called whenever the element gets clicked.
How would you create a button that when clicked changes the state object?
< button onClick={() => this.setState({ string: ‘Qwerty’ })} >
Change Text
< button / >
What does setState() take?
An object with all of the properties that you want to change on your state as well as their new values.
22.
T
How did older version of create-react-app start the app?
With a class instead of a function.
What are some of the syntax changes in JSX?
className (to give something a HTML class) instead of class(which create a class).
Curly braces which when used inside JSX means anything inside of them is a JavaScript expression.
Using onClick instead of onclick.
Why is there some syntax changes in JSX?
Because it’s JavaScript and it would get confused if we for example used class instead of className.
What would happen if you hover over className in JSX?
A popup would appear telling you it’s a JSX attribute.
Why do we use className instead of class in JSX
To distinguish between the two as class means something else in JavaScript.
What does class mean in JavaScript?
We’re creating a class.
What does class mean in HTML?
We’re giving something in HTML a class.
What type of function is used in onClick?
< button onClick={() => this.setState({ string: ‘Qwerty’ })} >
Change Text
< button / >
An anonymous function.
What is noteworthy about this code?
< button onClick={() => this.setState({ string: ‘Qwerty’ })} >
Change Text
< button / >
We don’t actually modify this.setState/state directly.
Why don’t we modify state directly?
It comes from the idea of a unidirectional data flow.
Why are you not allowed to modify state without calling the setState method?
Because anytime we change the state (e.g. a user click the button to change the state to a new string), when that click happens React actually intercepts (as React is the one talking to the DOM) the click and it reports back saying ‘I just got a click on the DOM, what do I do?’. In this case we say when the click happens I want you to update the state. But we’re not going to modify the state automatically, I’m going to say a click happened, state gets updated using setState and that change is going to re-render the component so we can go through this flow again.
Do components get re-rendered automatically if we modify state directly?
q
q
q
q
q
q
q
q
q
q
q
What happens when setState gets called in this code?
render() {
return (
< div className='App' >
< button onClick={() => this.setState({ string: 'Qwerty' })} >
Change Text
< button / >
< div / >
);
}
The render() method is going to run again.
Why does the render() method run again when setState gets called?
Because the state just got update (this is the declarative approach of React).
What happens when you hover over onClick?
A popup will show saying it’s a JSX attribute and not HTML.
Why do we use onClick in JSX and not onclick?
Because it isn’t HTML. It’s JavaScript mimicking HTML and in JavaScript we use camel case.
Can we use any HTML attributes we want in React like src, class and onclick?
Yes but sometimes there are differences. src for example is the same but onclick and class become onClick and className respectively.
What’s the key thing to remember with JSX?
That it’s trying to mimic what HTML does so we can create that VirtualDOM and break down each part of the app into components that keep getting re-renderd as we update the state using setState.
23.
D
How would you render a bunch of h1 tags with the name of these monsters?
class App extends component {
constructor() {
super();
this.state = {
monsters: [
{
name: 'monster 1'
},
{
name: 'monster 2'
},
{
name: 'monster 3'
},
]
}
}
render() {
return (
< div className='App' >
< div / >
);
}
}
class App extends component {
constructor() {
super();
this.state = {
monsters: [
{
name: 'monster 1'
},
{
name: 'monster 2'
},
{
name: 'monster 3'
},
]
}
}
render() {
return (
< div className='App' >
{this.state.monsters.map(monster => (
< h1 >{ monster.name }< h1 />
))}
< div / >
);
}
}Why would you use curly braces in the div with a className of App?
Because we have to render JavaScript.
