Hey guys. 1
It's Angela from the App Brewery 2
and today I have a really exciting module to share with you. 3
We're going to be learning about React and in this gigantic 10 hour module, we're going to be teaching 4
you the ins and out of this web framework and how you can use it to build beautiful user interfaces 5
for your websites and web apps. 6
Now I know that you guys have been clamoring to learn about this and it's no wonder because even according 7
to Stack Overflow and the latest survey, React JS is both one of the most loved and the most wanted 8
web frameworks out there beating out Angular, Vue and a lot of other great frameworks. 9
But what exactly is React anyways? 10
Well they define it on their website as a JavaScript library for building user interfaces. 11
So it's a front end framework essentially. 12
And the idea is to make it easier and faster to build beautiful user interfaces such as the ones on 13
Airbnb. 14
And then one of the best things about React is it makes it so easy to create these repetitive elements 15
such as these tiles that you see on Airbnb. Each of these sections have different pieces of information, 16
but each of them individually such as the rating or the superhost tag, these all worked very similarly 17
from listing to listing. 18
So if you have a whole bunch of these that you need to render then you can simply create a single component 19
and customize it with different pieces of data to create an entire user interface like the one that 20
Airbnb has. Effectively, you end up breaking down a very complex user interface structure into a component 21
tree. 22
So for example here, I've got the entire web app represented as a component inside that I've got a nav 23
bar component which can be customized. 24
I've got a ToDoList component and inside that I've got ListItem components and then I've got Checkbox 25
and ItemText component each of which can be reused and customized so that you end up coding less but 26
creating more beautiful user interfaces. 27
And it also vastly simplifies the structure of your website. 28
So if you think back to using Bootstrap just to create a simple Navbar like this, we have to write a 29
whole bunch of HTML like this. 30
And it makes it really hard to organize our code and make sense of what's actually going on when things 31
go wrong. 32
Now in React however, we have a whole bunch of different components represented each as if they were 33
an HTML element. 34
So it's effectively like we're creating our own custom HTML elements defining the styling and defining 35
the functionality of each of them. 36
And then we can slot them in, like HTML elements, inside an overall structure keeping the code for our 37
web app incredibly clean and incredibly reusable and modular. 38
So these are all great things for programming clean code and creating apps that scale really well even 39
when it gets really big and complex. Effectively you can think of these components as different ingredients 40
that go into a burger and depending on what it is that you need, you can chop and change these components 41
and customize the components depending on what you need. 42
And this is achieved partly through mixing of the different types of files. 43
So I know that previously we've always tried to keep our HTML, 44
CSS 45
and JavaScript separate. But React does and what it really benefits from is actually combining small 46
amounts of each of these types of files into a single component so that each component has its own styling, 47
its own functionality that it controls, and you can create several of these components to each perform 48
a different function and have a different appearance. For example this is what enables the Twitter web 49
site to be able to load the feed screen without the rest of the page visibly updating at all. 50
You can see that this page is not refreshing. 51
It's only when you reach the bottom of the feed that it detects that you've reached the bottom and then 52
it makes a request to the server to populate this feed component with more data while the rest of your 53
app stays as it is without needing any changes. 54
This is also what enables websites to be incredibly interactive. 55
If you think back to the old days where we had Facebook and you had these requests, say friend requests 56
or poke requests or whatever it may be, you had to refresh the page in order to see the updates. 57
But these days it's all handled through notifications and we have each component listening for changes 58
in the server and updating itself and its own appearance and data and being able to talk to the server 59
independently. 60
So imagine if every single part of this Facebook website was its own component. 61
So the news feed is its own component, 62
each of the posts are its own component. 63
So if there's a new comment for example on a post, then that post will be have to update itself without 64
affecting any of the rest of the website. 65
And this really is one of the greatest things about the React framework. 66
Now the other really awesome thing that it does is it's able to re-render these changes really efficiently 67
and it does this by comparing changes, 68
so what we might call diffing. 69
So whenever a change happens, say a new piece of data comes in or the user does something, then it's going 70
to compare the new version of the DOM tree that you want to be rendered with the old version that's 71
already showing up and it will do this kind of spot-the-difference thing where it spots that 72
'Oh OK. 73
The only thing that's changed is that this input has gone from empty to checked. 74
So this is the only component that I'm going to re render.' 75
And this obviously is more efficient and will make your web app seem more interactive and much faster. 76
Now of course React is not the only frontend framework out there. So, why am I talking about React? 77
Well even if you look at this Google Trends chart which looks at how often people search for each of 78
these things, you can see that React has clearly overtaken Angular and Vue over the past two years. 79
And if you look at Stack Overflow surveys, the most popular web framework is currently React JS just 80
below jQuery. But that's not all because React is being used at loads of places that you might want 81
a job at, say Airbnb or Uber, Facebook, Netflix. And it's probably one of the fastest growing and most 82
in demand skills out there. 83
In fact if you look at indeed and you search for a job for full stack developer or frontend engineer, 84
very frequently you will see a requirement for React and Node, both things that we cover in this course 85
and is really important to know about. 86
I hope I've gotten you excited to learn this technology. 87
So without further ado, let's get started and see what it's all about and get stuck in 88
using React JS.