Full React Tutorial #2 - Creating a React Application

In this React tutorial we'll see how to use the create-react-app tool to boilerplate a new React application. We'll also take a tour of the starter project.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninj...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstu...
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@Adam-xp7cv]

Thanks to your Modern JS, HTML & CSS and React courses I got a job in frontend. I started learning about 6 months ago, still got a lot to learn but you'll always be my first and the best teacher. Thanks for everythin', keep it up!

[@ramdoni3935]

selamat adam

[@ManojKumar-iu3zh]

Congrats adam ❤️ After 9 months, how is you job now?

[@lunote5768]

good luck man !

[@KingsleyOkeze]

@Adam how is it going after a year?

[@ZuwyFPS]

@Adam hows it going?

[@renujadecosta6408]

I've taken your React course on your channel. Man!!! the level of explanation. You are really one of the very best tutors for web dev Shaun...whatever I learn I come to NET NINJA to UNDERSTAND STUFF....

[@ruixue6955]

0:36 *node* is needed 0:39 *5.2+* so that *npx* is included 1:13 if you see version < 5.2, then need to install the latest version 1:39 1. cd to directory where you want to create the project 1:54 create project with *npx create-react-app* command 2:45 *code .* to the project with VSCode in current directory 3:50 index.html is served to the browser 3:57 *all the react code is injected into this html* 6:20 package.json 7:19 *start the react app and preview in the browser* 7:38 scripts declared in *package.json* 7:49 *npm run start* 11:07 *npm install* to install the modules on base of package.json

[@mtshgaming292]

Dream come true oh my god the time i started learning you drop this bomb thank you

[@izzatullokanoatov370]

The same thing here

[@ShaffleOne]

same! xD

[@kanyunngere6493]

Same thing here, although I have already download ur react and redux tutorial. Guess I have to follow up with this one.

[@moibe182]

I really like the way you teach tutorials, because you understand what can worry to a begginer, and instead of just teaching as an expert as other teachers, you take your time to explain really basic things that probably would be obvious for an expert, but that are extremely useful to us begginers. You also have the empathy to tell us that at the beggining certain part could be confusing but we are later going to undertand it. Thas, as a student, makes me feel confident and learn in a better way. So I really thank you for this courses, becauses they are just great!

[@NetNinja]

Thanks, that really means a lot :)

[@xenialxerous2441]

Hi! You are such an amazing person, I have a heart full of blessings and prayers for you ;) The noble work you do to help others seek knowledge and make life. May you be rewarded always!!

[@NetNinja]

Thank you so much, very kind words :)

[@mattgic42]

I second that. Net Ninja is the best!

[@irfk4173]

Definitely agree 👍

[@coskuncabuk3119]

@@NetNinja what is the song at 2:28 ? I loved it

[@sunjungwoo]

I subscribed to him in his earlier days. I still remember he had like 18 subscribers. You deserve much more.

[@brett3554]

I dropped out of uni a few year ago because I was really bad at coding, started watching your videos and became quite good now I'm back at uni and onto final year of my compSci degree! thanks mate!

[@saravolf3753]

Currently updating myself on React with this tutorial. You are by far the best Coding Instructor I've come across!!

[@radu9150]

Thank you for your work, Shaun! I'm sure it's very difficult and time consuming to make the BEST programming vids on youtube! Happy holidays!

[@mpho438]

This is by far the best React course on youtube..... All this other crash courses and tutorials are overly explained and complicated... I love your simplicity, I am literally coming from a React.js course that I finished here in youtube, and still clueless. But the way you explain everything leaves me saying "oohhh that is why..."

[@manuelemerveille2638]

For anyone who gets an error when creating the react app using the PowerShell. here is the fix; create a folder called "npm" inside the appdata/roaming (appdata is a hidden file inside your C/user/appdata ) then re-try creating the react app after the folder has been created. 👍👍

[@dricksewing3957]

This is not working

[@rahulk._]

Just 2 videos in and I already know this is going to be an easy yet thorough course. Thanks Shaun

[@chandikalakshan468]

You are covering most of the technologies I need. Thank you for your hard work.

[@agicsuad9291]

Hey man. This is awesome!!! I need to learn how to use React, in order to get a job! Can't wait to begin with this

[@hownotto4067]

