3b Flashcards
38.
E
What was our third point on becoming a good React developer?
What changes when state changes.
What does a good React developer do?
Decides what changes when state changes.
Why don’t we add state to SearchBox?
const SearchBox = ({ placeholder, handleChange }) => {
< input
className="search"
type="search"
placeholder={placeholder}
onChange={handleChange}
/ >
}
It looks like what we’re doing is adding the onChange, giving it a function and this function goes up a level and letting our App.js know that there was an event. But SearchBox, shouldn’t that have these search field state?
Why wouldn’t we put state here?
Why don’t we change the state in SearchBox and instead we trigger whenever an event happens to handleChange up in App.js?
because our other component CardList needs to have that information.
How did we set up filteredMonsters?
By using the search field state to filter based on the user input
Show how you can think about the way the app is set up?
App.js
/ \
CardList SearchBox
It the app was set up like this, why would it be bad was only on SearchBox?
App.js
/ \ CardList SearchBox
There’s no way for the CardList component to find out about it.
Why couldn’t the CardList component find out about state if state was set up in SearchBox and the app was set up like this?
App.js
/ \ CardList SearchBox
Because of one way data flow data can only flow one way. So there’s no way for the search field state to move up and down to the CardList component.
Where do we want to put state?
App.js
/ \ CardList SearchBox
In a place where it gives us access to whatever needs it. In this case in App.js.
What is it called when you place state in a component that gives it access to whatever needs it
Lifting state up.
How do we architect things in React?
COPY FIRST
When an event happens on a component, let’s say a user clicks or types something (in SearchBox for example), well that event triggers the React event system and says, hey something has happened, create an event handler like handle input or handle change and it’s going to go up and let the component that has that state know that hey something has happened you need to update state, and how far up that goes, let’s say we had a component underneath SearchBox, we notify the component that has the state as far up as we need to in order to pass down that information to the components that need that information.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
COPY FIRST
But I want you to pay attention that you want to decide as a React developer what changes what events that the users take, how far up it goes to let the state know and you want to move the state in a high enough position so that we are still able to pass down that information to different nodes.
q
q
q
q
q
q
q
q
q
q
If we had let’s say a state in number 3
3
/ \
4 5
that the only people that care about it is nodes 4 and 5, where would you put state?
There’s no point bringing up the state all the way up to the top node. You want to place the state at node 3 because all these components don’t really care about any of this.
39.
C
What is a fundamental thing in not only JavaScript but also in React.
Writing our own methods on our class components.
What are we doing at the moment?
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 >
);
}
We pass in an anonymous function (e) into our SearchBox’s handleChange
Why do we pass in an anonymous function (e) into our SearchBox’s handleChange?
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 >
);
}
In order to set our state.
What is this representing in this code?
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 >
);
}
Well this is a special keyword in JavaScript that references the context in which it’s being invoked.
What does this mean?
Well this is a special keyword in JavaScript that references the context in which it’s being invoked.
Well when I say this.state we know that I’m trying to reference the state on our component, our class component.
The only reason that JavaScript is able to say oh when we’re calling this.state I want the state object on our component is because the this keyword is set to the context of our class component.
Now the weird thing is that in JavaScript when we write our own class methods we’ll see that the this keyword actually gets bound differently depending on how we write the class method.
Now we’ve already seen class methods in our app component when we look at say the componentDidMount which is a lifecycle method as well as the render.
Inside of these methods they take this format where it’s the function name (e.g. render) the brackets (e.g. ()) and then the squiggly brackets (e.g. {}) but the this keyword is bound.
The reason that this is actually happening where the this context is getting bound inside of these methods is because when we call super we’re actually extending the functionality that exists on Component (class App extends Component) (which we get from React) that has these lifecycle methods and render. Because we didn’t write them, were borrowing them from Component.
When we borrow them from Component, Component actually sets the context of ‘this’ inside of them for us to our class component. If we were to write our own method for example to represent this method (e => this.setState({ searchField: e.target.value })) that we’re passing in we would have to be careful about how we write it.
Now let me show you now the reason in the first place we even want to rewrite this method (e => this.setState({ searchField: e.target.value })) in its own class method is because there’s a chance that we might want to use it more than one place and we don’t want to write code more than once. We just want to put it in one place pass it in and then change it in one place if we have to, and not have to change it in multiple places.
Now how we would do this is we would write this handleChange method here (above render()). Taking the same format that we see and it would take some event. Which is the synthetic event we’re getting back from our input as you remember (this.setState({ searchField: e.target.value })) and then we call this.setState in it.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
And now we’re able to actually pass handleChange into our handleChange property on our SearchBox.
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
Now we can write it like this because we’re passing the whole callback through to it. e is being referenced in the function definition.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
So we even though earlier we were explicitly writing it out like this.
handleChange={e => this.handleChange}
This is the same equivalent thing as
handleChange={this.handleChange}
because this.handleChange is referencing this full function with the e signature.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
But if we were to save this we’ll actually see that our original conversation which is about ‘this’ context is undefined. If we start typing.
We’ll see that we get an error. It says that cannot read properties setState of undefined and it seems that ‘this’ is undefined.
When we write this.state what are we trying to do?
Trying to reference the state on our component, our class component.
Why is JavaScript able to say oh when we’re calling this.state I want the state object on our component?
Because the ‘this’ keyword is set to the context of our class component.
What is the weird thing in JavaScript when we write our own class methods?
We’ll see that the ‘this’ keyword actually gets bound differently depending on how we write the class method.
Where have wee seen class methods in our App component?
componentDidMount which is a lifecycle method as well as the render.
Inside of render and componentDidMount methods what format do they take?
The function name (e.g. render) the brackets (e.g. ()) and then the squiggly brackets (e.g. {}) but the this keyword is bound.
What is the reason where the ‘this’ context is getting bound inside of the render and componentDidMount methods?
Because when we call super we’re actually extending the functionality that exists on Component (class App extends Component) (which we get from React) that has these lifecycle methods and render. Because we didn’t write them, were borrowing them from Component.
What happens when we borrow render and componentDidMount from Component?
Component actually sets the context of ‘this’ inside of them for us to our class component. If we were to write our own method for example to represent this method (e => this.setState({ searchField: e.target.value })) that we’re passing in we would have to be careful about how we write it.
Why would we want to rewrite this method
(e => this.setState({ searchField: e.target.value }))
in its own class method?
Because there’s a chance that we might want to use it more than one place and we don’t want to write code more than once. We just want to put it in one place pass it in and then change it in one place if we have to, and not have to change it in multiple places.
How would we rewtie this method
(e => this.setState({ searchField: e.target.value }))
in its own class method so we can reuse it?
Write a handleChange method (above render()). Taking the same format that we see and it would take some event, which is the synthetic event we’re getting back from our input as you remember (this.setState({ searchField: e.target.value })) and then we call this.setState in it.
Show how would we rewtie this method
(e => this.setState({ searchField: e.target.value }))
in its own class method so we can reuse it?
handleChange(e) {
this.setState({ searchField: e.target.value })
}
Pass handleChange into our handleChange property on our SearchBox.
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 >
);
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}Why do we write it like this?
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
COPY FIRST
We’re passing the whole callback through to it. e is being referenced in the function definition.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
So we even though earlier we were explicitly writing it out like this.
handleChange={e => this.handleChange}
This is the same equivalent thing as
handleChange={this.handleChange}
because this.handleChange is referencing this full function with the e signature.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
q
q
q
q
q
q
q
q
But if we were to save this code what would we see?
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
‘this’ context is undefined. If we start typing.
We’ll see that we get an error. It says that cannot read properties setState of undefined and it seems that ‘this’ is undefined.
Why when we run this code do we see an error?
handleChange(e) {
this.setState({ searchField: e.target.value })
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
Well this is actually has to do with the way the functions behave in JavaScript. when we put handleChange
handleChange(e) {
this.setState({ searchField: e.target.value })
}
on our App all it knows is that if we say this.handleChange inside the context of our app, it points to this function
handleChange(e) {
this.setState({ searchField: e.target.value })
}
but it doesn’t actually set the context of ‘this’.
Why isn’t the context of ‘this’ set in this code?
handleChange(e) {
this.setState({ searchField: e.target.value })
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
JavaScript, by default, doesn’t set its scope of ‘this’ on functions.
How do you make JavaScript set the scope of ‘this’ in this code?
handleChange(e) {
this.setState({ searchField: e.target.value })
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
You have to actually explicitly state what context you want ‘this’ to be. For us, we want ‘this’ to be our App component and the method in which we can do it is to define it in our constructor.
Show how you would explicitly state what context you want ‘this’ to be in this code.
handleChange(e) {
this.setState({ searchField: e.target.value })
}
render() {
const { monsters, searchFiled } = this.state;
return (
< div className="app">
< SearchBox
placeholder="Text",
handleChange={this.handleChange}
/ >
< CardList monsters={filteredMonsters} />
< / div >
);
}
constructor() {
super();
this.setState = {
monsters: [],
searchField: ''
}; }
You have to actually explicitly state what context you want ‘this’ to be. For us, we want ‘this’ to be our App component and the method in which we can do it is to define it in our constructor. Turn this into a question
Because our constructor is the code that runs first, before anything gets called.
What do we want to do with the ‘this’ keyword in any methods we write?
Make sure that the context of ‘this’ is correct in all of our methods before any code gets written.
How could we…… finish this question
this.handleChange = this.handle Change.bind(this);
What is .bind?
A method on any function that returns a new function where the context of ‘this’ is set to whatever we passed to it. The context of ‘this’ that we’re setting in handleChange
handleChange(e) {
this.setState({ searchField: e.target.value })
}
is the ‘this’ keyword that is defined inside of our constructor
this.handleChange = this.handle Change.bind(this);
which knows that it’s our Component.
What is the problem with writing this?
this.handleChange = this.handle Change.bind(this);
It’s a very verbose way of writing code.
Why is this a verbose way of writing code?
this.handleChange = this.handle Change.bind(this);
Because that means that for every new class method that we write
handleChange(e) {
this.setState({ searchField: e.target.value })
}
we have to bind it.
What can we do instead of writing
this.handleChange = this.handle Change.bind(this);
every time we write a new class method?
We can actually leverage ES6 arrow functions and a unique characteristic about them that allows them to set the context of ‘this’ in whatever it was that declared it in the first place.
handleChange = (e) => {
this.setState({ searchField: e.target.value })
}
How can you use ES6 to set the context of ‘this’ in whatever it was that declared it in the first place.
Arrow functions automatically allow you to set ‘this’ when
(e) => {
this.setState({ searchField: e.target.value })
}
is defined.
So when our Component is getting run by JavaScript for the first time and it’s like oh I got to instantiate this new App class what does it do?
COPY FIRST
It checks inside and it sees that there’s this handleChange method
handleChange = (e) => {
this.setState({ searchField: e.target.value })
}
that points to an arrow function.
So then it defines the arrow function based on what code we’ve given it.
And the moment it sees the ‘this’ keyword
handleChange = (e) => {
this.setState({ searchField: e.target.value })
}
it’s like oh this is an arrow function. I’m going to automatically bind ‘this’ to the place where this arrow function was defined in the first place and the context of this arrow function is our App component.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
What’s something to note about arrow function.
You actually cannot call .bind on them, they automatically get what’s called lexical scoping.
What is lexical scoping?
It just means that they bind the ‘this’ context
handleChange = (e) => {
this.setState({ searchField: e.target.value })
}
to the place where they were defined in the first place.
Why is lexical scoping handy for us?
We can actually see this now that it will continue to work as it did before, even though we’re not calling the bind in the constructor anymore so this is really handy for us because it saves us that extra step.
How could you prove lexical scoping another way?
COPY FIRST
Inside of our browser the tightest/highest level context is our window object.
If I were to define a function called newFunc
const newFunc = () => console.log(this);
and what we’re logging is console.log(this).
When we invoke newFunc we’ll see that ‘this’ is that window object. When JavaScript saw us define newFunc to this function and brought it into existence within our JavaScript context so we could start using it, it had to lexically scope ‘this’
const newFunc = () => console.log(this);
to the window object because the window object was the context in which our arrow function was given its existence.
What is this similar to?
const newFunc = () => console.log(this);
finish question.
COPY FIRST
This is the same case with our handleChange method
handleChange = (e) => {
this.setState({ searchField: e.target.value })
}
When handleChange was declared, which means that when JavaScript first created our App component it also defined all of the methods (render, componentDidMoun, handleChange) on our components including handleChange, and it saw that handleChange was an arrow function and because of this, when this arrow function came into existence to JavaScript, it was going to bind any references to ‘this’ inside of it, to the context in which it was defined, which is our App component just like we saw with our myFunc in the browser, that’s what happened with our handleChange. This is great because if we want to write class methods we just write them with this arrow syntax and now the context of ‘this’ is what we expected to be without us having to write all of that extensive binding code, if we were to write it the other way so with this in mind it makes it easier for us to write our class components and their methods.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
40.
E
41.
Q
What’s a good rule of thumb regarding ‘this’?
Use arrow functions on any class methods you define and aren’t part of React (i.e. render(), componentDidMount()).
42.
O
43.
O
How many ways are there to connect to a Git repository?
Two.
What ways are there to connect to a Git repository?
Through HTTPS or SSH.
How can you switch between the two options HTTPS and SSH
By clicking the switch https/ssh button after clicking clone.
What is something to note about HTTPS?
Doesn’t require setup.
What is the recommended way to clone according Github official documentation?
Via HTTPS.
What is SSH?
A unique fingerprint you generate for your computer in your terminal, which you then let your github account know about so it knows that requests from this computer using SSH (cloning/ pushing/ pulling) are safe to do.
44.
D
How would you add the title?
Add it as an H1 here at the top of our App.js.
How would we get the font?
COPY FIRST
Now this font we can get from Google fonts.
fonts.Google.com
and we can see all these different fonts that Google allows us to use in our project.
So I’m just gonna find the one we want called Bigelow Rules.
Hit this a little plus and Google gives us a link that we can add to our index.html inside of our head.
We just added at the bottom (of the head section) and now we have access to Bigelow Rules in our project.
If we go to App.css I’m going to add a new rule for H1 and I’m going to say font family is Bigelow Rules. I’m also going to set the font size to 72 pixel and the color.
The background we’re gonna put into our index.css and this is a file that gets generated by create-react-app.
The reason why they’ve already added this styling to the body and the code is because create-react-app wants the exact same base styling across all browsers. Different browsers might run different things like a different font or a different margin or padding so create-react-app is just trying to equalize that when the project starts. Inside of this body we’re just going to add this linear gradient to our background.
Our projects not live yet but we can actually host this really easily using github pages. create-react-app has made it really easy to use the github pages service and github lets us host static web sites for free.
The first step we’ve got to do is we have to go to github and then we have to make a new repository.
Name it something.
Then copy the key, use HTTPS if you haven’t got SSH setup.
Go to the terminal and then I’m going to do two things.
First I’m going to connect our actual project to that repository.
We’ve just made by doing
git remote add origin and then the key that was copied.
Next I’m going to actually include the gh pages package by doing
yarn add gh-pages
next I’m gonna go to our package.json file and I’m gonna do two things.
The first thing I’m going to do is I’m going to add (under “private”: true;)
“homepage”: “https://(githubUserName(without brackets)).github.io/(name of the of the project(without brackets))”,
Then add two scripts.
The first one is called ptedeploy and in this predeploy I’m just going to call build because as we remember our build script builds all of our real code into the final code that our browser needs.
“predeploy”: “yarn build”,
And then I’m gonna call deploy and this one I’m going to say gh-pages/ -d built.
“deploy”: “gh-pages/ -d built”
Now this is gonna run predeploy before it runs deploy which is really awesome because npm and yarn both know to run any script that you have pre with before you run the actual script.
So it’s gonna run predeploy before it runs deploy and then it’s going to serve up up to our github project.
Now we’re gonna go back to our terminal and then we’re gonna run our new deploy script
yarn deploy
and now we actually see it runs our predeploy script first and then we’re gonna see that it actually runs our deploy script right after.
Now this is going to build all of our project files that we need for the final project and then we’re going to add
after you run yarn deploy
git add -A
and then we’re gonna write a commit message
git commit =m “adding files for github pages”
and now we’re going to push this up
git push origin master
so once this is all pushed up to our final project repository we’re gonna go back to our github and we’re gonna refresh.
Now we should see all our files in here and if we now go to the settings and when we scroll down we want to make sure that the source is actually pointing to github pages branch.
gh-pages branch
If yours is pointing to master just make sure to set it to gh-pages branch.
And now if we go to our link we see our website is live.
It’s actually served at this URL and that’s awesome because get hub lets us serve these static websites for free very easily and very quickly and you can see how if you wanted to build a quick static web site using react it’s really easy to build it and then serve it using create-react-app and giyhub pages.
Now when we actually build our final application which is a very more dynamic e-commerce web site, we’re going to actually use databases and we’re going to leverage a lot more code and github won’t be enough for us to serve.
And I’m going to show you how we’re gonna take all of these things that we learned building this application and then expand upon them in that lesson.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
45.
R
q
COPY FIRST
make a new folder called pure-react
mkdir pure-react
Inside of pure react
cd pure-react
make a source folder
mkdir src
and then inside of our source folder
cd src
make an index.html file
touch index.html
and then open it up
code .
Inside of our index.html file, generate our basic HTML.
html:5 (then press return)
Go to in the body, add a div with the I.D. of root.
< div id=”root >< div / >
In our index.js file we replace that root div with the actual contents of our application.
And then include the two packages react and react-dom.
Below the the root div write a script tag where the src goes to the react project.
< script src=”link” >< script / >
The “link” is something called unpackage which lets us very easily bring in the react library and then we’re gonna do the same thing with react-dom and now our react project has both these libraries.
So why are there two? React is kind of just the API, but then the thing that actually renders out to the DOM is what ReactDOM is. Whats there reason for both? React is a great kind of engine, but you could have many different views that run on the same engine. So ReactDOM this for the web and React Native, for example, is for native Android and iOS.
So while it use it the same React engine it uses a different package other than ReactDOM to render its Android and iOS views.
So that’s why it’s such a great package because you can even find ones like react 360 if you want to build 3D stuff, like virtual reality stuff.
How could you show that it actually removes what’s inside of this root div when we actually render in our React code.
Type React not rendered between the root div.
< div id=”root >React not rendered< div / >
Open up our index.html in the browser
In the terminal
open index.html
We see that ‘React is not rendered’ appears in the browser.
Because we haven’t actually done that call where we replace the content inside of this div with our application and we haven’t built the application yet but first if we open up our dev tools we can actually see now because we pulled in both those packages, in the console we have access to both React and ReactDOM.
type React and ReactDOM into the console
These are the objects that the two packages provide into our global JavaScript namespace, once we brought those packages in
This is pretty much the same thing that we do when we import in react and react-dom into our files. It just gives us access to these two things.
Add my own script tag and start writing some JavaScript
< script >
JavaScript goes here
< script / >
So first I’m going to write a functional component called app and i’m going to return react.createElement.
const App = () => {
return React.createElement()
}
createElement is a function on React that builds out those elements that we saw when we wrote our return, inside of for example the CardList component.
It just we returned from this function this HTML markup. createElement is actually what it’s doing but instead of using JSX this is vanilla.
So what we’ve got to do is we write in (the argument ) that we want to make a div.
const App = () => {
return React.createElement("div")
}
You can put any other HTML tag or whatever that you’re looking for and then the second argument is an object of any attributes that I want to add to my div.
So if I wanted to add a class or an I.D. I would put them in here.
const App = () => {
return React.createElement("div", {class: "card-list"})
}
So I can keep it empty.
const App = () => {
return React.createElement("div", {},)
}
And then the third and last argument is any children we want to nest inside of our div.
const App = () => {
return React.createElement("div", {},
React.createElement("h1",
{},
"React is rendered")
);
};
And I’m gonna put on an H1, no attributes, and inside of our H1 I’m going to put the text ‘React is rendered’.
Right and now we have our functional component and I’m gonna call ReactDOM.render.
const App = () => {
return React.createElement(
"div",
{},
React.createElement("h1", {}, "React is rendered")
);
};
ReactDOM.render(React.createElement(App), document.getELementById(“root”))
NOTE: These last two arguments are completely optional.
That’s all we were doing when we rendered out < App / > component, except with JSX but now we’re just doing it with vanilla JavaScript.
That’s all the react library does for us it just helps us create these HTML elements using functions or classes.
Now let’s say I wanted to make a const person write that renders and an array.
const Person = () => {
return React.createElement("div", {}, [
]) }
So if we want to multiple elements/multiple children inside of this div we would just use an array and inside I would do React.createElement, H1 and empty object and I’m gonna put
“john” and then I’m gonna make another one except it’s gonna be a p tag and it’s gonna say developer.
const Person = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "John"),
React.createElement("p", {}, "developer"),
])
}
and now instead of just rendering in our application that each one of our actors render right, I’m also going to render in multiple Persons
const App = () => {
return React.createElement(
"div",
{},
[
React.createElement("h1", {}, "React is rendered"),
React.createElement(Person),
React.createElement(Person),
React.createElement(Person)
]
);
};
I’m going to react create element person and I’m gonna do it three times.
Now if we check our application we’ll see, we rendered our person component three times.
Now we hard coded these values, but what if we wanted to do the same thing we did with our other components right. We wanted to use props. Well because it’s just a functional component as we had before we can do exactly that can pass props into this.
And instead of “John” do something like props.name right or props.occupation and these are whatever it is that the attributes are that we want for this component to take.
const Person = (props) => {
return React.createElement("div", {}, [
React.createElement("h1", {}, props.name),
React.createElement("p", {}, props.occupation),
])
}
So now if we wanted to actually add those then we would do our name inside of that second argument with that empty object..
const App = () => {
return React.createElement(
“div”,
{},
[
React.createElement(“h1”, {}, “React is rendered”),
React.createElement(Person, {name: “John”, occupation: “Developer”}),
React.createElement(Person, {name: “Jane”, occupation: “Developer”}),
React.createElement(Person, {name: “Mark”, occupation: “Developer”})
]
);
};
Now if we look at our application we see we can pass in our props right.
That’s all we were doing when we were writing our functional components and our class components.
It’s just that with JSX we don’t have to call React.createElement constantly.
It knows to read from that html markup that we were writing and that’s why JSX is so good when we use it with React because what we did is kind of redundant.
It’s just a quality of life improvement.
Now you might be wondering how would we do it with are class components. It’s actually the exact same.
So instead of an app I’ll just make a class app extends react component.
class App extends React.Component {
}
It’s a class that exists on react that it exposes to us and then we have access that render and in that render I’m just going to return what it is that we had before
class App extends React.Component {
render() {
return React.createElement(
“div”,
{},
[
React.createElement(“h1”, {}, “React is rendered”),
React.createElement(Person, {name: “John”, occupation: “Developer”}),
React.createElement(Person, {name: “Jane”, occupation: “Developer”}),
React.createElement(Person, {name: “Mark”, occupation: “Developer”})
]
);
};
}
}
and now instead of app being a functional component we’re still rendering our class component of app. And if we look we’ll see their application stays the same.
React does for us it helps us build out these views and that’s why React and ReactDOM are such great libraries because it just helps us simply build out our views and manage figuring out what the right thing in our views is to update.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
46.
L
q
COPY FIRST
how you can update your packages.
So because I’m in the future the version of react that I’m seeing that just got released is different
from the version that we are using throughout this course right now.
The latest version of React is 16.10.2.
In the course though the version of React 16.8.6.
It’s a very minor version change but there are a couple of new things that came out in that react version.
So the first thing to do is check what version of whatever packages that you want to upgrade are that you are currently running.
The easiest way to do so is simply using inside of your terminal
yarn list
So if you type in yarn list and then the name of the packages, here I’m checking out react react-dom and react-scripts I will see the version number
yarn list react react-dom react-script
These can be upgraded.
Now instead of directly modifying the value here there is another thing that we can do to make sure that whenever we either want to upgrade we can always use the latest version.
Now the way to do that is simply to go to our package.json inside of our project.
So inside of our package that Jason you’ll see that I have inside of these two dependencies for react and react-dom 16.8.6 and 16.8.6 and 3.0.0 for react-scripts. So if you have used create-react-app to create your application as you’ve been following on this course you may see that there’s this little carat symbol ^ in front of your version. All that means is that this is a rule that tells whatever package manager we’re using whether it be yarn or NPM when ever it sees NPM upgrade or yarn upgrade to update to the latest stable non breaking version.
So if you see this carat then you see that whenever you installed your package even if it’s 16.8.6 it will try and get the latest version.
In my case though because I did not have it whenever I run yarn install or npm install it will find just the exact version which is 16.8.6.
So I’m just going to add this carrot in to all these locations.
And what this will now do is whenever I run yarn upgrade it will try and upgrade with these new rules.
yarn upgrade
The issue that you will encounter if you change your package.json and then try to simply run
yarn upgrade
is that you will see that you have an outdated lock file, it will say please run yarn install and try again. This is perfectly fine.
All this means is that you aren’t upgrading is not going to work here because we updated the rules in our package.json when we added that carrot.
Instead we have to run
yarn install
There is a yarn.lock or a package.lock inside of your application folder.
So what is this lock file? All this lock file is it an auto generated file by either NPM or a yarn that locks the version of all the packages inside of our application within a specific range based on the rules that we set inside of package.json.
So the rules being simply what we saw in the package.json file as our version number.
If I use a carrot, it’s saying that I want it to be at least 16.8.6 or greater but not breaking. What that means is that when we had it before without this carrot the yarn lock file was generated saying that the version of React and ReactDOM and react scripts are locked to exactly that version.
Now that we’ve added this carrot it gives more flexibility which means the yarn.lock file is out of date and needs to be updated.
And this lock file only updates whenever you run yarn install.
So why do we need a lock file? The lock file is simply there so that if multiple people are working on this application they are all using versions of these dependencies that don’t conflict with each other because maybe somebody is running react 17 someone is running react 16 and there is a difference in features that might be breaking in the application. The yarn.lock file just ensures that everybody is using a consistent version of these dependencies. But with that after we ran your install we generated a new lock file and from now on you can simply run yarn upgrade whenever you want to upgrade these dependencies.
We can just double check to make sure the version of these packages that we got are updated.
So if I run
yarn list react react-dom react scripts
I’ll see that they’re now at 16.10.2 for react and react-dom as well as 3.2.0 for react-scripts.
So with this I have now updated my packages to the latest version.
Now let’s see how we do this and NPM. Here I have a separate repository that is a complete clone of our last repository.
The only difference is that in this one I’m using NPM as my package manager instead of yarn.
All I have to do in order to update these packages is run npm update.
The main difference here is that npm update will force the versions to update to their latest versions.
However it’s still good to be explicit in our rules in package.json so that we know what kind of versioning we want to do.
So first let’s just check what versions we have actually installed for react react-dom and react-scripts.
npm list
and then we type out the actual package names the same way.
npm list react react-dom react-scripts
so here with this it’s just like yarn before we see that our versions are 16.8.6 for react and react-dom and 3.0.0 for react-scripts.
So in order to update this we can go into our package.json and we can add Tilda ^ in front of react, react-dom and react-scripts just to be explicit and then we simply run npm update.
One thing I want to note is that even if you don’t add the tilde it will update the version numbers and it will overwrite your package.json file to show the latest version. So npm update and then npm install are both a little different because npm install sometimes will skip over certain versions if it doesn’t see that it’s a major update.
The safest way to make sure that you actually do update all your versions if you want to is run npm update it takes a little longer.
So here we’ll see already that it’s told us that it’s updated react on to 16.10.2 react scripts the 3.2.0 and react 16.10.2.
You’ll also see at the bottom of the terminal that it says found zero vulnerabilities.
So what are our vulnerabilities. You might see this number change sometimes whether you see it as a warning in your github or maybe when you do something with your npm it’ll show you that there’s certain vulnerabilities.
vulnerabilities are essentially these minor security concerns, sometimes they’re major, most of the time they’re minor, that has to do with either a dependency that you have installed or a dependency that your packages depend upon that you yourself don’t know that you also installed.
So for example react probably has something like 60 other packages that it depends upon. And one of those might have a security concern.
The easiest way to actually fix this inside of npm is to run
npm audit fix
and this command will go through and update the versions to a version of a package where it doesn’t have the security concern anymore.
Unfortunately with yarn, this is not so easy.
While yarn does have access to a yarn audit, all it will do is it will audit all of the packages as well as those packages dependency packages to see if there’s any vulnerabilities in any of them.
If it does it will list them to you and show you at what severity.
But for you to actually update it there’s no such easy command as npm audit fix in yarn.
You’ll have to do is manually install and upgrade all of those packages that you see with a vulnerability, if you do use yarn as your main package manager. So that’s just one thing to highlight as the main difference between npm and yarn as well as how the commands work.
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
q
