React JS hands on - Enjoy learning in a new simple way

You will learn how to install Node JS and build a new React JS project.

Follow the steps.

After creating the "React JS" you will find three folders (node_modules, public, and src).- public folder.

Let's take a quick look at the files.

After you create your new “React JS” project you will see the home page of the “React JS” default application. Let's dive into this application to figure out how is "ReactJS" works.

The question is, what the “React JS” Component is?

The simple answer is the functions that we have used in the previous lessons.

So when you hear “Component” in the "ReactJS" world, it means the functions you going to create. In this lesson, I am going to create some of the functions in the “index.js” file and render these functions as components.

In the last lesson, we created some of the components in "index.js", of course, this is not the best way to build our App. What if I going to need these components later for a different page or file? Importing "index.js" can cause a lot of issues.

So, in this lesson, we just will move the functions of the previous lesson from the "index.js" file to a new file I'll name this file "about.js", so we can import this file to any part of our App without problems.

It's time to learn how to use CSS style with "React JS".

Still, you can write the "CSS" into external files and import them. You have 2 ways to do that. The first is importing "The CSS" file as a regular style sheet, and the second is importing "The CSS" file as a module.

You can install "Bootstrap" in your "React JS" application in many ways, but I am going to use the easier one. Simply, you can install "Bootstrap" by the "Node Package Manager" NPM.

We going to use a commands window for the next steps, so remember, if "Windows" is your operating system, you need to open "PowerShell" or "Command Prompt" for the older versions, if "macOS" or "Linux" is your operating system, you can use "Terminal".

Welcome to our first project to practice what we have learned till now. Our project is a very simple website that has 3 pages (Home, About, and Products) built with "React JS" and "Bootstrap".

Let's take a look at the final result by following the link in the "Resources" Section.

You have 2 options to get this project on your device.

1st option, download the full package includes (React JS, Bootstrap, Font Awesome, and the project files) from the link in the "Resources" section.

We will focus in this lesson on the imported modules and how we can use them.

The "Item" component is responsible to display the different items of the website parts, such as (the logo, site name, the current year, etc), depending on the "name" attribute value.

Let's see how we can use this component in our project.

As I have mentioned before, the layout is distributed on three files every file has one component.

- Head in './theme/header.js'

- Footer in './theme/footer.js'

- Container in './theme/container.js'

In this lesson, we going to dive into each file of them.

The "Page" component displays the page content depending on the name's attribute value. Actually, this component has been built with the same idea as the "Item" component.

Starting from this lesson, we will use the project we have done to test the coming examples, so I recommend downloading the full project first by following the link that in the "Resources" section.

In this lesson, we will dive into how to build conditional code with "React JS". To build javascript applications, you need the "if" condition many times to direct your application which path must take, depending on some of the conditions. In "React JS" it will be the same, but you need to know how to use the conditional with the "React JS" syntax.

In this lesson, we will cover how to use the list or "arrays" with "React JS". Usually, in JavaScript, we use the "for" loop with the arrays to print the items or search for a value.

With "React JS", we going to use the "map" function, if you already used it before, this lesson will be easy for you.

Events are a way to interact with users, it stands out when we click on a button, choose from the select box, or move the mouse. Which is mean every action we do could be an event. Now, let's find out how to use the events with "React JS".

Usually, In HTML we use hyperlinks to switch between the pages. The most common use for hyperlinks is building the site menu in the nav section.

In "React JS", the router is an imitation of the hyperlinks. As you noticed, in "React JS" we are using components to display the contents instead of the actual files, so, we will find out in this lesson how to jump between the components and handle them as pages using the router.

In this lesson, we will use the Router to activate the site menu so we can change between the pages (Home, About, and Products). Highly Recommended: Review the previous lesson to know how the "Router" works.

Hooks simply are some of the features we can use with the components.

Let's take a quick view!

In this lesson, we will start with the first "Hook", called "useState". The "useState" hook, allows us to inject some of the data on the page in the run time.

Check the example by following the link in the "Resources" section.

