So another we have our local server running. 2
Let's try making some changes to the existing files and see how it affects this page right here. 3
Back in my terminal I'm inside the redux simple starter folder and I'm going to go ahead and open up 4
my code editor. 5
Make sure that your server is still running. 6
You can start the server by running NPM star from the command line inside of the project directory. 7
OK. 8
So here I have my code editor open and it opens right on into the file index. 9
Each DML. 10
You'll notice that we've got just very simple dong here. 11
You know we've got a head tag body tag which has a single div and a script tag for bundled that. 12
J Yes. 13
This bundled up G-S file is the compiled javascript for our entire application. 14
So this existing repository right here has a bunch of existing js files inside of it that you can see 15
web pack and babbel take all these files put them all together into a single file and makes them available 16
as bundled thought. 17
Jay Yes whenever we visit the web server at localhost ADHD This is the Index or the female file that 18
we're actually running. 19
So if I were to add say another division here or not even just did. 20
But just some random content. 21
Flip back over to Chrome refresh the page and you'll see I get random content appearing on the page 22
. 23
I'm going to go ahead delete the index or delete that extra content and save the file again. 24
So there's a bunch of existing files in here. 25
Let's just change. 26
Let's open up the folder components inside the source directory and the file. 27
Abduct J Yes. 28
Inside of here you'll see some existing code with something that says re-act simple starter just to 29
show what happens and we change some code in here. 30
We're going to go ahead and just delete this and we'll change it to. 31
Hello there. 32
And then I'm going to tab back over refreshed the page and you'll see we have hello there. 33
So again this development server that we have running this boilerplate package takes all these javascript 34
files we have bundles them up together and ship it off to the browser whenever we make a change to some 35
content in a file. 36
We can just save it refresh the page in the browser and we'll see the new content pop up on the screen 37
. 38
Cool. 39
OK. 40
So we've got this existing source file in here. 41
The source folder with a bunch of existing javascript. 42
Now it's kind of a policy of mine to avoid starting off with as much simple code of boilerplate code 43
as possible so I don't really want to start with all this boilerplate that we have in here. 44
You know we've got some directories where you know who knows what actions are inducers or even indexed 45
but GSR. 46
So rather than start with some of this prie or this code that was given to us from this boilerplate 47
package I want to go ahead and we're going to start from scratch. 48
So I'm going to select the source folder and delete it entirely. 49
Then we're going to go ahead and make a new folder and we'll call it source and then make a new file 50
and call it index. 51
Yes. 52
So we're basically just starting from scratch here with a blank index dot Js file back over in Chrome 53
. 54
I'm going to refresh the page and you'll see we have no content up on the screen anymore. 55
Most are going to pop up in my console here on the side and you can see that we don't have any errors 56
or anything like that so totally clean slate here. 57
All we have is this boilerplate package that's going to take any of the code that we write in here mushed 58
it all together in a single file and serve it off to the browser. 59
OK. 60
So without any further ado let's talk about it or the real answer here. 61
What is re-act what's re-act doing for us. 62
How are we going to use it to make any type of application react as a javascript library that is used 63
to produce each T.M. that is shown to user in a web browser. 64
So when we write re-act code we're writing individual components or views components. 65
And I can use the term components and use interchangeably here are snippets of code that produce each 66
team. 67
So whenever you think component or you think something that produces each you know we write re-act code 68
we write multiple different components and we nest these components together by placing one inside the 69
other in different fashions to make really complex applications relatively simple. 70
A component is a collection of Javascript functions that produce each T.M.. 71
So when we're making a component we're writing javascript but it's going to ultimately produce each 72
TNL. 73
OK so enough about what components are. 74
Let's try actually writing one. 75
So in my code editor here I've got indexed not J us open and we're going to start through this process 76
here of writing the first component for learning something from scratch. 77
I'm a big fan of kind of writing out comments or saying like you know what we want to have happen before 78
we start writing any code. 79
So I'm going to put two comments in here that just kind of vaguely describe what we're going to try 80
to accomplish inside this file here. 81
I'm going to say you know we want to create a new component and this component should produce some hits 82
you know. 83
So you know OK you know that makes sense we're making a reactive component we want it to produce some 84
age to you know to recreate that component we need to actually make sure that it gets put into the dorm 85
somehow. 86
You know we're going to write many different components but none of them actually automatically get 87
inserted into our HMO document. 88
We have to specifically say react. 89
Please take this component I just make just made excuse me and shove it into the dorm. 90
You know I want a user feel a See the thing. 91
So I will say Take this component's CML will say generated its S.M. and put it on the page. 92
Which means really in the done right. 93
So it's going to kind of a two step process that you have here for this first component. 94
We're first going to make a component and then we're going to show it on the page somehow. 95
OK. 96
So as we go through this process I'm going to kind of do in a new fashion. 97
I can tell you right now we're going to write some code and it's not going to work at first. 98
OK. 99
And I know that is kind of frustrating sometimes when you watch a lecture and you know the person says 100
OK you know oh we're do it the wrong way. 101
But the purpose here. 102
The goal is drugs its entire course. 103
I want you to get really familiar with troubleshooting. 104
So I want you to not always see the like perfect working. 105
You know all the code comes together perfectly no errors whatsoever. 106
I want you to see some of the errors that we get. 107
And once you get used to them and be able to interpret them and be able to troubleshoot those errors 108
. 109
So as we go through this first component we're going to make some mistakes or we make them on purpose 110
. 111
But we're going to talk about the errors that we get and we're going to talk about what they mean. 112
So when you see red text popping up in our console you know something it says like Oops you just messed 113
something up. 114
Excuse me I don't want you to think oh you don't read text. 115
Something is wrong whatever. 116
Don't you think oh read text. 117
This is a problem something we need to you know an error that we need to look at understand and try 118
to troubleshoot. 119
OK. 120
So let's get started with our first component here and we're going to just put some color on the screen 121
and we'll talk about exactly what's happening. 122
So I going to write Konst app is a function and then return does hi like so. 123
OK. 124
So if you're familiar with javascript and I sure hope you are some this is going to look familiar and 125
some of it's probably going to look pretty weird. 126
I assure you that it's all javascript even though you do see what looks like some H.T. melon here. 127
So let's start from the very beginning. 128
The first weird thing Konst Konst isn't yes 6 or yes 2016 Cynde piece of syntax. 129
So as we go through this first section here as we start to put our first application together you're 130
going to see a lot of simultaneously re-act concepts but also yes six concepts at the same time. 131
I'm going to try to do my best to point out which one is you know this is specifically something that 132
has 6 and this is specifically something that's. 133
Yes. 134
Or soon you react so cuts you might be used to declaring variables by using the keyword var. 135
So something that looks more like you know var app Konst really is doing some of the same thing it's 136
declaring a variable. 137
The only difference here is that when ever we declare a variable with Kunst we're saying this is the 138
final value of this variable. 139
It's not going to change. 140
You know we shouldn't even really call it a variable we should really call it a constant. 141
It's a constant. 142
It's never going to change. 143
And the words were never going to re-assign up down the line. 144
So you're not going to see something that says like AB equals 5. 145
This would throw an error right here. 146
OK. 147
Next a function. 148
Hopefully you're familiar with functions. 149
No nothing too crazy here. 150
We're just declaring a constant called app and assigning it a function. 151
What's going on inside the function however is probably well something a little bit new. 152
Right. 153
We have some what looks like each CML inside of our function here. 154
But as we know we can't you know right HTL inside of our javascript so what's going on. 155
Well this HTML looking stuff right here is what we refer to as J. 156
S x GSX is a subset or dialect of javascript that allows us to write what looks like HTL inside of our 157
javascript but is really behind the scenes just javascript. 158
So this is coming back to the concept that we spoke about earlier where Web pack and babbel is going 159
to do some level of transpiring of our code before it gets in the browser. 160
So when this code shows up in our browser it doesn't actually look like you know div high div it looks 161
totally different and we'll talk a little bit about what it really looks like in the little site in 162
a little bit here. 163
OK. 164
So with this on the screen right now this looks pretty good. 165
You know we've got a component here and returns some GSX and we'll talk about you know exactly what 166
Jeff Sachs is doing here. 167
But you know it looks like Hey this might be you know legitimate this might be something we can do. 168
So let's go ahead and save this. 169
Flip over to the browser. 170
We're going to refresh and nothing. 171
So. 172
Of course there is nothing we haven't done step to here yet. 173
We haven't taken the component yet and put into the page. 174
So let's continue in the next section and do the second step.