3 Flashcards
(483 cards)
1
Q
12.
A
S
2
Q
What does nvm stand for?
A
Node version manager.
3
Q
What is a nvm?
A
A simple way in the terminal for us to switch node versions.
4
Q
What is npx?
A
A package runner tool that comes with npm 5.2.
5
Q
What does npx do?
A
It runs a command of a package without installing it explicitly.
6
Q
npx runs a command of a package without installing it explicitly. What does this mean?
A
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.
7
Q
How can you get older documentation of React?
A
By clicking on the version number in the Navbar of the site.
8
Q
What can you do if you’re unable to get the create-react-app started?
A
You can use a code sandbox to use React in the browser.
https://codesandbox.io/s/new
9
Q
13.
A
E
10
Q
What is recommended after installing VSCode?
A
Add the code shell command to your terminal.
11
Q
How do you add the code shell command to your terminal?
A
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.
12
Q
What happens when you have your path setup?
A
You’re now able to use the code dot command to open up files and folders inside of your terminal.
13
Q
What is the terminal?
A
The terminal is going to be the main way we navigate around our application as well as modify our files.
14
Q
How can you install node?
A
The easiest way is to use nvm.
15
Q
How do you install nvm?
A
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.
16
Q
What should you do when you first install nvm?
A
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.
17
Q
Where can we find information that helps us when we install and check the version of nvm but nothing gets listed?
A
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’.
18
Q
What should you do if you don’t see anything listed after installing and checking the version of nvm?
A
First check to see if we have a bash profile.
19
Q
How can we check to see if we have a bash profile?
A
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.
20
Q
What does touch do when entered in the terminal? (with ~/.bash_profile?)
A
It will open a new bash profile for you.
21
Q
What do you do when you’re inside of the bash profile?
A
If at the bottom we see nothing that relates to nvm we need to run the line (from to website) of running
source ~/.bashrc
22
Q
How would you save…….
A
Press cmd + x and then y and lastly enter.
23
Q
What do you do after you’ve ……
A
type source ~/.bash_profile
24
Q
What does typing source ~/.bash_profile in the …. do?
A
It uploads and reruns our bash profile that we just made made changes to.
25
What should all of this have done.......?
Now when we type nvm something will appear instead of nvm command not found.
26
If after typing nvm you get something other than nvm not found what does this mean?
We have nvm installed.
27
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.
28
How after installing node can we use it?
By typing in nvm use 10.16.0 in the terminal.
29
What is also installed when installing node?
npm.
30
What are we going to use npm for?
To manage the packages we use inside of our JavaScript applications.
31
What are packages?
Libraries.
32
How can you check if you have node installed?
By typing node -v in the terminal.
33
How could you check if you have npm installed?
By typing npm -v in the terminal.
34
What is yarn?
Another package manager.
35
Who made yarn?
Facebook.
36
When was yarn made?
During a time when npm had some issues.
37
How do you install yarn?
Go to the yarn resource and copy the yarn code and paste in into the terminal.
38
How can you clear the terminal?
By typing clear.
39
How can you check if yarn is installed?
By typing yarn -v
40
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).
41
14.
E
42
15.
N
43
How would you install dependencies from package.json in both npm and yarn?
npm install
| yarn
44
How would you install a package and add to package.json in both npm and yarn?
npm install package --save
| yarn add package
45
How would you install a devDependency to package.json in both npm and yarn?
npm install package --save-dev
| yarn add package --dev
46
How would you remove a dependency from package.json in both npm and yarn?
npm uninstall package --save
| yarn remove package
47
How would you upgrade a package to its latest version in both npm and yarn?
npm update --save
| yarn upgrade
48
How would you install a package globally in both npm and yarn?
npm install package -g
| yarn global add package
49
16.
Y
50
How can you get a new font on you computer?
Download it, unzip the file and install the font on your computer.
51
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!
52
What do you also have to do add in order to enable the cursive?
The extension snazzy operator.
53
What should you do if you install extensions in VSCode and the changes don't load?
Restart your editor.
54
17.
C
55
What is create-react-app?
A tool to help developers get started with building React projects quickly.
56
Who built create-react-app?
Facebook.
57
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.
58
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.
59
Why do we need Babel and WebPack?
Because our browser can't understand the code we write.
60
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.
61
How can we use the create-react-app tools?
We call npx create-react-app my-app in the command line.
62
Before you use create-react-app what should you do?
Make sure you're running the latest version of node.
63
How can you install nvm?
nvm install 10.15.3
| NOTE: It's recommended to install the latest LTS version of node.
64
How do you use nvm?
nvm use 10.15.3
65
What should you do after you use nvm?
Use the create-react-app tool.
66
How do you use the create-react-app tool?
We call npx create-react-app my-app in the command line.
67
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.
68
What should you do after running create-react-app?
cd into it.
69
18.
C
70
How can you see what create-react-app has made for us?
After cding into the correct directory, we use the ls command.
71
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.
72
Where are our dependencies?
In node_modules.
73
How can you open this up in VSCode?
By typing code .
74
What is in the package.json file?
It's included for us react and react-dom as well as another library called react-scripts.
75
What does react-scripts do for us?
It's what allows us to not have to worry about WebPack and Babel.
76
What scripts does react-scripts include for us?
start, build, test and eject.
77
What do the react-scripts scripts do?
They call react-scripts to do there respective things.
78
What does the start react-scripts script do?
It starts the project.
79
How would you use the start script?
In the terminal, in the correct folder type yarn start.
80
What happens when you use the start script?
It serves up a sample application of React inside of localhost:3000.
81
Where does our application live?
In the src folder.
82
Where does all the React code we write live?
In the src folder.
83
What is the public folder?
Where all the older versions of JavaScript and HTML files that the browser can understand live.
84
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.
85
What does the test react-scripts script do?
Runs the test code that we write.
86
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.
87
How do we import React into our project?
import React from 'react';
88
What does this line of code do?
import React from 'react';
It holds everything related to React that we need into the file.
89
How would you import a logo in a create-react-app app?
import logo from './logo.svg';
90
How would you import the CSS in a create-react-app app?
import './App.css';
91
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.
92
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.
93
Where is the div with an id of 'root' located?
In the index.html file in the public folder.
94
What is the entry way of out application?
The div with an id of 'root'.
95
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.
96
19.
R
97
How do you open up the terminal in VSCode?
Terminal > New Terminal
98
What is the shortcut of opening a terminal in VSCode?
Something.
99
What should you do when you open a terminal inside of VSCode?
Make sure you're inside the project.
100
What happened if you run yarn start in the VSCode terminal and nothing happens?
You may not have yarn installed on your computer.
101
What do package managers do?
Automate the process of installing, upgrading, configuring or removing any libraries we want.
102
What happens when you successfully start your app in the VSCode terminal but noting happens?
Just manually go to localhost:3000 in the browser.
103
What will happens when you run npm build?
You get a build folder. It says it's creating an optimized production build.
104
What is a good thing about create-react-app?
It optimizes the code for you.
105
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.
106
What would we do with the build folder?
Put it on a server.
107
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))
108
What is webpack?
A modular bundler.
109
What does webpack do?
It allows us to write modular code.
110
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.
111
How many JavaScript files will webpack create?
Three. (Is this right?)
112
What are some of the JavaScript files in the build folder?
The main.....chunk.js JavaScript file
113
What type of tool is create-react-app?
A cli.
114
What is a cli?
A command line interface.
115
What will we use to deploy our application?
The build folder.
116
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.
117
Give an example of how you would
If you go to material-UI, you can install component library material-UI.
118
How can you install material-UI?
By running npm install @material-ui/core@next.
119
What happens when we install material-UI?
It gets added to out package.json file.
120
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?
121
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.
122
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.
123
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.
124
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.
125
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.
126
What does the react library import do?
Allows us to write HTML like syntax inside a JavaScript file.
127
What does the react-dom library import do?
Imports the react-dom. A robot that interacts with the DOM.
128
What is the React package?
It allows us to write JSX, build components and build the VirtualDOM.
129
What is the ReactDOM?
A little robot that interacts with the DOM.
130
What does ReactDOM.render allow us to do?
Grab an element from HTML and insert < App / > into it.
131
20.
D
132
What happens when you eject a create-react-app?
It gives you two folders called scripts and config.
133
What is in the config (and scripts?) folder?
Everything the create-react-app was hiding under the hood for us.
134
What are some of the things in the config folder?
```
A jest folder for tests.
The webpack configuration (our module bundler).
```
135
What are some of the things in the scripts folder?
All the scripts that were run e.g. the build script.
136
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.
137
What are you ensuring when you use create-react-app?
We're automatically getting the best system and project build out of the box.
138
What happens to create-react-app when there are updates or the industry changes?
create-react-app will update to reflect those updates/changes.
139
Why is ejecting not a good idea?
Because you lose all the benefits as create-react-app gets updates.
140
21.
C
141
How could you return JSX?
By writing a function or a class that returns it.
142
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.
143
Whats the first thing you do when writing a class?
import component from React.
144
Show how you would import component from React.
import React, { component } from 'react';
145
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 / >
);
}
}
```
146
What do we get access to when we use a class/the component?
The render() method.
147
What is this code block referred to?
```
function App () {
return (
< div className='App' >
< p > Hello World < p / >
< div / >
);
}
```
A functional app/(component?)
148
Why would you want to use a class instead of a class?
By using a class component we get access to state.
149
What is state?
It's a JavaScript object with properties that we can access at any point inside of our class.
150
How would we access state inside of a class?
You would call the constructor() keyword. Inside of the constructor you would call super().
151
What does super() do?
It calls the constructor method on the Component class.
152
What does calling the constructor method on the Component class from super() give you access to?
It gives us access to this.state
153
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
154
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 / >
);
}
}
```
155
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 / >
);
}
}
```
156
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 / >
);
}
}
```
157
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.
158
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.
159
How would you change the value in state?
By using a method called setState()
160
Where does setState() come from
The Component that's extended from the class App.
161
What does setState() do?
It lets us modify the state object.
162
Where would you get access to the (method?)/property onClick?
On every HTML element.
163
What does onClick take?
A function.
164
What happens to the function taken by onClick?
It gets called whenever the element gets clicked.
165
How would you create a button that when clicked changes the state object?
< button onClick={() => this.setState({ string: 'Qwerty' })} >
Change Text
< button / >
166
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.
167
22.
T
168
How did older version of create-react-app start the app?
With a class instead of a function.
169
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.
170
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.
171
What would happen if you hover over className in JSX?
A popup would appear telling you it's a JSX attribute.
172
Why do we use className instead of class in JSX
To distinguish between the two as class means something else in JavaScript.
173
What does class mean in JavaScript?
We're creating a class.
174
What does class mean in HTML?
We're giving something in HTML a class.
175
What type of function is used in onClick?
< button onClick={() => this.setState({ string: 'Qwerty' })} >
Change Text
< button / >
An anonymous function.
176
What is noteworthy about this code?
< button onClick={() => this.setState({ string: 'Qwerty' })} >
Change Text
< button / >
We don't actually modify this.setState/state directly.
177
Why don't we modify state directly?
It comes from the idea of a unidirectional data flow.
178
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.
179
Do components get re-rendered automatically if we modify state directly?
q
180
q
q
181
q
q
182
q
q
183
q
q
184
q
q
185
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.
186
Why does the render() method run again when setState gets called?
Because the state just got update (this is the declarative approach of React).
187
What happens when you hover over onClick?
A popup will show saying it's a JSX attribute and not HTML.
188
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.
189
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.
190
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.
191
23.
D
192
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 / >
);
}
}
```
193
Why would you use curly braces in the div with a className of App?
Because we have to render JavaScript.
194
What does .map do?
Returns us the return of whatever function we pass to it, iterated over every element in an array.
195
What does map take?
A function where the first argument is going to be the actual element that this function is going to get called on.
196
What is usually returned when you call map?
A new array, but React is smart enough to know if we're rendering off a bunch of HTML blocks in an array it will just display those elements.
197
What warning would you get if you open up the console?
```
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 / >
);
}
}
```
Each child in a list should have a unique "key" prop.
198
What is this error message asking?
Each child in a list should have a unique "key" prop.
Add a unique key to every child that gets returned out of the map.
199
How would you fix the code?
```
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 / >
);
}
}
```
Any random unique string will work.
```
class App extends component {
constructor() {
super();
this.state = {
monsters: [
{
name: 'monster 1',
id: 'monster1'
},
{
name: 'monster 2'
id: 'monster2'
},
{
name: 'monster 3'
id: 'monster3'
},
]
}
}
render() {
return (
< div className='App' >
{this.state.monsters.map(monster => (
< h1 key={monster.id} >{ monster.name }< h1 />
))}
< div / >
);
}
}
```
200
Why do we want a unique key?
Because React needs to know what element it needs to update if one of the elements in our array has a value that changes.
201
Why are unique keys import?
It helps React know which element is the one that's been updated. If someone does something that changes the state on the first object, React is smart enough to know that it only needs to update the first h1 tag. It doesn't have to re-render everything which can be performant heavy.
202
q
q
203
q
q
204
24.
O
205
What's a good rule of thumb when as to when to use the key attribute?
Anytime you use the map() function inside of render, or you have a list of the same jsx elements one after another, they need a key attribute
206
What will happen if you don't use the key attribute when you should?
CRA will warn you about it if.
207
25.
S
208
What is Component apart of?
The React library.
209
What are we using in this line of code?
import React, { Component } from 'react';
Destructuring.
210
How could you use Component if you didn't destructure it like this?
import React from 'react';
class App extends React.Component {}
211
What is Component?
A property on React.
212
What happens when we do something like:
class App extends React.Component {}
We're saying I want whatever functionality the React.Component (that was already build into the library by somebody) has and I want to add onto it.
213
What's an example of some functionality of React.Component?
The render() method comes built in with React.Component as well as some other things we can use. lifecycle methods are important methods that are on React.Component already.
214
What was the advantage of SPA's?
Because we have a tiny HTML page (with id of root) and a larger JavaScript file (with our React library, components, logic etc) that means we don't have to communicate back and forth with server because React will re-render the DOM with information in the JavaScript file.
215
Whats changed with SPA's?
Instead of requesting a page it's turned more into requesting for data.
216
Is our server the only one we communicate with?
No, you can communicate with other servers/API's that you don't control.
217
What are some examples of communicating with servers we don't control.
The Google Fire base store or some different API endpoints.
218
How would you communicate and receive data from third party API's/servers?
With JavaScript.
219
How could you get some JSON placeholder?
By visiting the website https://jasonplaceholder.typicode.com/users
220
Whats is https://jasonplaceholder.typicode.com/users doing?
Providing an API, a way for us to access information from their server.
221
How can you check https://jasonplaceholder.typicode.com/users
Open up the developer tools, click on the Network and refresh the page. You'll see you'll have a users document.
222
What happens when you click on users and response in the Network tab of the developer tools?
The response (in this case a JSON file).
223
What will you find when you start building larger projects?
You'll start talking to API's and trying to get different data for your application.
224
What can the endpoints/servers that we communicate to get data from be?
3rd party servers or your own server.
225
What's the takeaway with SPA's?
The way we build applications now is very dynamic.
226
Where do we typically get information from in a modern SPA?
Typically we don't hard code all of the information into our files. Instead, when a user opens something we are communicating with outside servers.
227
26.
F
228
What is the more realistic approach when setting state?
To not hard code the information but instead get it from a back end (server/database).
229
How do we get the app component to make a call to a server and then put that data into our state so our render function has access to it?
Before we got the render method by extending into Component. We also get a bunch of other methods that are called lifecycle methods. These are what we'll use.
230
What are lifecycle methods?
Methods that get called at different stages, automatically by React, of when this component gets rendered.
231
What does componentDidMount() do?
When this component mounts, it calls whatever block of code we write inside of it.
232
What is mounting?
When React puts our component on the page, it renders it onto the DOM for the first time.
233
Show a simple example of using componentDidMount()
componentDidMount() {
code
}
234
What do we want to do in the body of componentDidMount()
Use JavaScript's native fetch, to fetch/make an api request to the url
235
What does fetch return us?
A promise
236
What does the promise do?
Gives us a response of the actual body of the response.
237
Because you don't know what the body of the response looks like what's a good idea?
console.log it
238
Show how you would log the body of the response from https://jasonplaceholder.typicode.com/users.
```
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users').then(response =>
console.log(response)
);
}
```
239
What are some properties on the Response object?
body, header etc. but we don't really need them.
240
What's the main thing we want in regards to the Response object?
The body but we want to format it in a way that our JavaScript understands.
241
How would you format the response object in a way JavaScript can understand and log it to the console?
```
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users').then(response =>
console.log(response)
);
}
```
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => console.log(users))
}
242
What is .json()?
A method on the response object that will give us back that response in the JSON format.
243
How does this new JSON format get returned to us as?
A new promise that we'll now have as the body which will be the (users?) array.
244
How can we set the state to equal the users array?
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => console.log(users))
}
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState({ monsters: users }))
}
245
What do you want the initial state to be?
An empty array.
246
Why do you want the initial state to be an empty array?
Because we don't need to hard code it any more. We're going to wait for our component to mount, and then we're going to fetch all of our users and then we're going to update our states monsters property with the new array of users.
247
What's another good thing about create-react-app?
It comes with linting.
248
Why is it good that create-react-app comes with a linter?
We can be aware of writing and making our code clean.
249
Summarize this code.
componentDidMount() {
fetch('https://jasonplaceholder.typicode.com/users')
.then(response => response.json())
.then(users => this.setState({ monsters: users }))
}
We're using the componentDidMount() lifecycle method that we have access to because of our class component. We are then fetching from the url, then taking the response and converting it into the JSON format that our JavaScript can understand and use. Then we're taking the users that we got back from it and set our monsters to that array of users.
250
27.
O
251
28.
A
252
How can you think of calling components???
As custom created HTML like elements(h1, div etc).
253
How are components named?
Upper camel case.
254
How can you think of div in JSX?
As pre built components???
255
How many ways are there to create components?
2
256
What are the types of components you can build?
A class component and a functional component.
257
What do class and functional components have i common?
They return some sort of JSX.
258
What's a naming convention you could have when creating components?
You can name components in the components folder that contain JSX with a .jsx extension. This is being very explicit.
259
What happens when you name a file with a .jsx extension?
You'll get a React icon next to the name. You'll also see JavaScript React in the bottom right hand corner of VSCode.
260
What does the .jsx extension mean?
It's JavaScript, but with the JSX syntax.
261
What happens when you change a .jsx extension to a .js extension.
It'll still work.
262
What happens at the end of the day in a create-react-app app?
It takes everything through Webpack and babel and will convert any .jsx files into a JavaScript file.
263
What's another naming convention you could use?
With a period. e.g. card.component.jsx
264
What happens under the hood with CSS files?
create-react-app combines everything. If you go to the build folder and navigate to the css folder you'll see two files. A chunk css file with a .map and one massive css file.
265
What is the .map in the css folder in the build folder?
A source map.
266
What does the css source map help with?
Debugging code in production.
267
What will happen to all the different css files in the src folder when we release to production?
They'll be combined together.
268
29.
C
269
What is the goal in React?
To break up code into smaller reusable pieces that are only focused on one responsibility.
270
Why is this a good naming conversion (specifically the component part)?
card-list.component.jsx
You can see right away what file it is.
271
How can you import React?
import React from 'react';
272
How would you export CardList?
CardList = () => {
}
```
export const CardList = () => {
}
```
NOTE: This is a functional component.
273
What do components take in?
props.
274
What is props going to be?
The parameter we get from our functional component.
275
How would you add props to this code?
```
export const CardList = () => {
}
```
```
export const CardList = (props) => {
}
```
276
log props to the console:
```
export const CardList = (props) => {
}
```
```
export const CardList = (props) => {
console.log(props)
return (< div >< /div >)
}
```
277
How would you import CardList into the app file?
import { CardList } from './components/card-list/card-list.component';
278
How would you call CardList in App.js?
< CardList / >
279
What is the props parameter?
Any parameter that we pass into < CardList / >
280
Give < CardList / > an example prop.
< CardList name="John" / >
281
What will we log out if we console.log this code?
< CardList name="John" / >
An object that says {name: "John"}.
| NOTE: Any prop is going to be an object of any properties that you write onto a component where it gets used.
282
What do you generally want when passing props?
For the props we're passing in to match the parameters that we're going to use inside the component.
283
What is one of the main properties we have access to on props object?
children.
284
Will the children property always be present on the props object?
Yes, but if there isn't any children it'll be Null.
285
What are children on props object?
children are what you pass in between the brackets of our component that gets called.
286
How would you convert this component to have children?
< CardList name="John" / >
< CardList name="John" >
< h1 >Qwerty< / h1 >
< / CardList >
287
What will the children prop be in this code?
< CardList name="John" >
< h1 >Qwerty< / h1 >
< / CardList >
< h1 >Qwerty< / h1 >
288
How could you render children?
< CardList name="John" >
< h1 >Qwerty< / h1 >
< / CardList >
```
export const CardList = (props) => {
console.log(props)
return (< div >< /div >)
}
```
```
export const CardList = (props) => {
console.log(props)
return (< div >{props.children}< /div >)
}
```
289
Where else do you have access to props made in the App component?
On the App component itself.
290
How can you get access to the props you created in the render (method?) of the App component.
With the this keyword. It gets attached to our actual class as a property called props. i.e. if you wanted to access it you would use this.props
291
How would you import styles into card-list.component.jsx?
import './card-list.styles.css';
292
How would you apply styles to the div here?
```
export const CardList = (props) => {
return < div >{props.children}< /div >;
}
```
```
export const CardList = (props) => {
return < div className='card-list' >{props.children}< /div >;
}
```
293
Instead of passing Qwerty in as the children prop how would you .map though a list?
```
< div className="App" >
< CardList name="John" >
< h1 >Qwerty< / h1 >
< / CardList >
< / div >
```
< div className="App" >
< CardList name="John" >
{this.state.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< / CardList >
< / div >
294
What is happening with this code?
< div className="App" >
< CardList name="John" >
{this.state.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< / CardList >
< / div >
```
export const CardList = (props) => {
return < div className='card-list' >{props.children}< /div >;
}
```
The .map is going to generate a list of h1's and put it as the children in between the div returned from the CardList component.
295
What is a fundamental thing of React?
We're building components that only care about one thing. For example, the CardList component only cares about displaying cards inside of it in some form/configuration.
296
30.
C
297
Why is this not good form?
< div className="App" >
< CardList name="John" >
{this.state.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< / CardList >
< / div >
```
export const CardList = (props) => {
return < div className='card-list' >{props.children}< /div >;
}
```
Because our app component is the one responsible for mapping over the list of monsters and creating those elements. But we want to give that responsibility to the CardList component.
298
Why do we want to give the responsibility of mapping over the list of monsters and creating those elements to the CardList component?
Because the Card list component should be the one responsible for listing the cards.
299
How can you move the code responsible for listing the cards into the CardList component?
< div className="App" >
< CardList >
{this.state.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< / CardList >
< / div >
```
export const CardList = (props) => {
return < div className='card-list' >{props.children}< /div >;
}
```
By passing in the monsters as a prop from our app component and then move the .map into the card list.
300
Show how you would pass in the monsters as a prop from our app component and then move the .map into the card list.
< div className="App" >
< CardList >
{this.state.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< / CardList >
< / div >
```
export const CardList = (props) => {
return < div className='card-list' >{props.children}< /div >;
}
```
< div className="App" >
< CardList monsters={this.state.monsters} />
< / div >
```
export const CardList = (props) => (
< div className='card-list' >
{props.monster.map(monster => (
< h1 key={monster.id} > {monsters.name} < / h1 >
))}
< /div >;
)
```
301
Why is this code good form?
< div className="App" >
< CardList monsters={this.state.monsters} />
< / div >
```
export const CardList = (props) => (
< div className='card-list' >
{props.monsters.map(monster => (
< h1 key={monster.id} > {monster.name} < / h1 >
))}
< /div >;
)
```
Because our app doesn't have to worry about creating those monster cards. The CardList component is the one responsible for that.
302
What is something the card list component should not be responsible for?
Deciding how the component will look.
303
Show how you would set up Card in a basic form and edit the CardList component.
```
export const CardList = (props) => (
< div className='card-list' >
{props.monsters.map(monster => (
< h1 key={monster.id} > {monster.name} < / h1 >
))}
< /div >;
);
```
import React from 'react';
```
export const Card = (props) => (
< div >
< h1 > {props.monster.name} < / h1 >
< / div >
)
```
NOTE: This is a functional component.
import { Card } from '../card/card.component';
```
export const CardList = (props) => (
< div className='card-list' >
{props.monsters.map(monster => (
< Card key={monster.id} monster={monster} / >
))}
< /div >;
);
```
304
Why does the key still live on the CardList component?
Because we want React to be aware that if any of the monsters update we only want that one element to update that gets affected.
305
How would you add styling to the Card component?
```
export const Card = (props) => (
< div >
< h1 > {props.monster.name} < / h1 >
< / div >
)
```
import './card.styles.css';
```
export const Card = (props) => (
< div className="card-container" >
< h1 > {props.monster.name} < / h1 >
< / div >
)
```
306
Where can we get images?
From a website called https://robohash.org
307
How could you add an image from robohash to the Card component?
```
export const Card = (props) => (
< div className="card-container" >
< h1 > {props.monster.name} < / h1 >
< / div >
)
```
export const Card = (props) => (
< div className="card-container" >
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2`} / >
< h1 > {props.monster.name} < / h1 >
< / div >
)
308
What is the ?set=set2 of this code code?
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2`} / >
A url parameter.
309
How can you add a size parameter to the url paramater?
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2`} / >
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2&size=180x180`} / >
310
How could you add an email to this code?
export const Card = (props) => (
< div className="card-container" >
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2`} / >
< h2 > {props.monster.name} < / h2 >
< / div >
)
export const Card = (props) => (
< div className="card-container" >
< img alt ="monster" src ={`https://robohash.org /${props.monster.id}?set=set2`} / >
< h2 > {props.monster.name} < / h2 >
< p > {props.monster.email} < / p >
< / div >
)
311
31.
E
312
Why do you break code up into multiple components and not have one big file?
With component architecture components can be placed and used in multiple locations. They are also more flexible.
313
Show how components are more flexible.
The CardList component that renders Card components can be passed different properties. e.g. instead of monsters, it can be passed aliens. Therefore, the CardList component can be used on a different project or a different part of the app because it doesn't care what it prints out.
314
What do most good React projects do?
Break things down to small component file that the name tells you what it does.
315
What happens the bigger a file gets?
The more JSX we have, the more logic we have, the harder it gets to be used in another place.
316
What's another benefit of breaking an app down into smaller components?
We have the flexibility of performance improvement potentially as well as having components that are really easy to test.
317
Why are components easier to test if they're small?
Because they're so simple.
318
What's the key thing to remember about why we break things down into smaller components?
We combine each component with it's concern. That concern is that this CardList is only concerned about CardList. Card is only concerned about cards.
319
32.
S
320
What is the current structure of the site?
The parent App component currently surrounds everything. This is where the state lives which gets passed down to the CardList component as an attribute (similar to an HTML attribute). CardList then receives it as a prop.
321
What does the state get turned into when we pass it down as an attribute?
props into all the little components below in in the heiracy (if they are passed in as an attribute.)
322
What does the state get turned into when we pass it down as an attribute?
props into all the little components below in in the heiracy (if they are passed in as an attribute.)
323
Where can you view the (component?) state and props in a React app?
In the React developer tools.
324
Where can you view the key in a React app?
In the React developer tools.
325
What is the key used for in React?
To distinguish when multiple components of the same kind are rendered one after the other.
326
What does React use if one of the Card components change?
React uses the key attribute to say 'key three changed, do a quick render'. React makes sure that when React updates the DOM it's going to be efficient and only update that one element, instead of all of them.
327
What is the React developer tools useful for?
To see how information is being passed down.
328
Where can you put state?
Wherever we want.
329
What happens when the state changes, for example, lets say the monsters goes from 10 users to 20?
A state change that happens with setstate, from here we announce to whoever cares that the monster array has changed. Whichever component has those monsters passed down to is going to say 'I received new props', so I have to re-render. This component says hey I have new props information who needs it'. Whoever needs it gets passed down that prop information.
330
How can you think of this?
As a function call to render (each component at the end of the day is a function that renders). If state changes it notifies the component underneath and say hey run the render function again, and so on.
331
What happens when we talk about where state lives and how we pass down props what can be see?
That there are performance implications.
332
Why are there performance implications when we talk about where state lives and how we pass down props what can be see?
Because every time state changes we're going to have to rerun functions, because the properties or the inputs of these functions change.
333
What have we done up to this point?
Have an API call to get the users when we initially load the page with our JavaScript, CSS and HTML file. create-react-app just simulates when we run it a fact server that sends these files. We get the users then gets each image of our monsters from another API, the robohash.
334
What should we remember about the robohash that we're using?
It's an API which is the same as the users data.
335
33.
S
336
What do we first need when building out the search functionality?
The HTML element that will represent the text input.
337
What element will we use for our search box?
An < input / > HTML element.
338
What are the < input / > HTML elements?
Basic text inputs.
339
What happens when we put type on an < input / > HTML element?
We can give it a different string and that string will help us get some features in the input that we might want for different types of inputs
NOTE: This is a HTML property that all inputs have.
340
What's an example of a type of feature we might ant in an < input / >
If we use password, what ever we type will become hidden.
341
What string are we going to give < input / >
search
342
Show how you would put a type property search on the HTML < input / > element.
< input type="search" / >
343
What does the type property search give us on < input / >
The ability to put on placeholder.
344
What does placeholder do?
It essentially puts a string there when we haven't typed anything into the search field.
345
Show how you would put placeholder on < input type="search" / >
< input type="search" placeholder="Text" / >
346
What do we need to do whenever the user types something into the input?
Hijack or take control of it.
347
Why do we need to Hijack or take control of input whenever the user types something into it?
Because we want to store that string.
348
Where do we want to store that string we get from the user typing something into the search input?
On our state.
349
Why do we want to store the string we get from the user typing something into the search input on the state?
Because we're able to use it in order to filter out our monsters.
350
How can we store the string we get from the user typing something into the search input on the state?
We first need to add a field to our state that represents what that stored value will be.
351
Show how you would add a field to our state that represents what that stored value will be when when the user types something into an input field.
this.state = {
monsters: [],
searchField: ''
}
352
What method would come in handy after we add a field to our state that represents what that stored value will be when when the user types something into an input field.
We have access to a method on our input called onChange().
353
What should we do after we add a field to our state that represents what that stored value will be when when the user types something into an input field.
setup onChange()
354
What does onChange do?
It fire with this synthetic event which is essentially just an event in our browser, whenever the input is changed. So, whenever the user types or removes anything.
355
What do we pass to onChange()?
A function
356
Show how you would set up onChange() in this code in a basic way.
< input type="search" placeholder="Text" / >
< input type="search" placeholder="Text" onChange={e => console.log(e)} / >
357
What does e represent in this code?
The synthetic event.
358
What would log to the console in this code?
< input type="search" placeholder="Text" onChange={e => console.log(e)} / >
In the console in the browser you'll notice whenever you type anything or remove anything in the input we'll see the onChange() fire.
359
What will we see on the synthetic event?
It's a huge object.
360
Why is there a huge object on the synthetic event?
Because it's a native event that the browser uses to do all kinds of different things. It gives us a lot of control.
361
What is the main thing we want to look at on the object of the synthetic event?
The 'target' value.
362
What does the 'get' and 'set' next to the 'target' value mean?
That we can either get the value of 'target' or set it.
| NOTE: In this case we only want to get the value.
363
What will the 'target' value give us back?
The HTML element.
364
How can we log the HTML element of 'target'.
< input type="search" placeholder="Text" onChange={e => console.log(e.target)} / >
365
What is meant by 'target' giving us the HTML element?
It's the HTML element that fired the event?
5:00
366
What will be logged to the console?
< input type="search" placeholder="Text" onChange={e => console.log(e.target)} / >
< input type="search" placeholder="Text" / >
367
What happens if you hover over < input type="search" placeholder="Text" / > in the console?
It will show where that element is.
368
What do we want off of this
< input type="search" placeholder="Text" / >
NOTE: This appears in the console.
The value.
369
How would you get the value off of this:
< input type="search" placeholder="Text" / >
NOTE: This appears in the console.
< input type="search" placeholder="Text" onChange={e => console.log(e.target.value)} / >
370
What is value in this code?
< input type="search" placeholder="Text" onChange={e => console.log(e.target.value)} / >
A property on the input that will give us the string value that it holds.
NOTE: As you type you can see it update.
371
How are we going to store the value the user types in the search input on the state?
By using the value on e.target.value.
372
How can we store the value of e.target.value?
By calling setState in onChange()
373
Show how you can store the value in e.target.value in the store from this code.
< input type="search" placeholder="Text" onChange={e => console.log(e.target.value)} / >
< input type="search" placeholder="Text" onChange={e => this.setState({ searchField: e.target.value })} / >
374
What would happen if you wrote this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
You would expect to see the state update in the console. However, even though the event is firing the searchField key is always one letter behind meaning the first letter we type, searchField isn't updated.
375
Why is the searchKey always updating one letter behind what the user types in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
Because setState is an asynchronous function call.
376
What is a synchronous action?
Something we can expect to happen almost immediately. It's something that pretty much happens in JavaScript knows the amount of time it'll take so JavaScript will wait for that thing to finish before it continues running the rest of the code afterwords
377
What is an asynchronous action/event?
Something that actually takes an indefinite amount of time that JavaScript doesn't know. So what it does is run the rest of the code after and when the asynchronous event finishes it then runs that finished event.
378
Whats something to remember in this code?
this. setState({ searchField: e.target.value })
console. log(this.state)
That this.setState is actually not happening immediately when we would expect it to. The state will be updated with the value that we set but it's not going to happen in the immediate sense we would expect it to
379
How could you log the state?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
By using a solution React has given us which is the second argument that we pass to setState. It's a callback
which runs after setState is finished. So after setState has updated our state it will run the function that we pass. Here, we can log to the console.
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value }, () => console.log(this.state))
}}
/ >
380
What is the thing to remember with setState?
If we wanted to see or do something with our state right after we set it then we have to do it inside this second argument function that will get called right after setState.
381
34.
R
382
Is this HTML?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
NO, it's JSX.
383
What happens when the DOM changes or Reacts to a user input e.g. searching for a monster,
It's going to say hey, there's an event, somebody has just typed something into the input
384
What does React do when someone has typed something into an input????? Change the question
NOTE: We don't manually update the DOM. If that were the case we would be using the onchange event natively in our HTML.
385
What are HTML events?
Just something the DOM gives us in order to interact with user events
386
What does React have (a type of event?)?
Synthetic events.
387
What are synthetic events?
When a DOM event happens because for example a user clicks or types something in an input the DOM onchange event is going to say hey something changed. React intercepts that and says oh something has changed let me tell my React app that something has happened. This is what a synthetic event is.
388
What is a synthetic event?
It's like a fake event that we pretend is a DOM event but it's something that our React robot is telling us saying hey there was an event on the DOM what should we do.
389
Where is the synthetic event in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
the onChange
Notice that it's camel case meaning it's not HTML but a synthetic event.
390
What is onChange in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
A synthetic event.
391
What is onChange used for in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
To detect whenever that DOM event happens.
392
What happens with onChange in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
We receive that event because something has happened and then we update the state.
393
What is something to remember about state?
It's something that usually changes in our app due to a user action.
394
What specifically happens in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
The searchField is going to change.
395
Why is the searchField going to change in this code?
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
Because somebody has typed into the text box.
396
Why don't we run the onChange function in this code? Here, all we're doing is defining the function and not running it.
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}}
/ >
We could extract the entire piece of code put it above the render (method?) (which will be done in a later video) because we're not running it here. We're just saying this is an anonymous function that gets triggered onChange. This is an important distinction because you would never run setState in render because it's going to create some errors. (try calling setState in render). Because every time you call setState it re-renders ans every time you re-render it's going to call setState which creates a loop. What we're doing here is defining a function, not running it just letting them know hey onChange I want this to happen and React internally with this synthetic event is going to say hey anytime onChange happens it's going to be an event, just run this function (e => {
this.setState({ searchField: e.target.value })
console.log(this.state)
}} ) (I think that's the function).
The last part is the console.log which doesn't get logged right away. That's because once again React is smart. We're not interacting with the DOM. What it's going to say is when we do setState it's going to say hey React bot we have some updates that we want to make to the DOM can you do it for us. And our little robot is going to say yes, but I know the best time to do that so let me handle it. Therefore, it doesn't happen right away. What it does is it scheduales and batches work so if there are maybe multiple updates that need to be done then it can optamise that for us. That's why React is good because it figures out for us the best time ans way to update the DOM we just tell it we want an update. It's declarative. But we leave that internal working to the React bot that's improving with new updates.
397
q
q
398
q
q
399
q
q
400
q
q
401
q
q
402
q
q
403
q
q
404
q
q
405
q
q
406
q
q
407
q
q
408
q
q
409
q
q
410
q
q
411
q
q
412
q
q
413
q
q
414
q
q
415
q
q
416
q
q
417
35.
F
418
How can we filter the monsters where the names that don't match the field?
Now how we'll do this is in the render.
419
Why don't we want to actually modify our state's monster array?
Because we want to keep the raw data in case
somewhere in this component.
We need to use the base unmodified array
420
What should we do instead of actually modifying our state's monster array?
Make a new array using the .filter method.
421
What concept should we use to make a new array using the DOT filter method?
Destructuring
422
What is destructuring?
It allows us to do is pull properties off of an object and set them to constants that we put inside of it's curly braces.
423
What is the syntax for destructuring?
(const) (bracket notation(use the same property name that we want to set as the constant)) (=) (the actual object we want to destructure from)
We say const and then we put our bracket notation and here we'll use the actual object we want a destructure from, (the state object is what we want to pull the properties off of). And what we want to do is use the same property name that we want to set as the constant.
So when we say monsters and search fields, we'll be pulling off the search field value and the monster's value off of our state object and setting them to constants called Monsters and searchField.
424
Show how you would use destructuring in this code:
this.state = {
monsters = [],
searchField = ''
}
render() {
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={this.state.monsters} />
< / div >
);
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={this.state.monsters} />
< / div >
);
}
425
What is this the equivalent of doing
const { monsters, searchFiled } = this.state;
```
const monsters = this.state.monsters;
const searchField = this.state.searchField;
```
426
Why do we want to destructure instead of doing this?
```
const monsters = this.state.monsters;
const searchField = this.state.searchField;
```
It's just an easier way and a quicker way for us to write this out.
427
Now that we have our monsters and search field what will we do next?
Set a new const called filtered monsters that we will set as our monsters .filter (remember from our filter method we get back a new array based off of the function that we pass into it where we'll get the monster that it's currently iterating over)
and what we want to do is take the name call .toLowerCase on it and then we'll call .includes. On this we'll use our search field and we also want to lowercase it
428
What is toLowerCase
A method on all strings that converts all the alphabetic characters in a string to lowercase
429
Why do we want to call toLowerCAse in this code?
Because we don't want our search to be case sensitive.
430
What is .includes?
And what this includes method does is similar to our array method. It just checks whether or not the string value we pass inside of our includes is actually in the string that it's being called on.
431
What will be returned from includes?
includes just like the array method includes will return true or false based off of whether or not (monsters.name.toLowerCase()) includes the string we're passing to it.
432
Set up the filteredMonsters constant
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={this.state.monsters} />
< / div >
);
}
render() {
const { monsters, searchFiled } = this.state;
const filteredMonsters = monsters.fliter(monster =>
monster.name.toLowerCase().includes(searchField.toLowerCase())
);
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={this.state.monsters} />
< / div >
);
}
433
What should we do to the CardList component?
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={this.state.monsters} />
< / div >
);
}
Instead of passing in our state of monsters we'll just pass in our new filteredMonsters.
434
Pass in filteredMonsters to the CardList component.
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
435
And now we see that as we type we're filtering out the monsters that don't have what we've typed in inside of their name now we'll notice that our component is actually re rendering every time. Why is this?
Because when ever set state is called and the properties change react re-renders our component (it recalls the render method).
436
What happens to our code when React re-renders our component?
Our filtered monsters method is actually getting called again.
437
Why is it good that our filtered monsters method is actually getting called again every time React re-renders our component?
Because what we've done is we've triggered this setState when ever they've typed something in which in turn sets the state value of search field which then in turn causes our component to re render and recall the render method which then re filters out the monsters by calling our monsters .filter again setting a new array which it'll then pass to our card list which then renders card lists.
And this way we're able to just dynamically live update our card list based on what we're typing in and this is what's great about react is that react is able to take control of what to render what to re render in its views without us having to do all of the extensive calls of showing elements and hiding elements react is able to do so for us as long as we understand the rules.
438
q
q
439
q
q
440
q
q
441
q
q
442
36.
O
443
37.
S
444
What might we want to do with the search component/ input?
To reuse it multiple times
445
What can we notice about the input
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
All it is is just an input that doesn't need any local state even though it seems like we're calling set state in our input.
446
What is the input really?
It's really just a function that we're passing from the context of our app component into the onChange handler of our input.
447
What does the fact that the input is really just a function that we're passing from the context of our app component into the onChange handler of our input?
We can probably move this into its own component, so we can have a reusable search component.
448
How will we make a reusable search component from the input?
Make a new component called search-box and we'll create the usual file search-box.comonent.jsx
449
Why do some our files have .jsx and some have .js?
Mentioned earlier, create-react-out hides away some of the configuration for webPack and babel. What babel does is it helps transpile down any of the modern JavaScript including JSX style files that we write into older versions of JavaScript in the public folder, when we finally run our build script inside of our scripts file. Now in this transform if we look at our .js file for App.js we actually says see that it says JavaScript babel down at the bottom. So even though we're writing JSX code here, because we're rendering HTML in our JavaScript, babel knows that it should probably run this regardless, through a JSX transform even though it's not a .jsx file type.
But right now just know that whether or not you write .js or .jsx, in the context of create-react-app you can write jsx in both file types.
450
q
But we want to write .jsx in ours because we want to be explicit.
We want to know that if we're gonna write JSX, while this file type is JSX, we're also going to create our search-box.styles.css
451
What do you do when you write your CSS?
You want to import it into our search-box.component.jsx file.
452
How would you import the CSS into the search-box.component.jsx file?
First import react from react.
And then import in our style sheet.
import './search-box.styles.css';
453
What is a difference between functional and class based components?
Functional components unlike class components such as our app.js component, they don't have access to state
454
Why don't functional components not have access to state?
Because they don't have access to constructor.
455
What is the constructor?
A class method on our component that we import from react that we extend our class from.
456
What's something else functional components don't have access to?
lifecycle methods.
457
Is it bad that functional components don't have access to state or lifecycle methods?
No, because we don't always need to use lifecycle methods or internal state. Sometimes all we want to do is render some HTML and that's what a functional component really is.
458
How could you define a functional component?
Unlike a class component a functional component is just a component that gets some props and returns some HTML.
459
What's the main thing (for now) to remember about functional components
If you don't think you need internal state nor access to lifecycle methods then just use a functional component
460
Why should you use a functional components and not a class component if you don't need access to state or lifecycle methods?
Because it's easier to read, it's actually easier to test and it's in some ways smaller and easier to reason about.
461
How should we start writing the SearchBox functional component?
const SearchBox = () => {
}
462
What show we do with the SearchBox component from here?
const SearchBox = () => {
}
Copy over the input that we want inside the SearchBox component.
463
Show how you would copy over the input you want and put it in SearchBox
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
const SearchBox = () => {
}
```
const SearchBox = () => {
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
464
What should you apply to this code?
```
const SearchBox = () => {
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
A class name of search to it
465
Why would you apply a class name of search to this code?
```
const SearchBox = () => {
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
Because that's where our search-box.styles.css are applying those styles to. We'll keep this type because we know that it's going to be search.
466
Apply a className to this code.
```
const SearchBox = () => {
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
```
const SearchBox = () => {
< input
className="search"
type="search"
placeholder="Text"
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
467
What would you probably want to do with the placeholder value in this code?
```
const SearchBox = () => {
< input
className="search"
type="search"
placeholder="Text"
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
Set it dynamically.
468
Why might you want to set the placeholder value in this code dynamically?
```
const SearchBox = () => {
< input
className="search"
type="search"
placeholder="Text"
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
Maybe another place that wants to use searchBox doesn't want the place holder to say search monsters. e.g. if they want to search people or anything else.
469
What do we want placeholder to be?
A prop that gets passed in.
470
How could we .....props redo question
We can destructure that prop off of the props object
471
How can we destructure that prop off of the props object?
Because all the props come in as one big object.
472
Destructure the props off the props object and then pass it into the placeholder.
```
const SearchBox = () => {
< input
className="search"
type="search"
placeholder="text"
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
```
const SearchBox = ({ placeholder }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
473
What can onChange be in this code?
```
const SearchBox = ({ placeholder }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
Another prop that gets passed in
474
Make onChange a prop that gets passed in. This needs to be a function lled handleChange. Destructure handleChange aswell.
```
const SearchBox = ({ placeholder }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
}
```
```
const SearchBox = ({ placeholder, handleChange }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={handleChange}
/ >
}
```
Redo this part???????
5:34
475
q
q
476
q
q
477
How would you export this code?
```
const SearchBox = ({ placeholder, handleChange }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={handleChange}
/ >
}
```
```
export const SearchBox = ({ placeholder, handleChange }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={handleChange}
/ >
}
```
478
How would you import SearchBox?
import { SearchBox } from './components/search-box/search-box.component';
479
How would you replace input with the SearchBox component?
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< input type="search" placeholder="Text" onChange={e => {
this.setState({ searchField: e.target.value })
}}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
```
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={e => this.setState({ searchField: e.target.value })}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
```
480
What's great about react?
The component driven style of writing code,
481
What is our SearchBox
A presentational component
482
What does our SearchBox component do?
Pretty much styles an input and then it takes any functionality that it might need in its handleChange property.
483
Why is it great to we have a reusable SearchBox component?
We can minimize the amount of repeat code that we have. We don't have to write an input and then style it inside of a local file because we can separate it into its own component.