The "useEffect" hook, use to perform actions on your component. For example, you can use it to update the DOM, create a timer, and fetch data. Let's check the components for this lesson to clarify how the "useEffect" works.

Check the example by following the link in the "Resources" section.

If you going to use nested components and you want to share values with them, so, it's "useContext" hook time! But what nested components are mean? Let's start with our example to find out.

Check the example by following the link in the "Resources" section.

The "useRef" hook, you can use it to in many cases, such as tracking values, and access to the elements.

Check the example by following the link in the "Resources" section.

The "useReducer" hook is like the "useState”, it is used to store or update one or more states. the "useReducer" accepts 2 parameters, the first one for the function, and the second for the default state's value.

Check the example by following the link in the "Resources" section.

When you render any of the components, you rebuild this component with its parts. Some of these parts may affect the performance of every render. To avoid that we can allow those parts to be rendered just one time and avoid being rendered next time. To do that we can use the "use Memo" hook, this hook such a cache to store the result

Check the example by following the link in the "Resources" section.

Every time we render a component, the functions that are included in this component will be recreated as new functions in the memory, and of course, that will affect the application performance. To solve this problem, we need to prevent the creation of the same functions in the memory unless returned with new values. To do that, we can use the "useCallback" hook, it's similar to the "useMemo" hook, the difference is "useMemo" stores just the value, while "useCallback" stores the entire function.

Check the example by following the link in the "Resources" section.

In the previous lessons, we have learned about the built-in hooks in React JS, and we have figured out it is just reusable functions, so simply we can create our own hooks and use them many times in different projects. We have just one rule to create a custom hook, just add the "use" word in the lowercase before the hook's name, for example instead of "Time" supposed to be "useTime".

Check the example by following the link in the "Resources" section.

Since we started our course and we use our devices as a server to host the project, in this case, those devices are called localhost.

This means we can access the website that we have made with "React JS" directly from the same device or from any other device connected to the same network.

But still, no one can get access to our "React JS" App through the Internet.

In this unit, we will cover how to deploy our project online so anyone can visit and use our application.

Let's take a quick view of the plan.

1 - Will know about the 2 options to deploy the app.

2 - Get the VPS server.

3 - Overview of the SSH & FTP.

4 - Set the server and install the required packages.

5 - Convert the "React JS" project to the production edition.

6 - Upload the production version to the server.

7 - Run the server and deploy the "React JS" App.

This lesson will cover the two options to host and deploy the application, and what is the best and easiest one.

There are a lot of companies providing VPS services. Different offers and prices, but I'll show you how to get a VPS server for $6 a month.

The best thing is, you can specify the features you want for the server and based on that will give you the price.

Let's start.

This lesson will take a quick overview of the SSH and FTP Protocols, so we can use them in the next lessons.

In this lesson, you will learn how to access the VPS server over SSH protocol using the root account, and do some stuff to prepare our server to be ready to host our "React JS" App.

In the previous lesson, I prepared the server, and it's ready now to install the "node js". There are many ways to install "node js" through the command line, I'll use the NVM package to install the node js.

Let's start!

The production version is the outcome of your project. The difference between the production version and the development version is the code of the production version is encrypted and not easy to understand.

In this lesson will learn how to build the production edition, and upload it to the server using FileZilla.

Welcome to the last step to deploying our "React JS" application online. There are many options to keep your application running on the server.

But I have chosen the simplest one, MP2 is software to manage the deployed applications on the server.

So you can run multi applications on the same server using different ports.

Let's start!

Very glad to see you here! it means you did it!

This is the last video for this course, but it's not the end of the journey.

Keep learning, practicing, and searching for what is new.

You must appreciate what you have now, and use it to improve your skills, life, and yourself.

And never say "This not enough to start".

If you gonna say it, remember that is not you. It's your fear told you that, to remain jailed.

And remember!

Why do we fall?

So we can learn to get back up.

Finally, Keep the magical 3 letters in your mind.

SLP

Search, Learn, Practice, and you can reorder them as you need.

See you in the next course.

Enjoy the rest of the day.