Update captions for episodes 1-7

RFB/05 - Loading CSS into our React Application.vtt

@@ -1,115 +1,282 @@
-WEBVTT
-
-00:00:03.580 --> 00:00:07.150 line:100% position:50% align:middle
-♪ [music] ♪
-
-00:00:07.150 --> 00:00:12.470 line:100% position:50% align:middle
-CSS in React can be done a number of
-different ways and you may have heard some
-
-00:00:12.470 --> 00:00:16.820 line:100% position:50% align:middle
-people do inline style, some people do a
-separate CSS file for every single
-
-00:00:16.820 --> 00:00:20.170 line:100% position:50% align:middle
-component, and some people just do the
-regular old way, where they have a Sass
-
-00:00:20.170 --> 00:00:25.360 line:100% position:50% align:middle
-file or a CSS file and then they load it
-into their HTML. So, whatever works.
-
-00:00:25.360 --> 00:00:29.330 line:100% position:50% align:middle
-Chances are, if you have an existing
-website, you already have CSS already set
-
-00:00:29.330 --> 00:00:32.910 line:100% position:50% align:middle
-up. So, you don't need to involve that in
-your whole Webpack build,
-
-00:00:32.910 --> 00:00:36.560 line:100% position:50% align:middle
-you probably already have a process for
-that. And there's no problem in just
-
-00:00:36.560 --> 00:00:41.660 line:100% position:50% align:middle
-having a link tag and saying style.css in
-your index.html and everything will be
-
-00:00:41.660 --> 00:00:45.475 line:100% position:50% align:middle
-rendered on out. However, there are a
-couple other ways. If I go to my
-
-00:00:45.475 --> 00:00:52.683 line:100% position:50% align:middle
-index.html, one of the things that we can
-do is load in our CSS and let Webpack do
-
-00:00:52.683 --> 00:00:56.650 line:100% position:50% align:middle
-all of the loading for us, and the hot
-reloading and all of that good stuff.
-
-00:00:56.650 --> 00:01:03.410 line:100% position:50% align:middle
-So, I have compiled a style.css file for
-you. Never mind all these style files,
-
-00:01:03.410 --> 00:01:06.600 line:100% position:50% align:middle
-we're going to go over there when we hit
-the animation videos.
-
-00:01:06.600 --> 00:01:12.060 line:100% position:50% align:middle
-But, I've compiled a style.css file for
-you and what we can then do is,
-
-00:01:12.060 --> 00:01:16.520 line:100% position:50% align:middle
-we simply just type import and we don't
-need to name it like styles,
-
-00:01:16.520 --> 00:01:23.264 line:100% position:50% align:middle
-because we're not going to be using it.
-We simply just say "import './css/style.css';"
-
-00:01:23.264 --> 00:01:26.460 line:100% position:50% align:middle
-and that's going to take
-everything that's inside of this file,
-
-00:01:26.460 --> 00:01:32.140 line:100% position:50% align:middle
-Webpack is going to compile it all and
-it's going to pop a style tag on the page
-
-00:01:32.140 --> 00:01:36.310 line:100% position:50% align:middle
-for us. So now, when I save that, refresh,
-automatically things are starting to look
-
-00:01:36.310 --> 00:01:41.520 line:100% position:50% align:middle
-a lot better. All of that CSS is starting
-to kick in. Some other people will have
-
-00:01:41.520 --> 00:01:46.320 line:100% position:50% align:middle
-separate .css files for every single
-component that they work on.
-
-00:01:46.320 --> 00:01:51.520 line:100% position:50% align:middle
-And what that allows them to do is really
-just scope the CSS to that specific
-
-00:01:51.520 --> 00:01:56.880 line:100% position:50% align:middle
-component without having to load into
-other pages. So, you could do that if you
-
-00:01:56.880 --> 00:02:00.060 line:100% position:50% align:middle
-want. That's really a bit more of an
-advanced topic. So, as far as we're
-
-00:02:00.060 --> 00:02:06.120 line:100% position:50% align:middle
-concerned right now, we just want to
-import CSS from the style.css file.
-
-00:02:06.120 --> 00:02:09.980 line:100% position:50% align:middle
-And then, in a future video, we're going
-to look at how do we actually run an NPM
-
-00:02:09.980 --> 00:02:15.320 line:100% position:50% align:middle
-script in order to compile the style or
-fuse Sass or Less or anything like that.
-
-00:02:15.320 --> 00:02:17.000 line:100% position:50% align:middle
-How do you compile that on in?
+WEBVTT
+
+1
+00:00:00.088 --> 00:00:02.838 line:15% 
+(cheerful music)
+
+2
+00:00:07.285 --> 00:00:09.040
+<v ->CSS in React can be approached</v>
+
+3
+00:00:09.040 --> 00:00:11.700
+in a number of different ways so let's take a look
+
+4
+00:00:11.700 --> 00:00:13.610
+at some of the different options that we have.
+
+5
+00:00:13.610 --> 00:00:15.210
+So first of all, you might already have
+
+6
+00:00:15.210 --> 00:00:18.430
+an existing website which you're integrating React into,
+
+7
+00:00:18.430 --> 00:00:20.550
+and if that's the case, you likely already have
+
+8
+00:00:20.550 --> 00:00:23.750
+an existing build process and an existing CSS
+
+9
+00:00:23.750 --> 00:00:25.460
+way that you like to write your CSS.
+
+10
+00:00:25.460 --> 00:00:27.180
+So, if that was the case,
+
+11
+00:00:27.180 --> 00:00:29.370
+then you would just open up your indexed HTML
+
+12
+00:00:29.370 --> 00:00:32.490
+or whatever application has this mounting point
+
+13
+00:00:32.490 --> 00:00:33.690
+that we talked about earlier,
+
+14
+00:00:33.690 --> 00:00:35.430
+and you just stick a link tag in there
+
+15
+00:00:35.430 --> 00:00:39.120
+and you have style.css, then the CSS in that CSS file
+
+16
+00:00:39.120 --> 00:00:41.390
+is going to be applied to any classes and tags
+
+17
+00:00:41.390 --> 00:00:43.760
+that get rendered out to the page.
+
+18
+00:00:43.760 --> 00:00:48.240
+Another option, and this is often called Componentized CSS
+
+19
+00:00:48.240 --> 00:00:51.510
+or Inline-CSS, and the idea behind this is
+
+20
+00:00:51.510 --> 00:00:56.390
+rather than writing a big CSS file or maybe writing
+
+21
+00:00:56.390 --> 00:00:59.040
+multiple SAZ files that compile into one,
+
+22
+00:00:59.040 --> 00:01:01.800
+well, what people will do is they will import the CSS
+
+23
+00:01:01.800 --> 00:01:03.750
+directly into a component
+
+24
+00:01:03.750 --> 00:01:05.770
+that only relates with that component.
+
+25
+00:01:05.770 --> 00:01:08.370
+So, maybe I've got some CSS
+
+26
+00:01:08.370 --> 00:01:11.460
+that applies to my store selector and styles in h2,
+
+27
+00:01:11.460 --> 00:01:13.460
+and styles the button and the input,
+
+28
+00:01:13.460 --> 00:01:16.100
+then I would just simply import it into this component
+
+29
+00:01:16.100 --> 00:01:18.980
+and that will sort of tightly couple the CSS
+
+30
+00:01:18.980 --> 00:01:21.820
+with the actual component that gets rendered out.
+
+31
+00:01:21.820 --> 00:01:24.090
+So, those are sort of the two options,
+
+32
+00:01:24.090 --> 00:01:26.400
+there's lots of opinions on either side
+
+33
+00:01:26.400 --> 00:01:28.650
+as to which way people like
+
+34
+00:01:28.650 --> 00:01:31.460
+and I'm not going to really step in there because
+
+35
+00:01:31.460 --> 00:01:32.870
+it's a bit more of an advanced topic
+
+36
+00:01:32.870 --> 00:01:35.100
+and I will be covering that in my advanced React.
+
+37
+00:01:35.100 --> 00:01:36.310
+So I'm gonna show you how to
+
+38
+00:01:36.310 --> 00:01:40.000
+import CSS directly into our index.js file
+
+39
+00:01:40.000 --> 00:01:42.970
+which is going to get applied to the entire application.
+
+40
+00:01:42.970 --> 00:01:46.000
+Then, in a future video, I'm gonna show you how to
+
+41
+00:01:46.000 --> 00:01:48.750
+compile some CSS, so if you are looking to use
+
+42
+00:01:48.750 --> 00:01:50.550
+something like SAZ or stylus
+
+43
+00:01:50.550 --> 00:01:52.210
+and you wanna apply it to this application,
+
+44
+00:01:52.210 --> 00:01:53.220
+we're gonna look at how we do it
+
+45
+00:01:53.220 --> 00:01:55.660
+and that's gonna happen in the animation video.
+
+46
+00:01:55.660 --> 00:01:57.500
+So, all we really need to do here is,
+
+47
+00:01:57.500 --> 00:01:59.800
+I have a style.CSS file for you
+
+48
+00:01:59.800 --> 00:02:00.930
+and it's already compiled,
+
+49
+00:02:00.930 --> 00:02:03.100
+again we're gonna come back to compiling that
+
+50
+00:02:03.100 --> 00:02:05.980
+in a future video, you simply just need to
+
+51
+00:02:05.980 --> 00:02:09.420
+import and then we need to go into the current folder
+
+52
+00:02:09.420 --> 00:02:12.020
+and then there's a CSS folder and inside of that
+
+53
+00:02:12.020 --> 00:02:15.500
+we have a style.css file and because we are
+
+54
+00:02:15.500 --> 00:02:18.290
+set up on create react app, and again,
+
+55
+00:02:18.290 --> 00:02:20.670
+create react app under the hood
+
+56
+00:02:20.670 --> 00:02:22.940
+will do all the web-pack config for us,
+
+57
+00:02:22.940 --> 00:02:25.640
+the webpack config is smart enough to know that
+
+58
+00:02:25.640 --> 00:02:28.310
+this is obviously not a Javascript file,
+
+59
+00:02:28.310 --> 00:02:29.900
+so what it's going to do is it's going to
+
+60
+00:02:29.900 --> 00:02:33.210
+load in the CSS, stick it into a style tag,
+
+61
+00:02:33.210 --> 00:02:36.110
+and then anytime we make any changes to this CSS,
+
+62
+00:02:36.110 --> 00:02:38.310
+it's gonna automatically do that hot reloading thing
+
+63
+00:02:38.310 --> 00:02:40.080
+or it will change it for us.
+
+64
+00:02:40.080 --> 00:02:43.790
+Now, when we compile it for production and all that,
+
+65
+00:02:43.790 --> 00:02:47.700
+then we are going to kick out a separate .css file
+
+66
+00:02:47.700 --> 00:02:51.020
+and we'll look at that much later in this course
+
+67
+00:02:51.020 --> 00:02:51.853
+of when we have it.
+
+68
+00:02:51.853 --> 00:02:54.480
+So that's pretty much it, we just import the CSS,
+
+69
+00:02:54.480 --> 00:02:55.880
+then it gets applied and you can see
+
+70
+00:02:55.880 --> 00:02:58.370
+that this stuff is starting to look a lot better.
+