Thank net ninja im currently at a school called NSS in tennessee for web dev, and this tutorial actually described the work ive been on like my course work could not, and i love knowing all the ins and outs of everything so this was perfect for a beginner like me.

[@parthpurwar]

i was looking for a react course, this came out just in time

[@jomarkpangan9362]

Just commenting to help your channel for youtube algorithm, thanks for the react course shaun!

[@NetNinja]

Thank you :)

[@jasper5016]

Are you planning to cover React in detail? Like Advanced React? There is so much in React and we need it from a teacher like you.

[@ashishupadhyay5407]

Redbull by my side, its 7 in the eve. Let the marathon begin for full react tut. Thanks in advance net ninja.

[@JV0192]

Hi there, Just a quick message to let you know that after many many recommendations from friends to come check out your channel, I finally understand why ! I just started using React and this tutorial is mind.blowing. The level of explanation is unique, thank you so much for all your dedication and work ! Take care xxx A message from Belgium

[@omgmaw]

dude, I love you so much for making these videos. You make the concept so much easier to learn. Thank you for your hard work! Keep up the great content!!!

[@sweep8601]

this video made me realize how much money was wasted in university. seriously, you're the best teacher out there. thanks a lot!

[@nadin3amanda]

I've watched a lot of tutorials and by far your tutorials are amazing! Very concise and easy to understand. I'm hoping I can finish the whole playlist. I just subscribed. Keep up the good work!

[@NetNinja]

Thanks Nadine :)

[@jackhughman8469]

@@NetNinja Hello, where can I learn about Redux, are the Redux videos on old playlist reliable? Also, thank you for all your works , your videos really help a lot.

[@abhayganti8662]

Another awesome tutorial from the Net Ninja !! BTW I really love the music played when the create-react-app is run :)

[@roshdyessam3480]

+1

[@kayderl]

I really love some of the signature sounds that Shaun makes. He likes to 'woohoo' and 'querySelectorrrrrrr'. Hahaha Should totally make merch with those words like on a t-shirt or mug or something else.

[@RR-et6zp]

Clearly explaining stuff, unlike all the other tutorials. Well done

[@se7en2021]

Keep this coming Sensei

[@louisgirardin2030]

Great start as always from The Net Ninja. Looking forward to the next lessons ! Good way to pass the holidays during this sad timeframe.

[@LukeMakes19]

I really love the way that you teach. I was able to fully understand Flutter from your flutter tutorial for beginners, And i can't wait to learn React from your videos, Keep up the amazing work

[@thex-man9153]

Am I the only one experiencing vulnerabilities when I run create-react-app dojo-blog? How do I solve this? npm fix --force doesn't work, it only brings more vulnerabilities. it just toggles between 66 and 27 vulnerabilities. Running Node -v 17.1.0

[@donniedorko3336]

You're my absolute hero 💚💚💚💚 That "start" script thing just cost me 5 hours trying to figure out how to run this damn code I inherited

[@patientlearning9303]

1) npx - for creating react app, the commad is npx create-react-app app_name 2) All the react app is injected into the index.html file

[@sirperci1978]

Great video, worth noting (for beginners) that when you run navigate to path where you want to create app, the path's case displayed in terminal has to exactly match the path from windows explorer or eslint will have a paddy when you try to 'npm run start'. Took me ages to figure this out

[@yngmilli007]

I think am having same issue, when I try to run d react app from command prompt it's brings error pls help me

[@JJ-lx7do]

absolute hero, was stuck on this

[@StubbsUkraine]

I usually never comment on youtube, but man, KZbin just needs to include subscription on your channel automatically to anyone who at least once typed "Hello world". You are awesome !

[@Etheriiss]

Nice to have this playlist updated, but I'm still waiting on testing playlist with jest and react :D

[@venkatakalyan8330]

Really Good tutorial especially for react beginner who come from javascript side this tutorial explain really well keep it up ninja 👍❤️ My favourite instructor to me on KZbin platform ❤️

[@sourcedecay]

Awesome tutorial series. Loving it! I did the npm install you suggest near the end of this video and it reported 131 security vulnerabilities in the packages it installed. I'm not going into production with anything, I just find it hilarious.

[@Izzkhairable]

Thank you so much man! Your hardwork for all these tutorial is much appreciated! You are truly the youtube dev tutorial ninja

[@chaitanyagupta6668]

