For that attached, you find a React project and this is actually the project we worked on before.
It's this project where you can find a place by entering it here or by getting your current user location
and where you can then share this place and view this place.
So this is something we built before with vanilla Javascript,
I now converted it to React and I will now have a look at it with you so that we can get a first understanding
of React.
Now I did convert it off screen because this is not a React course and you could easily create an entire
course about React,
well indeed I do have an entire React course.
Now I don't want to bloat this cause with tons of React instructions which might not be interesting
to you if you're not interested in React,
instead I just want to show you what React or similar packages like Angular or Vue typically do and
how it may change the way you think about creating such applications.
If you then want to learn React or Angular or Vue,
have a look at my dedicated courses. So attached you find this project and with it downloaded,
you should extract it and then navigate into this or open it in your IDE, open the terminal there and
then run npm start. Npm start in the end starts
also one of these scripts,
the starts script is a special script which you don't need to start with npm run but where you can
just type npm start
and this uses the entire setup which is provided by this project under the hood.
It uses webpack under the hood to convert the code, to bundle the code,
so we got basically a setup as you saw it before but with all the configuration and the heavy lifting
managed for us behind the scenes.
This is also something these frameworks or big libraries typically do for you,
they give you project setups where you don't have to configure everything manually and that of course
ensures that you don't have to become a webpack master just to create and ship optimal code.
Now keep that process running here,
you can always quit it with control c but then you will not have that development server anymore,
just like before it's a server which will automatically reload whenever you change something in code
and you can view it on this page here, localhost:3000,
so this is what I got here.
Now if we have a look at this, it is of course the same as before,
it looks the same but we got totally different code in there.
We can find our code in the source folder,
the public folder holds the one and only HTML file we got and if we have a look at that HTML file, you
see it's pretty empty and it's also only one,
before we had two. The reason for that is that with React here and you typically do the same with Angular
and Vue,
we created a so-called single page application, which means we only have one single HTML page and
now Javascript will render everything we see on the screen here and will change everything on the screen
if it needs to.
Now before we used HTML for that and doing it all with Javascript would be a lot of work if we had to
write all these instructions on our own, with React or similar frameworks
it's a breeze because React does the heavy lifting.
Now how does React know what to render though?
Well we get this root div here in our one and only index.html file and if you have a look at the index.js
file which I can tell you is the first code that is being executed by our React application in
the end,
we see a bunch of imports and we see that in the end, we get some very strange code here which we haven't
seen before and that we then target this root element in the index.html file here. So what is going on
here? React and React DOM, the things we import here are features from the React library and the React
DOM library which of course is connected to the React library. React
DOM gives us access to the DOM and allows us to render a so-called React component to that DOM in this
place.
Now this here is a React component
and this here also is using this jsx syntax I mentioned earlier.
It was invented by the React team and this is definitely not Javascript that would run in the browser,
this is really important to keep in mind,
instead this is converted to a real Javascript instruction that the browser can execute before the code
is shipped,
so during the build process so to say, so when you previously ran the webpack command,
now when we get this built-in development workflow, when that executes, this is converted and actually
this is converted to React create element app. This is what happens here,
this is the exact same. In the end,
this jsx code is converted to React create element instruction to which we pass a React component
which in this case here is a component coming from the app.js file and we'll have a look into this
file in a second.
Now because that's a lot to write, especially if we have more and more such components we compose together,
we got this special jsx syntax which does this conversion to this other code behind the scenes,
this is also the reason why we are importing React here even though I'm currently not using React itself
anywhere in this file,
well it implicitly gets used because this here gets converted to React create element and then React
is getting used.
So this is this jsx code and again I do of course explain all of that in more detail in my React
course,
for now we can just take for granted that with this instruction, we're rendering something in this place
here and that's something is this app component as I called it.
Now let's have a look into this app file to understand what such a component is.
If we have a look into the app.js file, we see okay here I got a function which is exported with a default
export, I'm importing more things from other files so I'm importing React again because we see this jsx
code again and I'm importing something from the React router DOM package, another package not
directly managed by the React team but part of the React ecosystem which in the end allows us to render
different content for different URLs we're visiting
so if I go to /my-place, the content of this page is swapped entirely and something totally different
is rendered. With this here, we in the end tell React which component to render for which path in our URL
and this is then all happening in the browser and it's using Javascript there to then fill the
page with content, so to tweak the DOM on the fly when we enter a different URL for example.
This is what React does and the React router helps us with rendering different content for different
paths in the URL.
So let's have a look at share place then maybe, that's rendered for slash
nothing,
so that's rendered when we just visit localhost:3000/.
So if we go to pages, SharePlace.js, we see a long file,
now let's have a look at it.
In the end what we got in there is an arrow function stored in a constant,
so we got a function in the end and that function in the end down there at the very bottom is exported,
so I'm exporting a function in that file and that's important. In React
you can write special functions which in the end are normal Javascript functions but which behave in
a certain way,
for example they always return jsx code,
that's a must have, which are then treated by React as so-called React components, which is really just
an internal term, it's nothing Javascript specific, it's just a description.
Now such a function is a normal Javascript function but we're not calling it, I'm in the end just passing
this in create element here to React as you saw before and React then execute these functions for us
to pass in data this function needs and to use this returned jsx code which the end is just a bunch
of nested React create element calls as you saw to then in turn use all these instructions to render
something onto the screen
and if you inspect this, you'll see we got a populated DOM here. So the DOM really was touched and
content was added to the DOM but all that was done by Javascript, of course not Javascript
we wrote on our own, we're not having a single create element or append element line anywhere in this
file or anywhere in this project,
instead React does this based on our instructions here,
that's why we have this jsx code which the React
team invented,
it's simply more readable,
it looks like HTML
even though it technically isn't HTML.
So in the SharePlace.js file,
we got such a function which we export, we're importing some stuff from React and we're importing some
things from other files.
We're also importing a CSS file here which is super weird,
this is not React specific though,
this is something webpack can do if you add the right loader,
in the end that will just tell webpack to also take a look at that CSS file and bundle it up and
load it as part of your project into your HTML file as well so to say, so this is something
webpack does here.
Now let's have a look into our component function here
though. It's a function which in this case gets no arguments, React would actually pass in some arguments
here
if we were interested but here I'm not, I'll come back to which arguments we could get later
and then here I get a bunch of strange instructions, using a use state function and the use ref function.
These are functions provided by React and this is the most modern React syntax we can use at this time
to inform React about certain dependencies we have in this share place component if you want to call
it like that. React
actually also has another syntax for creating components where you use the class keyword to create
a normal Javascript class
and that is also totally fine to use, you'll see that in many projects too
and in my course, I teach both syntaxes, here
I focus on this function-driven syntax though which is perfectly fine to use and which is also the more
modern of the two syntaxes. So here in this function, we then have a couple of function calls to use
state and use ref which are functions that are coming from the React library. In the end, this set up certain
things for React to watch, for example use state sets up certain state data pieces you could say which
when they change trigger this component to be re-rendered on the screen.
So whenever some data here changes, React goes ahead and updates the UI and this reactivity is built
into React. Use ref gives us access to DOM elements so that we can read a value from an input for example.
Now and without going into too many details, in the end the way we build a UI with React is such that
we have these states or these state data pieces, we use array destructuring here to get two pieces of
data out of the result of use state,
one is the current state stored by React and one is a function that allows us to change that state which
then in turn will trigger such a UI update and React will then have a look at our jsx code down
there and wherever we use some state that changed now, it will go ahead,
reach out to the real DOM and update that part of the DOM to match this updated state. As an example,
we got that get current location button here,
right? Now you'll see I added a click listener here with another new instruction which we haven't used
before,
this again is understood by React
and here I'm saying if this is clicked, execute the get user location handler function. Now we find this
function here as a nested function in this component function,
here it is and that's the same function we build before when we built this whole project with just Javascript
in the end,
well at least the rough idea is the same.
However here for example, instead of creating a modal class and calling modal.show which I did before,
I'm setting isLoading to true with help of set isLoading which I get out of this use state
call up there. Now this changes the loading state to true,
initially it's undefined because I didn't pass a value to use state here which would be used to initialize
this state.
So initially it's undefined, here
I'm then setting it to true. Now then we get the user location and once I got the location, I set is loading
to false and the coordinates and the address I got is also stored in state
and by calling all these set functions, the state is changed in React and I tell React
hey your state changes, you want to check your UI, your jsx code
if I'm using that state anywhere down there and if I am and if that now leads to a different output than
before, please go ahead and update it in the DOM,
that's what I'm telling React here.
So when I get the user location, I save the coordinates, I save the address,
I change the loading state.
So what do all these changes do?
Let's have a look at our jsx code. For example I'm using the is loading state here,
these curly braces, that's some special React syntax which mixed with the jsx code just tells React
hey this is not jsx here, at least not entirely,
instead this is also regular Javascript code mixed with some jsx maybe.
So here, I'm basically having is loading and then I'm using this shortcut you learned about earlier
in the course where say if is loading is true, then this should be rendered.
So this is now my way of expressing that I want to render the modal if we're loading and is loading
switches back to false, then this will overall yield false and this will no longer be rendered or returned
as a result of this expression and therefore React will then go ahead and update the DOM and remove
the modal content which in the end is rendered because you see here we also got some normal HTML elements
in there which in the end are output on the screen by React.
So this is what I meant, you don't have these manual calls to create an element, to append it, to remove
it, instead you defined the result you want to have, possibly under a certain condition and React will
just make sure that this ends up on the page correctly and that if I click get current location, we get
this modal, this is something React we'll take care about and it's the same not just for is loading but
also for the coordinates which I got. When I got chosen coords, I in the end pass them here to my selected
place component.
This is also one of my React components and unlike the other components we saw thus far, this component
takes two inputs,
you can think of these almost like function parameters which are passed in and you will see how these
are received and handled in just a second.
Same here for the sharable link, I bind the value property in the end of the input to sharable link and
I can change the shareable link and I do change it with set shareable link in this page here or in this
component
and when this changes and gets a new value, React will go to the place where I use sharable link,
so for example here and will update the value there, on the screen as well.
This is how React thinks and that's of course just the quick summary,
definitely a lot to digest if you've never worked with it but it hopefully gives you an idea of how
React works and what the huge difference to vanilla Javascript is, you define the result, not the way how
you reach it
and again in my React course, you'll learn all about that step-by-step from the ground up
also with that alternative syntax which I mentioned before. Now let's have a look at the selected place
component which we find in the UI folder. There we see we got some inputs and therefore here I got this
props parameter.
If you set up certain inputs on a component you use, just like you would add attributes to a normal HTML
element, React will bundle them all up as properties in one object which this component function
receives.
So in this case, the selected place component receives this props object which holds the center coords
and fallback text properties which I'm pulling out of that object with object destructuring here. Well
and then again, I use use effect here which is coming from React which the end just tells React that
I can set up a listener to some data and when that changes, I want to execute some code,
so if I don't just want to update the UI reactively as before but I want to do something else,
upon data changes, I can use use effect, I specify a center coords as a dependency,
that's what's being done with that second parameter I pass to use effect which is an array of dependencies
and then inside of that function which I pass as a first parameter to use effect, I can execute some
code when that data changes
and here I'm then using the good old Google Maps package to render a map on the screen,
that's what's happening in this component
as an example. Down there I also have a condition that if I don't have any coords yet, I show my fallback
text.