1
00:00:01,280 --> 00:00:02,510
Welcome back.

2
00:00:02,750 --> 00:00:08,870
I want to take one video to just go over thing that might trip up a lot of people when they're first starting

3
00:00:08,870 --> 00:00:19,830
off with React. Remember, React is only a view layer library. Thus React only enables you to build component

4
00:00:19,920 --> 00:00:29,720
driven user interfaces. And, it has some solutions, such as its own local state management, and a simple

5
00:00:29,720 --> 00:00:34,040
way to handle events to make interactions on our website happen.

6
00:00:35,440 --> 00:00:40,110
But at the end of the day, it's a simple library that helps with the view.

7
00:00:40,360 --> 00:00:48,430
Once you start building large scale applications, you need to add on top of React.

8
00:00:48,700 --> 00:00:55,630
The power of React comes from this ability to tack on new features, new libraries to it. In order to

9
00:00:55,630 --> 00:00:59,520
customize it, to your own liking to your own app.

10
00:00:59,660 --> 00:01:08,270
So, as applications grow or you start working for a large company, you'll see them use some other tools

11
00:01:08,360 --> 00:01:14,810
on top of React. And I wanted to go over quickly, some of the ones that are the most common, common to see

12
00:01:14,810 --> 00:01:16,270
out there.

13
00:01:16,300 --> 00:01:20,710
We first have 'REACT ROUTER' and that is for routing.

14
00:01:20,890 --> 00:01:29,080
So changing pages and changing routes in our url, it's pretty much the standard, when it comes to any React and

15
00:01:29,080 --> 00:01:30,190
Redux project.

16
00:01:30,520 --> 00:01:32,930
So highly highly recommended.

17
00:01:33,100 --> 00:01:35,010
Very easy to use.

18
00:01:35,320 --> 00:01:36,650
Very easy to learn as well.

19
00:01:36,700 --> 00:01:39,640
It'll take you a day and you can pick it off fairly easily.

20
00:01:41,160 --> 00:01:49,650
You also have things like utility libraries. And these are libraries that add to the current javascript

21
00:01:49,770 --> 00:01:52,440
tools, that you get out of the box.

22
00:01:52,440 --> 00:01:56,740
So think of it as added functions to javascript.

23
00:01:56,950 --> 00:01:58,720
The most popular are 'Ramda'.

24
00:01:58,810 --> 00:02:06,080
If you wanna really keep the functional programming ideology, a really really good library. And there's

25
00:02:06,100 --> 00:02:16,690
also the most popular 'Lo dash', which again gives you extra tools that you can use with javascript. You also

26
00:02:16,820 --> 00:02:20,570
want to think about styling with React.

27
00:02:20,630 --> 00:02:27,380
And again, there's a number of tools that people use for styling. There's 'glamorous' which I really really

28
00:02:27,380 --> 00:02:28,170
like.

29
00:02:28,250 --> 00:02:35,480
There's, 'styled components' which again is very nice, and quite similar to 'glamorous'.

30
00:02:35,570 --> 00:02:38,520
And then there's things like 'CSS modules'.

31
00:02:38,630 --> 00:02:46,490
Let's say, these three are probably, the best to use, if you want to tack on a smarter way to deal with

32
00:02:46,580 --> 00:02:47,830
styles in React.

33
00:02:47,870 --> 00:02:50,300
And again, these are quite easy to pick up.

34
00:02:50,300 --> 00:02:52,720
You can spend a day on them and get the hang of it.

35
00:02:53,860 --> 00:02:57,490
Next, we have something called the 'gatsby dot js(gatsbyjs)'.

36
00:02:58,060 --> 00:03:02,980
And, this is really really good for static web sites in React.

37
00:03:02,980 --> 00:03:06,340
So that is simple text based websites.

38
00:03:06,460 --> 00:03:08,920
Actually, if you go to the React documentation,

39
00:03:18,840 --> 00:03:28,110
their documentation is actually served with 'gatsby dot js(gatsbyjs)', because well they're just simple text based

40
00:03:28,860 --> 00:03:29,640
pages.

41
00:03:29,760 --> 00:03:31,310
That works really really well.

42
00:03:33,430 --> 00:03:35,710
Then there's also 'Next

43
00:03:35,750 --> 00:03:41,510
dot js', extremely popular for server side rendered apps.

44
00:03:41,740 --> 00:03:45,490
And that's something that we'll talk about when we get to the server side section. And we'll actually

45
00:03:45,490 --> 00:03:52,330
build a simple 'Next.js' app. But very popular and I highly recommend if you're building anything

