hey guys welcome back to Cobra and the
sex video series we’re gonna explore
react clarity for and I’m going to
explain a lot of the new concepts in the
next version of react letter but we’re
gonna start by creating a simple
application and it’s going to be a blog
about writers so what I’m gonna do here
is I’m actually going to open up the a
terminal and let me navigate to my
folder here in the workspace react and
then code room so what I’m gonna do is
I’m gonna create a new application with
create react up and we’re gonna call it
writers blog now once the installation
is done electing soul react router so if
you go back to the browser you navigate
to react documentation on github and if
it’s called on you’re gonna see a table
over here the basically lists a few
different packages that relate to react
rather so the first one as you see is
the core of the react pattern the second
one is the one that we’re actually going
to install so this is going to be react
out of them and this one is going to
create Dom bindings for react water but
there’s also one for react native and
obviously it’s going to be react about
our native and that one is going to
create react native bindings for the–
robert both of them still use react
router at the core so the one and only
package that we need to install is react
rather donc because we’re building a web
application here so what I’m gonna do is
I’m gonna do a yarn add react rather
dull and behind the scenes this is
actually going to install react router
as well so I’m going to navigate to that
project here writers blog and what I’m
gonna do is I’m going to open up visual
studio code and then next let’s also
clean up the structure over here so
we’re gonna need to delete some of the
files over here because we’re never
actually going to use them things like
logo or the CSS files because we’re
really not interested in them the same
for some of the tests here so in the end
we’re just going to end up with a simple
index.js file and I’m gonna delete all
of the other references as well so we’re
just gonna have the app component and
it’s going to be mounted to the dock
with react Dom I’m going to say that
and also remove all of the semicolons as
I always do and then I’ll go to app GS
and then here we can basically remove
pretty much most of it in fact when I do
is I’m gonna have an export default of a
function in fact let’s keep it as a
class we’re gonna have a class at extent
a component the reason I’d like to keep
it as a class is because the app
component is going to be the only
stateful component in your application
and some adult all the state for the
application so this is going to extend
the component of course and then inside
of it we’re gonna have the render
function that returns well for now let’s
just simply return here you did I guess
so div got that based inside of the new
class and then we will all the other
stuff as well so we’re not gonna have
any logo anymore the same for CSS and
then I’ll just kill the semicolon at the
end so that’s pretty much it we’re gonna
build out our application from this
point on now let’s go back to be eternal
and let’s actually start the application
so I’m gonna run yarn start and that
should open up the browser for us and we
should basically see a blank page and if
the inspected on we’re only expecting to
see a single day in the road and that’s
basically what we have in app GS now
what I’m gonna do next is I’m going to
create a state so like I said this is
going to be only stateful component in
the application so in this day I’d like
to create a reference to the writers of
course and like I said we’re building a
simple blog application so what I’d like
to do actually is to basically display a
list of names of different writers and
so the user will be able to navigate to
this page and then click on the names of
different writers and then navigate to
the details page of those writers and
this is where we a Trotter will actually
come into play and this is actually a
point where we need to decide how we’re
going to handle this store or basically
the data store for the application so in
my previous video series about the
material UI I’ve actually created a
store GS file inside of the project and
then we’ve put several export inside of
it where we basically defined the
initial data set for the up
we’re gonna go with a similar approach
except we’re actually going to rely on a
server so we’re gonna be making Ajax
call from within the application to that
server now of course if you need to set
up a server you would need to create a
separate application for that server
right so we could use something like
nodejs with Express for that or we could
use rails or we could use pythons Django
or anything like that but for this
simple demo there’s actually a really
fantastic package that I came across
recently and it’s known as JSON server
so what JSON server allows you to do is
create a restful api with basically no
configuration whatsoever app font and it
allows you to create a server that is
based on a file so we imagine that you
have a file called DB JSON where you
basically define a list of data entries
they contain all the data items so for
example posts comments could be users
would be anything basically and then
once you run the JSON server it’ll read
from that file and then spin up a
node.js server that’ll actually respond
to different requests that you can
initiate so once you do that you
actually be able to call your local host
3,000 posts and then slash one for the
ID and that’s actually going to give you
the object itself so this is perfect for
front-end mocking and things of that
nature in those instances where the
backend is missing with the backend is
still being developed by another team
this like I said is perfect for testing
or mocking so this is exactly we’re
gonna use and I’m actually going to
install this package over here so I’ll
stop the server and then I’ll do young
ad and this is going to be a dependency
JSON server and once that finishes what
I’m going to do next is I’m actually
going to create a file it’s going to be
store JSON and this JSON file will
basically include the information about
the writers so this will be the initial
data set for the application so what
I’ll do is I’ll create an object that
will contain an entry for the writers
this is one to be in our a and then
inside of that array we’re basically
going to create several objects for the
initial data set so every writer will
have an ID so this could be a numeric ID
and like
two or three or whatever or because
we’ll be using pre URLs which is
basically what most websites use most
blogs we could simply just take the name
of the writer so for example Alan Watts
right we could take the name of the
writer and then convert it to lowercase
and then at dashes in between instead of
spaces so the idea could look something
like this
assuming that the name would be Alan
Watts right so I’ll keep it as an empty
string for now and like I said we also
have a name of the writer then we’re
also going to have a property that
refers to the date on which the writer
was born and then we’ll have one for a
deceased like that if that’s applicable
then we’ll also have a simple short
description about the writer and then
we’ll also have a property that refers
to the URL of the image or basically the
portrait for that writer now go ahead
and copy that a few times so I’ll create
a few objects here so follow them right
so when I haven’t filled up those
objects with some of my favorite writers
so we got Ralph Waldo Emerson here we’ve
got Friedrich Nietzsche we’ve got Carl
Jung we’ve got Joseph Campbell and
finally Rajneesh or social so very
different writers as you can see here in
the old and the old world on different
topics but I think there should be
enough for the initial data set so I’ll
go ahead and save the store file and now
if we go back to the terminal over here
what would actually do is we can
actually spit up the JSON server at this
point so let’s do note modules bin and
let’s call JSON server so if you go back
to the documentation the one thing I’ll
mention though is they do recommend to
install JSON server as a global
dependency but the only problem with
that is that if somebody actually
installs this project and they would
like to run the application locally and
then play with the fake JSON server
that’s included by the package they
would need to go ahead and install the
server themselves so they would actually
need to go to the terminal and initiate
this command what I’d like to do though
instead is just a simply run yarn
install which would basically install
the dependency
and this is exactly reason why I added
the Jason sir as a deaf dependency
because this will not go to production
of course and so the only caveat here is
that they can’t actually run and Jason
servile like that because if you try to
so let’s try JSON server that’s just
basically not going to be able to find
the command but if you do go to node
modules like I said no modules to dot
bin and then you call Jason server or
not now going back to the documentation
here you need to provide the watch
property
so what’s – exactly that so – – watch
will point to store the JSON file and
then finally because we’re going to be
running our application a react
application on port 3000 if you go back
to the app right there 3,000 the default
port for JSON server is also 3000 so we
need to provide a port over here so
let’s do three thousand four and let’s
start the D server so now let me
actually spend the term over here and
let me go ahead and open another one so
we can actually do at this point is we
can actually start making requests to
that server because it’s already running
in the background so let me do CRO to a
local host port 3000 worth actually let
me go ahead and include the writers
right there at the end of the URL and as
you can see here we get the list of all
the writers as defined in the store
itself and the cool point is let’s say
if I wanted to go back and delete them
so we have five if I delete one then we
can have four because these server is
running in the background it’s actually
being updated as the file is being
updated as well so if I initiate another
request to writers so you can I see
we’re gonna have four objects I’m
actually gonna go back and bring back
over here because it like how fired back
in a terminal the other thing we could
do is we can actually call the
individual writers themselves by
providing the ID and of course if you
provide something that’s gibberish so
for example
and of course that’s not going to be
able to find anything so you’ll just get
an 80 DJ song but the other cool thing
is that we can also not only initiate
get requests but also post so let me put
a header here so this is going to be
content type application JSON so I’d
like to create a new writer here so
we’re gonna initiate a post request and
the data set would be a simple JSON here
so I’m gonna include name let’s say Alan
Watts okay and I also provide the ID for
now so the idea with the Alan Watts okay
like that and then this would need to go
to localhost 3000 for writers like that
and looks like I made a typo it’s
localhost with an L but if you do that
that’s basically going to create a new
entry in the file so this will actually
write to the file in the file system
itself and apart from those you could
also initiate put requests as in my
imagine so let’s have a hood request
instead of Alan Watts let’s say it will
keep the same ID but I wanted to type
something else and then this would go to
writers slash Alan Watts like that and
this will change the name of that
writers equal back be changes will also
take effect in the file itself and then
finally we can also initiate a delete
request in fact we’re gonna do here is
I’ll make a delete request to localhost
this will be port 8000 for writers and
let’s delete
Pelin what’s because we no longer want
to have it so once you do that you get a
set of an empty curly braces and then
you go back to the file and as you can
see here the you writer gets deleted so
this is an awesome package and this will allow us to play with a store over here
sex video series we’re gonna explore
react clarity for and I’m going to
explain a lot of the new concepts in the
next version of react letter but we’re
gonna start by creating a simple
application and it’s going to be a blog
about writers so what I’m gonna do here
is I’m actually going to open up the a
terminal and let me navigate to my
folder here in the workspace react and
then code room so what I’m gonna do is
I’m gonna create a new application with
create react up and we’re gonna call it
writers blog now once the installation
is done electing soul react router so if
you go back to the browser you navigate
to react documentation on github and if
it’s called on you’re gonna see a table
over here the basically lists a few
different packages that relate to react
rather so the first one as you see is
the core of the react pattern the second
one is the one that we’re actually going
to install so this is going to be react
out of them and this one is going to
create Dom bindings for react water but
there’s also one for react native and
obviously it’s going to be react about
our native and that one is going to
create react native bindings for the–
robert both of them still use react
router at the core so the one and only
package that we need to install is react
rather donc because we’re building a web
application here so what I’m gonna do is
I’m gonna do a yarn add react rather
dull and behind the scenes this is
actually going to install react router
as well so I’m going to navigate to that
project here writers blog and what I’m
gonna do is I’m going to open up visual
studio code and then next let’s also
clean up the structure over here so
we’re gonna need to delete some of the
files over here because we’re never
actually going to use them things like
logo or the CSS files because we’re
really not interested in them the same
for some of the tests here so in the end
we’re just going to end up with a simple
index.js file and I’m gonna delete all
of the other references as well so we’re
just gonna have the app component and
it’s going to be mounted to the dock
with react Dom I’m going to say that
and also remove all of the semicolons as
I always do and then I’ll go to app GS
and then here we can basically remove
pretty much most of it in fact when I do
is I’m gonna have an export default of a
function in fact let’s keep it as a
class we’re gonna have a class at extent
a component the reason I’d like to keep
it as a class is because the app
component is going to be the only
stateful component in your application
and some adult all the state for the
application so this is going to extend
the component of course and then inside
of it we’re gonna have the render
function that returns well for now let’s
just simply return here you did I guess
so div got that based inside of the new
class and then we will all the other
stuff as well so we’re not gonna have
any logo anymore the same for CSS and
then I’ll just kill the semicolon at the
end so that’s pretty much it we’re gonna
build out our application from this
point on now let’s go back to be eternal
and let’s actually start the application
so I’m gonna run yarn start and that
should open up the browser for us and we
should basically see a blank page and if
the inspected on we’re only expecting to
see a single day in the road and that’s
basically what we have in app GS now
what I’m gonna do next is I’m going to
create a state so like I said this is
going to be only stateful component in
the application so in this day I’d like
to create a reference to the writers of
course and like I said we’re building a
simple blog application so what I’d like
to do actually is to basically display a
list of names of different writers and
so the user will be able to navigate to
this page and then click on the names of
different writers and then navigate to
the details page of those writers and
this is where we a Trotter will actually
come into play and this is actually a
point where we need to decide how we’re
going to handle this store or basically
the data store for the application so in
my previous video series about the
material UI I’ve actually created a
store GS file inside of the project and
then we’ve put several export inside of
it where we basically defined the
initial data set for the up
we’re gonna go with a similar approach
except we’re actually going to rely on a
server so we’re gonna be making Ajax
call from within the application to that
server now of course if you need to set
up a server you would need to create a
separate application for that server
right so we could use something like
nodejs with Express for that or we could
use rails or we could use pythons Django
or anything like that but for this
simple demo there’s actually a really
fantastic package that I came across
recently and it’s known as JSON server
so what JSON server allows you to do is
create a restful api with basically no
configuration whatsoever app font and it
allows you to create a server that is
based on a file so we imagine that you
have a file called DB JSON where you
basically define a list of data entries
they contain all the data items so for
example posts comments could be users
would be anything basically and then
once you run the JSON server it’ll read
from that file and then spin up a
node.js server that’ll actually respond
to different requests that you can
initiate so once you do that you
actually be able to call your local host
3,000 posts and then slash one for the
ID and that’s actually going to give you
the object itself so this is perfect for
front-end mocking and things of that
nature in those instances where the
backend is missing with the backend is
still being developed by another team
this like I said is perfect for testing
or mocking so this is exactly we’re
gonna use and I’m actually going to
install this package over here so I’ll
stop the server and then I’ll do young
ad and this is going to be a dependency
JSON server and once that finishes what
I’m going to do next is I’m actually
going to create a file it’s going to be
store JSON and this JSON file will
basically include the information about
the writers so this will be the initial
data set for the application so what
I’ll do is I’ll create an object that
will contain an entry for the writers
this is one to be in our a and then
inside of that array we’re basically
going to create several objects for the
initial data set so every writer will
have an ID so this could be a numeric ID
and like
two or three or whatever or because
we’ll be using pre URLs which is
basically what most websites use most
blogs we could simply just take the name
of the writer so for example Alan Watts
right we could take the name of the
writer and then convert it to lowercase
and then at dashes in between instead of
spaces so the idea could look something
like this
assuming that the name would be Alan
Watts right so I’ll keep it as an empty
string for now and like I said we also
have a name of the writer then we’re
also going to have a property that
refers to the date on which the writer
was born and then we’ll have one for a
deceased like that if that’s applicable
then we’ll also have a simple short
description about the writer and then
we’ll also have a property that refers
to the URL of the image or basically the
portrait for that writer now go ahead
and copy that a few times so I’ll create
a few objects here so follow them right
so when I haven’t filled up those
objects with some of my favorite writers
so we got Ralph Waldo Emerson here we’ve
got Friedrich Nietzsche we’ve got Carl
Jung we’ve got Joseph Campbell and
finally Rajneesh or social so very
different writers as you can see here in
the old and the old world on different
topics but I think there should be
enough for the initial data set so I’ll
go ahead and save the store file and now
if we go back to the terminal over here
what would actually do is we can
actually spit up the JSON server at this
point so let’s do note modules bin and
let’s call JSON server so if you go back
to the documentation the one thing I’ll
mention though is they do recommend to
install JSON server as a global
dependency but the only problem with
that is that if somebody actually
installs this project and they would
like to run the application locally and
then play with the fake JSON server
that’s included by the package they
would need to go ahead and install the
server themselves so they would actually
need to go to the terminal and initiate
this command what I’d like to do though
instead is just a simply run yarn
install which would basically install
the dependency
and this is exactly reason why I added
the Jason sir as a deaf dependency
because this will not go to production
of course and so the only caveat here is
that they can’t actually run and Jason
servile like that because if you try to
so let’s try JSON server that’s just
basically not going to be able to find
the command but if you do go to node
modules like I said no modules to dot
bin and then you call Jason server or
not now going back to the documentation
here you need to provide the watch
property
so what’s – exactly that so – – watch
will point to store the JSON file and
then finally because we’re going to be
running our application a react
application on port 3000 if you go back
to the app right there 3,000 the default
port for JSON server is also 3000 so we
need to provide a port over here so
let’s do three thousand four and let’s
start the D server so now let me
actually spend the term over here and
let me go ahead and open another one so
we can actually do at this point is we
can actually start making requests to
that server because it’s already running
in the background so let me do CRO to a
local host port 3000 worth actually let
me go ahead and include the writers
right there at the end of the URL and as
you can see here we get the list of all
the writers as defined in the store
itself and the cool point is let’s say
if I wanted to go back and delete them
so we have five if I delete one then we
can have four because these server is
running in the background it’s actually
being updated as the file is being
updated as well so if I initiate another
request to writers so you can I see
we’re gonna have four objects I’m
actually gonna go back and bring back
over here because it like how fired back
in a terminal the other thing we could
do is we can actually call the
individual writers themselves by
providing the ID and of course if you
provide something that’s gibberish so
for example
and of course that’s not going to be
able to find anything so you’ll just get
an 80 DJ song but the other cool thing
is that we can also not only initiate
get requests but also post so let me put
a header here so this is going to be
content type application JSON so I’d
like to create a new writer here so
we’re gonna initiate a post request and
the data set would be a simple JSON here
so I’m gonna include name let’s say Alan
Watts okay and I also provide the ID for
now so the idea with the Alan Watts okay
like that and then this would need to go
to localhost 3000 for writers like that
and looks like I made a typo it’s
localhost with an L but if you do that
that’s basically going to create a new
entry in the file so this will actually
write to the file in the file system
itself and apart from those you could
also initiate put requests as in my
imagine so let’s have a hood request
instead of Alan Watts let’s say it will
keep the same ID but I wanted to type
something else and then this would go to
writers slash Alan Watts like that and
this will change the name of that
writers equal back be changes will also
take effect in the file itself and then
finally we can also initiate a delete
request in fact we’re gonna do here is
I’ll make a delete request to localhost
this will be port 8000 for writers and
let’s delete
Pelin what’s because we no longer want
to have it so once you do that you get a
set of an empty curly braces and then
you go back to the file and as you can
see here the you writer gets deleted so
this is an awesome package and this will allow us to play with a store over here
Please follow and like us: