Full React Tutorial #5 - Multiple Components

Подписаться 1,5 млн

Просмотров 353 тыс.

50% 1

Hey gang, in this React tutorial we'll see how to add additional components to our React application (a navbar component and a homepage component).
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Опубликовано:

22 дек 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 184

@SideOfHustle 3 года назад

Definitely support this guy. It's a dollar a month and he deserves it.

@NetNinja 3 года назад

Thank you so much :)

@scattered_data Год назад

First React tutorial which actually makes sense and has the right pace for beginners!

@sireenibnukabeeer4613 Год назад

If you get blank page while using the NavBar component to App, Just import React to the NavBar component import React from "react"; //importing react is important const NavBar = () => { return ( The Dojo Blog Home New blog ); } export default NavBar It'll work, also you must capitalize as above ( NavBar instead of navBar).

@davidmbugua5970 Год назад

you are a lifesaver. Thanks

@ghwhg341 Год назад

saved my life

@Gamebuger Год назад

Thanks man, had the same issue with Home.js

@vaneliot 3 года назад

Whoa, I actually still keep revisiting your older React content, and now new stuff are on the way! Thanks for these, man. Your channel is one of the reasons why I got into web development. Inspiring craft.

@adrinan456 3 года назад

The Net Ninja > all youtubers

@triunduo4410 3 года назад

lol

@ChandanKumar-of1je 3 года назад

@@triunduo4410 hahah..

@mohithp8700 Год назад

@@ChandanKumar-of1je hehehhe

@appleid3223 Год назад

You’re at 69 likes. I won’t mess it up I promise.

@maskman4821 3 года назад

Recap 1. we install 'Simple React Snippets' plugin to faciliate building process 2. to generate react component boilerplate in no time, we simply type sfc and press 'tab' key 3. we don't need to manually type 'import component from component-path, we enter

@mikeg12345 4 месяца назад

I'm just parroting what's already been said, but your tutorials are the best on RU-vid. I've used your tutorials through the years, and you've nailed the tone, pace, level, etc. Thank you for the content!

@vruttantbalde7187 3 года назад

this guy is unstoppable, let's go! Thanks for the tuts :).

@camenraidercc6625 3 года назад

i'm glad you are doing these "revamped" tuts, this is real dedication!

@thangzathang9100 3 года назад

We've got to keep liking these videos to give Shaun the attention he deserves!

@louisgirardin2030 3 года назад

Keep the Christmas gift flowing ! Thx for taking the time to share your knowledge with us.

@mcvgs1780 3 года назад

Please continue this series. Your content is amazing.

@Phas0ruk 2 года назад

You are amazing. Finally someone who can actually just tell it like it is. Excellent. Thank you!!!

@mpho438 2 года назад

It's amazing how You are doing also doing all this for free. Great explanation, great clarity of the content.

@noobyxd 2 года назад

Your explanations is unmatched! Keep it up!

@hpottstock 3 года назад

Well, that was great. Cheers man. Looking forward to watching the rest of the course!!

@sarpwisegamgee 3 года назад

Great course as always. Thank you very much and merry Christmas Shaun.

@soulju9144 Год назад

Seriously, the little comments on nearly everything you do helps so much. This probably seems simplistic but I wasn't sure how to word "./" basically means "current directory". So the things I was used to doing because they worked are now being done with purpose

@justnumber5197 3 года назад

YOUR ON FIRE🔥🔥🔥🔥🔥🔥!!! YOUR MAKING CONTENT NONE STOP!!! I CANT KEEP UP THANK YOU SO MUCH Net ninja!!!!

@promiseigbosonu1455 Год назад

You are the best buddy.. your lessons just sinks in right away

@lukaszrogut8373 3 года назад

You are a true Champion. Thank you for your golden work

@jawaidakhter08 3 года назад

first time watched all videos at once. waiting for other videos .... Great work

@rahim6548 3 года назад

thanx for the new react tutorial just when i needed it!

@mamartinezmejia3657 2 года назад

Thanks for posting this video!!! It was really helpful!