46
00:03:52,330 --> 00:04:00,040
server side. Next probably what React is known for and I just picked two options here but there are

47
00:04:00,040 --> 00:04:01,230
so many out there.

48
00:04:01,230 --> 00:04:05,920
React is really really good because we're able to build reusable components.

49
00:04:05,970 --> 00:04:12,270
So, if I build a really cool calendar component, I can put it online and other people can just grab that

50
00:04:12,270 --> 00:04:15,800
component, and use it in their projects as well.

51
00:04:16,769 --> 00:04:23,610
So some of the bigger ones are 'material', 'material ui' components, that again you can just use.

52
00:04:23,820 --> 00:04:33,940
And there's also the 'semantic ui' library that has a ton of React components that you can use.

53
00:04:34,050 --> 00:04:41,760
Again, another awesome reason to use React is, these components that people share. And you can just add

54
00:04:41,760 --> 00:04:44,510
on to your website.

55
00:04:44,670 --> 00:04:49,810
And then finally there's tools that make Redux better, more efficient.

56
00:04:49,980 --> 00:04:56,310
You have things like, 'reselect', that you'll see in most Redux projects that help with something called

57
00:04:56,310 --> 00:05:01,620
selectors, and improve the performance of your apps.

58
00:05:01,650 --> 00:05:09,240
You also have things like 'Redux-Saga' which, which handles asynchronous actions in Redux.

59
00:05:09,240 --> 00:05:16,080
So, think of it as redux-thunk but supercharged. So as things get more and more complex, you have

60
00:05:16,080 --> 00:05:18,510
more and more asynchronous actions,

61
00:05:18,510 --> 00:05:23,040
you might wanna start looking at things such as 'Redux Saga'.

62
00:05:23,040 --> 00:05:25,840
It is a little bit complicated to learn it first.

63
00:05:26,100 --> 00:05:28,500
And, there's people that love it and hate it.

64
00:05:28,500 --> 00:05:32,650
But definitely something that tries to solve the problem of

65
00:05:32,670 --> 00:05:36,200
what do we do when we start getting bigger and bigger and bigger apps.

66
00:05:36,510 --> 00:05:43,950
And then, you also have something like 'IMMUTABLE' js, that you can use as a library to make sure that

67
00:05:43,950 --> 00:05:49,260
your state remains immutable and enforce that among your developer teams.

68
00:05:50,300 --> 00:05:57,310
Now, I don't expect you to know every single one of these, and use every single one of these in your projects.

69
00:05:58,420 --> 00:06:04,510
As a matter of fact, I want to caution against them. And every time you add something, ask yourself, do

70
00:06:04,510 --> 00:06:05,710
I really need it?

71
00:06:05,710 --> 00:06:08,390
What's the benefit that I'm getting out of this?

72
00:06:09,640 --> 00:06:17,020
Because adding any library to our project, adds extra weight, adds extra javascript that we need to deliver

73
00:06:17,020 --> 00:06:17,960
to the client.

74
00:06:18,340 --> 00:06:26,140
So make sure, if you're adding any of these things, that you have a justifiable reason that actually improves

75
00:06:26,230 --> 00:06:29,370
the value of your product.

76
00:06:30,290 --> 00:06:32,820
And it also helps with the development.

77
00:06:32,840 --> 00:06:38,930
So when you think of value, don't just think customers and users also think of developer teams and

78
00:06:38,930 --> 00:06:44,970
people you work with. Are they going to benefit if you add 'IMMUTABLE' js to your codebase.

79
00:06:45,260 --> 00:06:52,730
Or, is the extra learning curve and the frustration that, that developers might have by using 'IMMUTABLE', worth

80
00:06:53,060 --> 00:06:57,170
the safeguards that it might add to your project.

81
00:06:58,010 --> 00:07:05,780
But anyway, I wanted to emphasize that, as a senior developer, always consider pros and cons, whether you

82
00:07:05,780 --> 00:07:13,940
need something and if you do need something, really analyze, what is the best tool for the job.

83
00:07:13,940 --> 00:07:15,280
I feel like I'ave broken a record.

84
00:07:15,290 --> 00:07:22,700
I've said this numerous times but, it is a really important concept. So dont just add 'IMMUTABLE' js because

85
00:07:22,880 --> 00:07:26,470
you read it in a blog post, then everybody's raving about it.

86
00:07:26,480 --> 00:07:32,480
Each project is different, so you need to be able to make those decisions for yourself, for your project

87
00:07:32,510 --> 00:07:33,940
for your developer team.

88
00:07:35,690 --> 00:07:40,100
All right, enough talking from me, I'll see you in the next one. Bye-Bye