React Portfolio Website Tutorial From Scratch | Responsive Portfolio Website Using React JS

Learn React JS Completely from scratch in this 2:30hrs Crash Course. This course is designed specially for new web developers, who just started to learn react js. In this course we will build a complete portfolio website using react js.

In this course, we are going to learn -
1. React ES6 Basic Syntax.
2. React Render HTML.
3. React JSX essential Syntax.
4. How to use React Components, Class, Props, Events.
5. React Conditionals.
6. React Router.
7. React Hooks such as - useState, useEffect, useCallback, Custom Hooks.
8. Most importantly we will learn the Best File & Folder Structure you should follow..... and much more.
By building our react js portfolio we will try to cover all these topics.

📚 Materials/References:

SUPPORT ME:

How To Make MONEY Online - My 4 Favorite Tricks:
🕔 Next trick will be revealed at the right time.

Free Course to Improve SKILLS & EARN:

Important Links:

DISCLAIMER: This description contains affiliate links. Which means I may receive a small commission on affiliate links used. This helps support the channel and allows us to continue to make videos like this. All content used within the parameters of fair use.

===============================
Connect with me & get daily updates👇
===============================

Timestamps:
0:00 Start
1:09 Portfolio Website Preview
3:17 Install React JS
4:46 Folders & Files Overview
6:27 Lets Organize The Folders & Files
8:20 Install React Packages
12:05 Creating Route Pages
20:19 Responsive React Navbar
48:20 Home Hero
1:01:27 Change Nav Background on Scroll
1:06:27 Footer
1:19:41 Render Components in different Pages
1:22:11 Learn Dynamic Components
1:36:31 Pricing Card
1:47:28 Dynamic Card Component
2:14:07 About Component
2:24:30 Contact Form Component

#reactjs #reactcrashcourse #reactportfolio

[Techetc]

Hey Everyone! Hope you are enjoying this course. ✅
If you do then please subscribe this channel and help me to react 100k Subscribers GOAL.🔥

Timestamps:
0:00 Start
1:09 Portfolio Website Preview
3:17 Install React JS
4:46 Folders & Files Overview
6:27 Lets Organize The Folders & Files
8:20 Install React Packages
12:05 Creating Route Pages
20:19 Responsive React Navbar
48:20 Home Hero
1:01:27 Change Nav Background on Scroll
1:06:27 Footer
1:19:41 Render Components in different Pages
1:22:11 Learn Dynamic Components
1:36:31 Pricing Card
1:47:28 Dynamic Card Component
2:14:07 About Component
2:24:30 Contact Form Component

[suchetapal]

Hi, I replicated this portfolio site from scratch by coding along. It was quite easy to understand. Now I have my first portfolio website using react. Keep posting more projects using react. Thanks a lot.

[pam_prunelle]

Also, without changing the structure of the HeroImg2 arrow function - at 1.33.49- -, you can directly add the component properties like this: const HeroImg2 = ({ text, heading }) => {
return (
<div className='hero-img'>
<div className='heading'>
<h1>{heading}</h1>
<p>{text}</p>
</div>
</div>
);
}; - Thanks for your work !!! it's awesome!

[yolouolo]

This is the best beginner friendly react course. Thank you

[codewithswarnodip]

This is the best beginner friendly react course. Thank you ❤.

[vinaypatil]

OMG what a underrated channel

Please sir
Bring more javascript and React
Project from scratch

[shivanirai]

Your explanations is too good... I like your way to explain small things properly....

[roshankalamkar]

at 1:33:35 u can add this it will work

const Heroimg2 =(props)=>{
return(

<div className="hero-img">
<div className="heading">
<h1>{props.heading}</h1>
<p>{props.text}</p>
</div>

</div>
)
}

export default Heroimg2;

[dressoudressou]

I’ve completed whole this project.
And by the way, learned so many
Thank you so much, it was really helpful.

[WildHowlYT]

The final product looks brilliant, good job :)

[ruki]

You made me understand components only with a fee sentences. Great work. Thank you

[harshalnikam]

ThankYou very Much, one of the best video ...for begginer to learn from scratch. Iam glad i got to learn bit by bit from this video .Otherwise remaing channel are just copy pasting bootstarp and github. thanks a lot

[DanieleManca]

I like this tutorial, however I wanted to point out that in order to have props for the Hero Image component, it was not necessary to have a class component. You could have kept the component as functional and destructured the props you need, say heading and paragraph, see below:

const HeroProject = ({heading, paragraph}) => {
return (
<div className="hero-img">
<div class="heading">
<h1>{heading}</h1>
<p>{paragraph}</p>
</div>
</div>
)
}

[bashacademy]

This is a great video... If there is a way to like this video multiple times, trust me I would. God bless you man....

[bairi]

I had a idea so iam testing it through the website the purpose of the site is about providing the information about offers across various platforms and also announcements of buss, tech, govt.

[nihay]

Thank you for this amazing tutorial! Really helpful and beginner friendly!

[asutoshroy]

This is an amezing project for beginners, strongly recommend to everyone, and lot of thanks and love bro I have made my protfolio website help of this.

[codewithAbdulMumin]

wow wow wow!!!. Amazing 👏 you are an angel sent directly from heaven.

[notappi]

thanks sir for providing such educational vedio a lot of my foreginer friends also watch your vedios they say u teach very slowly and in a frinedly manner thanks a lot. u making us indians proud and JAI HIND

[Cgggg]

Excellent, very clear tutorial! Thank you!