This content originally appeared on DEV Community and was authored by Hiep Le
Click ⭐ if you like the project. Pull Requests are highly appreciated ❤️
Github link: https://github.com/hieptl/netflix-clone/tree/main/advanced/netflix-ref
I'm Hiep. I work as a full-time software engineer. Most of my open-source projects are focused on one thing - to help people learn ?.
The repository helps you learn react ref by building Netflix. It means that you are learning react ref by building a real-life project. I will explain concepts in details. This post is the sixth part in my series and it is suitable for beginners.
If you feel the repository is useful, please help me share the post and give me a Github ⭐. It will make me feel motivation to work even harder. I will try to make many open sources and share to the community.
Preface
This course will help you to learn react ref by building Netflix. It means that you are learning by doing a real-life project.
Table of Contents
| No. | Topics |
|---|---|
| 0 | How to Run the Project. |
| 1 | Live Demo. |
| 2 | Introduction about the Creator. |
| 2.1 | Greenwich University. |
| 2.2 | Hitachi Vantara Vietnam. |
| 3 | Prequisites. |
| 3.1 | Softwares. |
| 3.2 | Technical Skills. |
| 3.3 | Materials. |
| 4 | Purposes of the Course. |
| 4.1 | Final Project. |
| 4.2 | Job. |
| 5 | React Ref. |
| 5.1 | What. |
| 5.2 | Why. |
| 5.3 | How. |
| 5.4 | When. |
| 6 | Apply React Ref to Netflix. |
| 7 | Conclusion. |
| 8 | References. |
Table of Images.
| No. | Topics |
|---|---|
| 1 | Figure 1: Apply React Ref to Netflix. |
0. How to Run the Project.
Step 1: Clone the project by using git clone or download the zip file.
Step 2: Open "terminal" / "cmd" / "gitbash" and change directory to "netflix-clone" and run "npm install" to install dependencies.
Step 3: Run "npm start" to run the fron-end project.
1. Live Demo.
- https://espg2.csb.app/login
- Username: demo@gmail.com
- Password: 123456
The login function was implemented by using React and React Ref. You can try to use the account above in order to test the feature. The result (authenticatd information) will be shown on the console log.
2. Introduction about the Creator.
2.1. Greenwich University.
GPA 4.0 / 4.0.
Machine Learning paper - Recommendation System - IEEE/ICACT2020.
Co-Founder / Mentor IT club.
2.2. Hitachi Vantara Vietnam.
Employee of the year.
Second prize - innovation contest.
Techlead - HN branch.
One of CoE Leaders (Center of Excellence).
3. Prequisites.
3.1. Softwares.
Install NodeJS.
An IDE or a text editor (VSCode, Intellij, Webstorm, etc).
3.2. Technical Skills.
Basic programming skill.
Basic HTML, CSS, JS skills.
Basic React skill. (If you want to learn about React, you can refer Learn React by Building Netflix: https://dev.to/hieptl/learn-react-by-building-netflix-1127).
3.3. Materials.
Html, css, js (source code) was prepared because I want to focus on React and share knowledge about React. Building html and css from scratch would take a lot of time.
README.md (the md file will contain everything about the course).
Netflix data will be used to import to Firebase. In this course, we use Firebase as our back-end service.
4. Purposes of the Course.
4.1. Final Project.
The course would help you have understanding about React and React Ref.
You could build the final project with end-to-end solution (front-end solution using React and back-end solution using Firebase).
4.2. Job.
- After finishing the course, you could get a job with fresher / junior position.
5. React Ref.
5.1 What.
- The ref is used to return a reference to the element. They should be avoided in most cases.
5.2 Why.
- They can be useful when you need a direct access to the DOM element or an instance of a component.
5.3 How.
In order to create ref in React, we have several ways:
React.createRef().
Ref callbacks.
useRef().
fowardRef().
5.4 When.
Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.
7. Apply React Ref to Netflix.
Figure 1. Apply React Ref to Netflix.
In the first part of this series, we built the login feature and save user's email and user's password by using state. In this part, we will get the input information by using ref instead of using state.
Step 1: Remove email, password state and create email ref, password ref.
// import react.
import { useRef } from "react";
...
const email = useRef();
const password = useRef();
...
1st NOTE:
As mentioned above, we have several ways to create a ref. In this article, we will use useRef to define a ref. Therefore we need to import useRef from react.
In LoginForm component, we define two refs email and pasword.
We need to get the email's value, password's value when clicking on "Sign In" button. Therefore, we need to attach the created refs to our input elements.
- Step 2: Attach the created refs to the input elements.
...
<div className="login-body__input mb-16">
<input ref={email} type="text" placeholder="Email or phone number" />
</div>
<div className="login-body__input">
<input ref={password} type="password" placeholder="Password" />
</div>
...
2nd NOTE:
In order to attach a ref to a input element, we need to use ref keyword.
After attaching the created refs to the input elements, the last thing that we need to do is to get the input values when clicking on "Sign In" button.
...
const login = () => {
const intputEmail = email.current.value;
const inputPassword = password.current.value;
// call firebase authentication service.
firebaseAuth
.signInWithEmailAndPassword(intputEmail, inputPassword)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
console.log(`signed in user`);
console.log(user);
})
.catch((error) => {
console.log(error);
});
};
...
FINAL NOTE:
- We get the values from the input elements, by using the syntax ref.current.value.
const intputEmail = email.current.value; const inputPassword = password.current.value;
- We can get the values from the input elements by using refs instead using state like what we did in the previous part.
Conclusion
In this course, we have learn about react-ref by building Netflix. I hope that you can apply react-ref to your projects. If you feel the project is useful, please help me share it to the community and give me Github ⭐
References
[1]. https://reactjs.org/docs/refs-and-the-dom.html
This content originally appeared on DEV Community and was authored by Hiep Le
Hiep Le | Sciencx (2021-07-24T13:06:34+00:00) Learn React & React Ref By Building Netflix. Retrieved from https://www.scien.cx/2021/07/24/learn-react-react-ref-by-building-netflix/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.