REACT JS TUTORIAL #8 - React Inline Styles & Component Arrays Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

check it out I cleaned up my HTML page
if you'll remember I had a lot of static
content and now 100% of it is in the
react app so I'm just going to kind of
walk you through rather than have you
watch a 30 minute video where I copy did
not cut and I paste and I moved it
around I've pushed all the code to
github and now you can just kind of walk
through it this is going to show you
just kind of a little explanation on a
couple react tricks that I took along
the way and then we'll get into flux
this is the last video now we're going
to get into some of the more complicated
data handling but this is it this is my
whole app right here I've got the ID of
app and I've got my client Minjae s I
guess I've got some bootstrap Styles I
also got rid of bootstrap without jQuery
J s so that's the only change that's
happening to client man I'll show you
how I was able to get rid of that here
in a second but that's it I've got my
routing going on if the path is just
root if the hashtag path is just slash
then it's going to load my featured
component which is the default index
route if the hashtag goes to archives in
any article past that which I'll
probably want to make a change to I'll
probably want to make a dedicated our
article route of and a way you can go to
archives and it loads that you can go to
settings and it's going to load the
settings component so that hasn't
changed
let me show you the layout here and this
is where our first react trick will take
place so I'm loading a nav component
which I made and a footer component
which I made and then I'm rendering the
children out in the middle that's it
that's my whole layout everything else
will take place within one of those
top-level page components and so I had
one style and that was that this
container had a margin top of 60 that
way this container would come down below
that nav if you'll remember and so the
way you'll do style in react if you
don't have a lot of styles that need to
go into their own stylesheet is you'll
just do them inline which sounds really
bad to a lot of people but it's a really
clean way of doing it so you simply
create an object like this you can't go
style equals margin top you can't do it
like this if that will not work in JSX
so what you have to do instead is give
it a style object
there we go just give it a style object
and you can either put in quotes and
then actually put your style like that
or react is smart enough to - case it if
you have it camel cased so you can just
do margin top sixty pixels and then
print it out there and you're good to go
this will work great if you have up to
maybe ten rules if you start getting
more like fifty rules you want to break
it out into its own style sheet which
we'll cover later but that gets it
working just fine
and then let me show you my nav here and
how we were able to get rid of that
bootstrap without jQuery j/s
I'm simply printing off my bootstrap nav
which this is just straight-up bootstrap
nav code and then I have the UL with the
Allies of the links and I'm also
printing a couple classes here I'm
printing that active class if you
remember bootstrap if you want it to be
active you had a class active right
there see class active take it away now
it's not active makes the class active
again excellent so that works and then I
also want the archives to go active on
archives and I also wanted to go active
if I were to say archives slash some
article I still want that to match my
archives are out so what I did is I just
looked at location path name if location
path name is just root just slash then
I'm going to say featured class is
active and then I'm printing out feature
class here and then if look if the
location path name starts with slash
archives no matter what it ends with if
it starts with slash archives that I'm
calling that archived active and if it
starts with settings that I'm calling
the settings class active and that's
kind of how they're printing out now I
had a couple people ask how can you use
class here in react you're supposed to
use class name technically because class
is actually a JavaScript reserved word
because we use that up here
so JavaScript technically doesn't want
you using class elsewhere and if you're
remembering the web pack config we load
it in a couple plugins that's what this
guy does this react HTML attributes
plug-in will automatically transpile any
of these class
attributes here to be class name which
is awesome because now I was able to
copy and paste this bootstrap code and I
didn't have to go find all the class
attributes and changing the class name
so that's really good and then I also
for the navbar toggle the only the only
thing I needed that bootstrap js4 was on
this little view right here when you hit
this it's going to add collapsed it's
going to toggle the collapsed class
right here this navbar header I'm sorry
now navbar collapse zoom in a little bit
for you if you add collapse to it then
it collapses take away that collapse and
it's gone so I was able to toggle that
there we go
collapse is gone and it opens up I was
able to toggle that by just saying hey
let's make this state collapsed true by
default in our constructor let's make a
toggle collapse method that just toggles
that and sets our state to whatever our
new toggle is and then I simply made my
button fire toggle collapse on click so
there we go on click this this state
collapsed is just going to invert and
then I just print that out right here so
I'm adding that nav class in that nav
class gets created right here if this
state collapsed which I'm pulling out if
we're collapsed print off collapse if
not print off nothing so then I was able
to remove bootstrap without jQuery now
this is 100% react no jquery on the page
no bootstrap code on the page nothing
else on the page a really nice clean way
to get things done and that's pretty
much it I'll show you one more trick
here let's go to this featured page here
these are semi dynamic right now all
these articles they're being populated
by react now it's got a featured what
the code looks like for this is I have a
random add text string right here and
I'm going to print out a row with a
bunch of articles in it so I haven't I
made an article component here which is
just going to spit out my bootstrap div
and the only thing that's dynamic about
this article component is it can accept
a props title
and so one of the things people run into
and react is how do I spit out an array
of components how do I spit out multiple
copies of a component like for a list
and in this case where was I featured
yep
you simply create an array of components
let me show you since this might look
confusing to people aren't familiar with
map
I could go Const articles equals an
array and then this could simply be
article like this article title equals
some title and then I could just do an
array of articles like that and then if
I were just go ahead save and that's
going to refresh and these will all say
some article up not running Deb there
you go should work here there you go now
they all say some title some title some
title let's make that some other title
some other title excellent but you
notice that react is also going to kind
of give me an error says every child in
array or iterator should have a unique
key prop this helps it render a little
bit faster so each key should be one
they need a unique key prop this could
be the title this could be text this
could be anything but that should be
unique so one two three four that way
since these are all just an array react
needs to know something unique about
each guy so now that warning is gone so
an easy way to get this taken care of
when it's dynamic data say I have an
array of objects is simply take that
array of data here's my array of data
say I got this from the back end and I'm
going to map that and so I'm going to
basically every map gets these two
things and it's going to return
something so I'm going to return in
article components where I spit out the
title and the key is going to be the
index so 0 1 2 3 4 and now this dynamic
information is automatically coming out
on my page so now once we get into flux
all we have to do is kind of
port this information and we can spit it
all out into articles and bootstrap does
a really good job automatically kind of
laying that out I could copy this and
make 20 of those bootstrap does a pretty
good job with the masonry of things so
even though it's a row that technically
has 12 columns across it wraps around
really really nicely so that's good and
now they're all using an article
component so if I want to give this more
info some functionality then the article
component will know what to do across
the board
archives is also using the exact same
article component which is really nice
so that article component can contain a
lot of smarts to it or I can update the
design very easily by just changing the
article component say I want this to be
an h4 now across the board my whole site
uses h4 s for all the articles very cool
so that's pretty much it that's how I
did my layout you can snoop around the
code and if you have any more questions
on where we are to date make sure you're
confident with routing with all the
class methods we're using with all the
all the component theology methodologies
I'm using so far once you're confident
with this with react layouts let's go
ahead and move into the flux stuff
that's going to be these next videos