@tomevans5062 11 месяцев назад

These are the best React vids on RU-vid.

@abhilashtyagi6536 2 года назад

This guy made my day n life ... Thanks God save my life... Thanks shaun for such a Good explanation :)

@KS-sg9rm 3 года назад

Thank you for all the knowledge you are sharing with us. Are you planing to include redux toolkit aswell in this playlist? Any plans for some more advanced projects (even paid ones) with react, some state management and, let's say firebase or some other backend solution?

@faqihmadani7513 3 года назад

Awesome tutorial, cant wait for other videos! :)

@chaitanyagupta6668 11 дней назад

Just amazing, coming back after long time and still as useful. Thanks bro!

@NetNinja 11 дней назад

Welcome back! :) glad it was helpful

@PlasticFood124 3 года назад

Waiting for the whole playlist to be ready so I can begin, my curiosity won't let me anticipate

@HopingforPower 3 года назад

Wow these videos are great. Thank you for making them

@HaiderAli-oi5fm 3 года назад

Hi Shaun. You are simply the best. I wonder if you could do a tutorial on dropdown, not just dropdown but a dropdown inside dropdown by simple and easy approach. I know there are lot of tutorials out there but you make things simple and easy to understand. Please fellas like this comment so it reaches to Shaun.

@codedynamics1 3 года назад

woah, React is badass thanks Shaun 🙌 Great tutorial 😁

@efeokamonu3359 2 года назад

Thanks Shaun this content was so helpful.

@thekrasa1970 3 года назад

Only channel I've ever become a member at. Helped me tons!

@NetNinja 3 года назад

Thanks so much!

@souravkumar6269 3 года назад

well thanks for this newly fresh 2020 react course:)

@louis9116 2 года назад

This guy is proof that you don't need to sit through 9 hour videos to learn React.

@sqk444 3 года назад

Great Job, Keep it up. Amazing !

@akromxujaniyozov7050 3 года назад

Hello Shaun, thanks for the best tuts:)

@daniidev 2 года назад

you're so good bro! Thanks for this video!

@mohammedmahmood9813 9 месяцев назад

sir, thans a lot lot, i have no words to say how beautifully you explained just like water flowing freely without any barriers

@NetNinja 9 месяцев назад

You are most welcome :) thanks for watching

@kc2838 3 года назад

Great tutorials!

3 года назад

You tube da gördüğüm en iyi react anlatan kişi :)

@mahdiabolghasemi189 3 года назад

lovely course, thanks a lot

@michaelantoni8323 3 года назад

Thank you for new React course. Please make for redux as well.

@arescatalin1407 3 года назад

Merry Christmas Shaun! How many videos will this series have? 🎅

@hudsonfinn7001 3 года назад

Are you planning on doing a Material-UI tutorial in the future?

@michaelanthony4750 2 года назад

These are very detailed

@daviddonadze221 3 года назад

this man is a legend

@GiancarloCarccamo 2 года назад

great video man

@elyeskacem9637 3 года назад

Best ninja ever

@balhallak Год назад

Very clear and informative explanation, thank you. ❤

@NetNinja Год назад

You're very welcome Bachir, thanks for watching!

@moustafamahmoud4948 3 года назад

make it the best tutorial as you always used to

@YKNY_ 7 месяцев назад

These videos are amazing for college. Thank you!!!!!!!!!!

@NetNinja 7 месяцев назад

That means a lot, thanks! :)

@hedtube1 11 месяцев назад

Thank you so much for sharing an incredible tutorial

@NetNinja 11 месяцев назад

Hope it was helpful! :)

@victor0026 3 года назад

Awesome tutorial ! I am waiting for some Amazon Web Services tutorials ! :D

@handsomeman5098 2 года назад

Absolutely ninja.

@tarekghosn3648 Год назад

you my man. are awesome.

@armanahmed4806 3 года назад

Very useful plz make a series on MERN stack sir

@veekay5195 3 года назад

Fantastic vid! Really keeping me in the loop as well. I'd love to read more on it. However, the official docs are still based on class based components. Could you please recommend some material to read more about functional-based components?

