Up next in 10
ReactJs Learning Guide
803 views
Feb 6, 2024
The "ReactJS Learning Guide" video serves as a comprehensive resource for individuals looking to learn ReactJS, a popular JavaScript library for building user interfaces. It likely covers a range of topics including the basics of ReactJS, essential concepts such as components and state management, advanced techniques, and best practices. Additionally, it may offer insights into useful tools, tutorials, and learning paths for mastering ReactJS effectively. The video aims to provide a structured approach and valuable resources to help viewers navigate their ReactJS learning journey efficiently and successfully.
View Video Transcript
0:00
Just go ahead and skip that comprehensive, everything you could possibly learn about React
0:05
encyclopedia type course or book. Instead, you should focus on learning the most common and useful parts and then go ahead and
0:12
pick up that other weird stuff later as you need it. That is, if you even need it
0:16
Now, if you actually want to get a job building web applications with React, then here are
0:21
the core concepts that you should know. First things first, let's start the quick crash course in React and how to use it
0:27
You see, React is a declarative library for building. applications. But you know, what does that even mean? It's just basically a fancy way of saying
0:34
that you write some code that says what you want to have happen and that the library does that for
0:40
you. For example, React uses something called JSX. It looks similar to HTML elements
0:45
but they aren't actual DOM elements. And when you write JSX code, you're pretty much saying that
0:50
I want to end up with a div element that has this stuff inside it. React then handles rendering
0:55
this into React DOM. It's going to handle all of that DOM stuff
0:59
you. This makes it super easy to build templates that combine JavaScript logic with the presentation layer
1:05
All of this is contained in something called a component. When you're starting out, instead of trying to put together all of the project configurations yourself, I highly recommend that you use something like Create React app or VGIS or some similar tool. They'll help scaffold the application. This makes it super easy to get a basic application up and running. And then you can go ahead and update those configuration files down the road as you need it
1:28
Another thing to remember is that whenever you're going to use JSX inside of a file, you need to import React in the top of the file to let React do its thing
1:37
Because JSX isn't actual DOM elements, we can do some really cool things using JavaScript expressions inside of the JSX
1:45
Instead of wrapping DOM element attributes in double quotes, we can use curly braces and then reference JavaScript expressions inside of those curly braces
1:54
Okay, so what the heck is a JavaScript expression? It's just a piece of code that is going to be evaluated to some value
2:00
In this example, we are assigning a string with some text to a variable
2:05
If we then were to take and put that same variable name inside of the curly braces in the JSX
2:11
when the JSX gets rendered, you won't see the variable name there
2:15
On the page, what you will see is the text string that was assigned to that variable
2:19
This means we can also do other stuff with JavaScript inside of JSX
2:23
and this is why some attributes are different from what you can
2:26
you would expect. For example, you'll see that the attribute for using CSS is class name in
2:33
JSX instead of just class. There are a couple different ways that we can do components in React
2:37
but let's take a look at a functional approach and later on we can talk about class components
2:41
So we're going to be starting with a function and inside of this function we need to return some JSX
2:49
Now we can then take this function component and we can use it inside of other JSX components
2:56
as well. A quick little gotcha is that the JSX being returned needs to be wrapped in a single
3:01
JSX element. This first example is going to work just fine. But if we were to try to return to
3:07
sibling elements, then that is not going to work. We're either going to need to wrap this in like a div
3:13
or we could even use this odd looking empty JSX element Otherwise React just isn going to be happy Another gotcha is that the user components must be capitalized
3:23
If you also name the component function with the capital letter, it just makes things super easy because you can just import that component
3:30
and use it without having to rename it to something that does have a capitalized name
3:35
This is a simple example, but what if we want to pass something into the component
3:39
like you do with regular functions? We do this through something called
3:43
And to pass data in through props, we simply just create an attribute on a JSX element and then pass in some expression
3:51
For example, if we added a name attribute and passed in a variable with the string dev smack, we can now access that inside of our component through the props object
4:02
That object is now going to contain a property called name. And guess what
4:07
We also have access to other common attributes like class name, on click, and stuff like that
4:13
And when we do create props attributes, we can pass in primitives and objects, arrays, and even functions
4:18
It's perfectly fine to have a React component with just the trailing slash and then pass everything that you need in through props
4:26
Now, you could also wrap some text or some other JSX elements with both an opening and a closing tag
4:32
And that's fine too. And then those contents or the children will be available to you in the props object on the children property without you even having to create
4:43
a children attribute. To help us know what types of props we are expecting, we can import prop types and that we
4:49
can define what each prop looks like and whether it's required or optional
4:53
If something is wrong, then we'll get a nice little message in the browser console
4:57
Similar to prop types, you can also set the default prop values if you want
5:02
And then it's also worth noting that if you were to add an attribute but you didn't pass anything
5:07
to it and you didn't have any default props, then it is going to receive a default value of true
5:12
It's a pretty common pattern to see just an attribute without anything passed in
5:17
You can also take a spread operator and take the props from a parent component and pass that to the child component
5:25
So let's assume you have a list of objects that includes a text string and you want to render each of these text strings as a paragraph inside of another component
5:35
Well, let's pass this in and we're just going to call this attribute list. And then inside of this component, we can do some really cool
5:42
cool stuff like iterate over this list using the map method from an array and we can return a list of
5:50
JSX elements that's pretty cool but React does a lot of things behind the scenes to handle fast
5:56
efficient updates and when things change it really needs to know how to identify the items in the
6:02
list or else it can get kind of confused and weird things can happen to avoid these problems when
6:06
rendering lists we need to make sure that we always add a key attribute to each element
6:12
in that list. And this needs to be a unique string. If there are duplicate keys, then you're going to run
6:18
into some really weird problems. Well, that's cool. But what if we only want to show this list
6:22
if we actually have a list? Well, here is one of the most common patterns for conditionally showing or
6:30
hiding JSX elements Now it is JavaScript so you could also use the ternary operator and that could make more sense in some cases And one of the reasons that some people prefer a full framework like Angular is because there is a more rigid set of ways to do things
6:46
Whereas with React it's a smaller library and the way to do things is just much more open-ended and can vary from project to project
6:54
For example, the first part of this video has been focused on functional components, but there are also class components with
7:01
a completely different structure that aligns more with an object-oriented approach. These components have a number of different life cycle methods, and the way that you manage
7:11
state with set state is going to be different than you would inside of a functional component
7:15
And this can make it challenging when you're starting out because there are a lot of decisions
7:19
that you're going to have to make when you're working with React. A lot of projects have been moving over to a more functional approach thanks to something called React hooks that make
7:28
functional components much more powerful. And we're going to be a more powerful. And we're going to be moving over to a more functional And we're going to talk about that more in a minute, but a ton of projects out there use class components
7:36
And some of these projects are going to be a mixture of the tube because hooks are also backwards compatible
7:42
I personally recommend starting out with the functional approach, but I do think it is important to also become familiar with at least the basics of the other common patterns
7:51
The remainder of this video will be more of a roadmap of the things that you should learn
7:55
Now, there are multiple learning paths that you could take, so don't view this as the only path
8:00
And if I happen to leave out your favorite topic, just drop your thoughts in the comments below
8:05
Okay, so let's talk about managing state in functional components. There are two pieces to this
8:10
Sometimes you want to store data and make it available across the entire application
8:14
There's also state that's going to be more specific to a particular component
8:18
There are a bunch of different approaches of how and where to store state. One common pattern has been the smart component, dumb component approach
8:25
You would have some parent component that handles getting the data, storing the data
8:30
doing all the busy work, and then you try to keep the children inside of it as dumb as possible
8:36
A dumb component just means that it receives data through props and doesn't do much other than display stuff
8:41
It doesn't have to do like side effects, like calling APIs or anything like that
8:45
And if there is a button that needs to be clicked and some function needs to be called
8:50
well, that function is passed in to the child dumb component from the parent
8:56
That's great and all. But as applications grow and become more deeply and more deeply nested
9:01
passing props into one child component that then passes that data down into another and into another becomes a real pain and is called prop drilling
9:09
What if you want to have some central place to store data and then when it changes, make that available to just the components that actually care about it
9:17
skip all of that prop drilling. A couple of common approaches to this are through React context or using a third-party library like Redux
9:25
There are pros and cons like added boilerplate, but sooner or later, you're going to end up needing some way to handle this and manage the state, so you should become familiar with React context, as well as some library like Redux
9:38
When it comes to component state for the longest time we usually relied on class components so that we could use set state and when that state changed on that component it would then trigger updates for the child components Now we can easily manage state and functional components using something called React hooks And there are a bunch of different hooks available and there one specific to state called use state You should learn how to use this as it is by far the most common and most useful hook
10:05
It greatly simplifies managing component state. There's also another common hook that is used for
10:11
handling anything that is going to have side effects like making API calls as well as cleaning up
10:17
the component before that component is removed from the page. and that is called Use Effect
10:21
If you decide to use React context, there's also a use context hook
10:26
And then if you go with one of the recent versions of Redux, you'll also have access to the use selector and use dispatch hooks
10:32
These remove a lot of the annoying boilerplate, where we used to have to wrap components to be able to dispatch functions
10:39
and the hooks just are way easier to use. React also has a bunch of other hooks that you can use to do things like memoization
10:46
and you can look those up as you need them. You can even create your own hooks
10:50
And there are some rules that are important to know about using hooks. For example, you should only ever use them at the top of your component
10:56
You should never use them inside of a condition or inside of a loop
11:00
And they should only be used inside of React functional components. They can't be used in just any old function
11:06
With React, you're also going to have to figure out the pattern that you're going to use for making API requests
11:12
Some people go with the native JavaScript fetch API, and then they build their own utility functions to handle adding
11:17
headers and responding to errors. I typically use a library called Axios that provides a lot of
11:23
those utilities already baked in. Whichever route you take, you're going to have to do things
11:27
to prevent making duplicate API calls to store the response and to trigger the component updates
11:33
once you've received the data. With Redux, that might look something like dispatching an action
11:38
that triggers an API call, that then updates the Redux store and then triggers the components
11:43
to update that are watching for those changes. Eventually, your application is going to
11:47
need a way to handle page navigation. React Router is the most popular library for routing
11:54
React applications. If you use a tool to scaffold your application, it's likely that it already
11:59
has React Router included. You should learn how to create routes, how to trigger route changes
12:05
and how to use route parameters. Here are some more things that you need to learn. You need to
12:09
know how to use forms inside of React, and that includes how to handle state when you are
12:13
using controlled and uncontrolled form fields. You also need to know how to
12:17
debounce input changes inside of functional components. That way you are maintaining performance so that your components and your rendering just doesn't
12:26
completely get bogged down every time someone types in a letter in a search bar
12:31
You also need to know the different ways to use CSS inside of JSX
12:36
There are different ways that you can import CSS classes so that you have access to the styles
12:41
globally or to keep other ones scope to a particular file. and this can vary depending on the tool that you use to set up your application
12:49
A couple bonus items that you could learn to boost your marketability are internationalization
12:54
and accessibility with React. Now, React is just one aspect of building web applications
13:00
To get a really good paying job as a frontend developer, you need to know a lot more than just React
13:05
which is why I created this front end web development roadmap video that you should definitely watch next
13:10
Thanks for watching and I'll see you in the next one. Lates