best tut available on KZbin.

[@FerMeister]

You are truly great Shaun, that's why where it said Learn React in the App.js file I changed it to Learn React with the greatest of all times and changed the href link to this course's👌👌🙌

[@Mong-Yun_Chen_54088]

Because at Tutorial #21, this tutorial use the「 react-router-dom v5」, but it conflicts with the 「React v18.0.0」, and you would find your link by tag , it just can't work!! To fix this, after 「 npx create-react-app dujo-blog」command, download the files "index.js" and “package.json” that Net Nija upload at github, and replace these two files with yours. Then key command 「npm install」, then your 「React」should downgrade to 17.0.1.

[@milos018]

"npm run serve", Vue extension in the browser - haunted by Vue? :)

[@joeldsouza4825]

Sir, could you help me while running npm run start it gives me an error and does not start the server. what should I do?

[@khankbar]

Absolutely immense work, Shaun! Thank you so much for all the effort & passion. It was really easy to following along this tutorial, even with a limited knowledge of JavaScript. I also want to ask you whether create-react-app is still a great tool to use. I watched Web Dev Simplified's video on this and I can't tell if his points are valid simply because I don't have much experience. I haven't come across CRA's flaws yet but what's your opinion on it? Moreover, what do you prefer to use for full MERN-stack development today in 2023? Thanks!

[@alexanderson1193]

if your using a mac its the below command in terminal to open the preview npx create-react-app my-app cd my-app npm start

[@blightysun8495]

Guys guys, do this in src/app.css Change 12th line infinite 20s to infinite 0.3s You will see the magic 😂, its so fun

[@samantha6670]

Clear, simple words, effective! Thanks shauwn!

[@patelchintan6186]

command not found: create-react-app face this error while installing then solve this using..... npm install -g create-react-app

[@Orangie-f8b]

Thank you soooooo much I was stuck for hours

[@o.g.bonyebuchi985]

please shaun you are the best of the best i have bought ur modern javascript and finish watching the videos though i have been coding for 3years now and i have just bought the full reactjs course from udemy...i will like to be linked to any available job in uk or beyond. i will be happy to work with you as my mentor...thanks

[@petershaan_]

For those who are struggle with when it save the file and the code is become red just check in the bottom - left of your vscode between "{}" and "Go Live" -> klik the javascript -> change it to react so when it save it become normal

[@hpottstock]

Really excited about this tutorial, mate. Thanks very much!

[@razor21212121]

Not heavy at all just right Gained understanding and confidence!

[@whiteink225]

I installed nodejs but when I write node -v i the cmd it says: 'node' is not recognized as an internal or external command, operable program or batch file. Why is that?

[@devrano48]

I was continuing from the series that you created 2 years go but now i see this new brand :D

[@jertfelt]

Does anyone else have a problem with npm run start?

[@vaibhavbijapur6037]

restore the reportWebVitals from your recycle bin if you still have it there. Or Else restart and dont delete that file

[@andromilk2634]

You should update some parts because the installation process doesn't seem to work anymore.

[@julienleboulch6672]

I've always wanted to learn that language, thx so much The Net Ninja.

[@olimbeknizomov8081]

i really love your all tutorials. thank you a lot may god bless you.

[@rouziuzi]

I have finished your Node Js, next target is react, thank you so much

[@ranjankumar1324]

Hey man.. You are life saviour!! Many many thanks🙏

[@alirezabinesh3637]

Thanks for recording this "React" course. it seems it can be a good and useful tutorial.I have a suggestion that can make your course better and more useful.Starting with JavaScript, you can introduce and use TypeScript later in your course to have more comfortable and better experience with it in "React".At the end I wish you health and good life.

[@dineshrout2527]

So many useful information..never found elsewhere. 🤗

[@Dexter101x]

Wow, this installation works, which I can't say for others

[@sisseck1]

if you get an npm run start error. 1. create a file called ".env" in the root of the project. 2. Add this line in the file: SKIP_PREFLIGHT_CHECK = true

[@anujmehta3051]

Neat and simple, but easy to grab for beginners! ❤❤

[@p.kartik4309]

How much time you will take to upload the entire series.. shawn.. Great work BTW man..

[@NetNinja]

About 2-3 weeks in total I think. But I may have a few days break around Christmas :)

[@p.kartik4309]