@hiteshrohira7968 3 года назад

I honestly have the same question. A lot of material and books out there on react are way into class based components. Would be nice to have some docs relating to functional components. They are working on the new official documentation apparently which is expected to be out early 2021 - github.com/reactjs/reactjs.org/issues/3308

@amongdoomers9464 3 года назад

Yeah , but the react documentation is poor in my opinion. People started using functional based components in their projects. It's easy ,readable and easy to maintain 👍. Also we can use hooks which are awesome😍

@h1inc816 3 года назад

So I'm a bit confused. You created the component called Navbar, which holds links to Home and Create pages. Are pages components too? Why is in the app.js file but create isn't despite it being its own page? I guess what I'm asking is, if I'm creating multiple pages, what would I do? Home page (not logged in) -logo -about -sign up Each is its own page when the link is clicked. But within the home page are texts, pictures, and the usual.

@KevinTempelx 3 года назад

Thank you!

@nandopookey9195 Год назад

Thank you sir

@TheCodingOdyssey 3 года назад

Net Ninja indeed!

@foojiajieng7428 3 года назад

Hi, I just started React Native few days ago. It came out error say invalid component when I write const Navbar. But when I changed it to function Navbar, it works. May I know why? btw I am using MacAir M1 chip.

@rojka-_- Год назад

Thanks bro

@the_awakening_msaha5132 3 года назад

Awesome!!! ✌️✌️✌️✌️✌️✌️✌️

@eugenentamack5023 3 года назад

Helo gang thanks a lot again

@ballikhan219 3 года назад

in 5:06 how do u do that shortcut div.classeName ?? and all that tag pop up automatically pls tell me .which extention have you used for it

@personwholikesturtles2389 3 года назад

@duskairable 3 года назад

What folder icon theme do you use in vscode??

@thecodingowl 3 года назад

Waiting for the Video for tonight! Lol

@_AbuIlyas 2 года назад

Every time I type out a specific code so for example a div or anchor tag the options don't show up where i can just tab them, so i have to manually type it out myself. Am I missing something?

@SofianMW 3 года назад

go forward to Ninja the React!

@codebloodedgang 2 месяца назад

does it work if you dont use .jsx instead of .js format? it gives an error until i use the jsx format

@abhilashmhadli2742 3 года назад

Are u also gonna release fresh react native tutorials also?😃😃

@d2002cc 3 года назад

Thanks a lot, gang head!

@toannew 3 года назад

3:13: code for Navbar 4:30 code in root component

@dr.asimali4263 3 года назад

Can you make a new series on Django PLEASE!

@Sd_ranjeet 2 года назад

Hey, have you udemy course on React Js? Because I think your course will help me a lot, and your teaching method is toooooo good. 😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊😊

@azrayazid8064 2 года назад

thx sense now im not that blind with react

@Entertainment-xw4xj 3 года назад

Why is your local host file shows output center align, mine shows left allign

@hidekisen6226 Год назад

when you type nav.navbar, how does it automatically produce the whole class. i have already installed the snippet

@nroshstp 3 года назад

Let's keep moving, Waiting for #6, #7... :P

@faridrezaei8180 2 года назад

A quick question: What is the difference between these two: 1. export default "component name" 2. ReactDOM.render("component name", document.getElementById('root')) It seems that they can do the same task. But I think the usage must be different for each.

@ronaldarnold-delrio3230 2 года назад

I might be wrong but I believe the reason that you would use export default "component" is to import it to be used in the App.js component as the App.js component is the main component which will render all other components and their children the reactDOM.render will only render that one component exporting also gives more reusability of the component if you need multiple of the same component

@keone8647 2 года назад

When would I want to use a .jsx file if I can write jsx in a .js file?

@jashagrawal1503 3 года назад

bro u must make a complete MERN stack course in which u explain an advanced project

@rajafathullahharunrajashah3328 3 года назад

How do you make the React component a different color than the rest inside App.js? Mine is always red which is confusing while the react components inside the video are green in color. Help me, someone.