@@NetNinja will be waiting for the entire series.. Merry Christmas shawn.. have a great Christmas ahead and new year eve ahead

[@gdemelo]

I'm a big fan of your teaching style. Keep up the good work! Any plans for a React 18 course?

[@abhilashmishra4016]

What is the difference between 'npm start run' and 'npm start dev'? I'm just curious because in our project we are using 'start dev' to run the build in localhost:3000

[@julians.2597]

I mean, it's certainly not difficult, but it really is freaking complicated. the create-react-app script produces a directory with ~3 500 individual sub-directories containing a total of ~35 000 files that takes up a total ~311MB of storage. That is ~5 000 000 lines of code. Factor that with the Industry Average bug/line rate and you get a whopping *load* of unexpected behaviour that as an individual I don't even have the chance to fix. What do I do if there's a breaking bug in some code for a client company? Tell them to complain to facebook? I kind of like react, it's pretty neat, but that's like a tenth of windows' line count!

[@maximal_71]

Please we need an updated version of this course

[@gerryjtierney]

Just in time - I've muddled my way through creating a react web app, and it's fine and everything, but I feel like I need a real extra grounding in React fundamentals because I only half knew what I was doing.

[@p.kartik4309]

Really i started react with ur previous videos and it was amazing to kick off.. I was wondering if u could make modern tutorial on react using npm and there u are.. Will refer these videos too for brushing more on react Bcoz everytime u do something it's lot more informative..

[@timrus3159]

Awesome react tutorials! Keep it goin man :)

[@jaken0]

I love you! Thank you for the tutorial man!

[@sayemarg]

You Are Best Code Teacher 😁❤️

[@AbhishekChoudhary-tu7ig]

The music in 02:26 is dope!

[@akshhatsrivastava1972]

Thank you so much for this amazing playlist!

[@damianodamian7907]

Amazing videos, you're the number one! 👏

[@NetNinja]

Thanks! 😃

[@cona-mq3co]

exactly what i needed. thank you so much

[@mohammed-eth1247]

Hi bro, thank you for the effort and simple explanation i appreciated a lot

[@khalidsaifullahKS]

It's going Great! Carry on man :)

[@muzammilrafay4348]

Hi i have watched a lot of series in your channel you are amazing and very knowledge base talk point to the point Thanks A Lot ❤ & one more thing can you please make series of electron js with react ?

[@ankithans5916]

Wohoo great!!! Please do next series on react-native

[@Reaper_f30]

your a G thanks for this...any plans to do a tutorial or project in typescript...or an addon in this course for what can be done differently using typescript???

[@shubhamss3328]

yayyyyyyyyyyy shaun your the best :) your are our real santa .....

[@voice_famous_books4301]

Very good and clear. Thanks a lot

[@theworldisyours7437]

I followed every step but npm is not recognized

[@RyanBaig]

You need to add the npm binary to the PATH.

[@canklc5772]

Sir thanks you for these amazing tutorials. You are a life saver.

[@canklc5772]

By the way, I do love your accent :)

[@NetNinja]

You're very welcome Can!

[@davidturner1079]

I believe you are a true ninja.

[@bdsghome6874]

Hi there, I hope to get more 10 video to watch this day. :)

[@darelbvcr687]

english ppl are the best explainers in the world

[@AnimalLore_YT]

I looovee your energy!

[@bewildstudio]

Definetly.... must see!!!

[@luvyrslf644]

This video was really helpful.. Thank you😊and one more thing your accent reminds me of Louis Tomlinson😃

[@CodeBleach-ze5ln]

best tutor ever

[@user-mj2dl1zb3c]

["8 vulnerabilities (2 moderate, 6 high)"] I encountered this problem while trying to install the node module. Is there anyone who can help me?

[@qwertzuiop1978]

2:22 "this is just gonna take couple of minutes" more like couple of hours for me

[@kayderl]

Hopefully with yarn V2, it will solve that.

[@piyushdahiya3696]

it can take around 30 mins if u have a slow pc

[@laramaxal4345]

Please make a tutorial for NodeJs (Backend) middleware API and React/Vuejs (frontend). How we fetch/send data from frontend to backend.

[@chinmayghule8272]

I'm following this tutorial but instead of create-react-app I'm using Vite. Let's see how this goes. Also, I think you too need to update this course and use Vite.