Тёмный

React JS Full Course - Build 4 Projects in 5 Hours | Zero to Hero 

Smoljames
Подписаться 31 тыс.
Просмотров 40 тыс.
50% 1

Learn to Code Roadmap 🔥 smoljames.com/roadmap
Learn everything you need to know to start programming with React.JS. In this tutorial, we learn React.JS by building a super cool Space Gallery website that displays NASA's picture of the day
#reactjs #coding #programming
✨ Get started
HTML CSS Tutorial - • HTML & CSS Full Course...
JavaScript Tutorial - • Learn JavaScript in 60...
⬇️ Resources
VSCode - code.visualstudio.com/
NodeJS - nodejs.org/en/download
Vite - vitejs.dev/guide/
FontAwesome CDN - cdnjs.com/libraries/font-awesome
FontAwesome Icons - www.fontawesome.com
GitHub Repo - github.com/jamezmca/nasa-reac...
Netlify - www.netlify.com
-- Project 1
GitHub Repo - github.com/jamezmca/reactjs-t...
-- Project 2
NASA - api.nasa.gov/
GitHub Repo - github.com/jamezmca/nasa-reac...
-- Project 3
GitHub Repo - github.com/jamezmca/swoley-fit
Init React w. TailwindCSS - tailwindcss.com/docs/guides/vite
-- Project 4
Github repository - github.com/jamezmca/free-scribe
Init React w. TailwindCSS - tailwindcss.com/docs/guides/vite
⭐️ All my links!
www.smoljames.com
💛 Support the channel (100% goes to channel growth)
www.store.smoljames.com
╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝
📚 Chapters
00:00 Intro
04:09 Todo List
44:05 Nasa App
01:47:00 Gym App
03:09:16 Machine Learning App
🔖 Topics Covered
- Learn React.JS
- React.JS Full Course
- React.JS Projects

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

 

19 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 68   
@Smoljames
@Smoljames Месяц назад
For the NASA project, if you have an issue with the API be sure to clear your cache in local memory! For the ML Transcription project if you're having an issue with an undefined model, try updating your code to include the following and then test in some different browsers and incognito windows! import {pipeline, env} from '@xenova/transformers`; env.allowLocalModels = false;
@fetonoforno95
@fetonoforno95 17 дней назад
a critic of this video as a begginer on react: first of all, absolutely amazing , i got some deeper knowledge on components structure, data flow, children props, props itself, apis, hooks(mainly useeffect, the one that most confuzed me), better knowledge on react in general, knowledge that made me confortable working with state, components etc. I was just finished with a javascript course, so i wanted to get deeper on it by learning a llibrary, but, react is not javascript. Dont get me wrong, its the same language, but man, what a hard time i got through to understand that it is a different way of coding everything. When i got to react, all i knew about doing html, then styling with css, proceeding with js, using a lot of createElement() and just getting used to that, was "thrown away", not the knowledge i had, but the whole process and order i did things. So while react is just a library, it changed everything, so TLDR react is not the same learning process and order as javascript. So, after all that, about the video the video reaaaaaaly helped me through the process of understand how to structure a site with components, something i really was confuzed about, and it made me confortable on everything about react, but, i wouldnt say it is BEGGINER friendly, although i had some shallow knowledge before this video(useState, props, conditional rendering, useEffects, events and some more stuuff), and thought i understood all of these concepts, i still got stuck some things, like what are exactly children props, how to structure the components, how do i actually use components(in the beggining i thought you made the whole site on a single component lol), use effect hook and some other things, that thankfuly to this video, i understood completely, but if didnt had any knowledge before, it would be way way way more harder to understand. TLDR: The video is absolutely great, but i really recomend you to whatch some tutorials before watching this video, dont get it wrong, WATCH IT, im not saying to just ignore it, put it on your list of watch later and just come back later, as i think this video is a gem and a valuable learning source btw i love you james for this video, thanks a lot.
@awakenwithoutcoffee
@awakenwithoutcoffee Месяц назад
thank you so much brother. Exciting times! God bless you,
@kamranahmed7912
@kamranahmed7912 Месяц назад
You did a great job james
@ParzivalsLab
@ParzivalsLab Месяц назад
Thank you james ❤
@shahrilamirul4007
@shahrilamirul4007 Месяц назад
5 hours?!?! Damn, James. You’re doing too much 🙌 Loving it!
@dozendose
@dozendose Месяц назад
I m new into react and this video absolutely made me understand react components, states and hooks. Five hours felt like five decades. WHOOSHHH Damn I m really a beginner after all
@awakenwithoutcoffee
@awakenwithoutcoffee Месяц назад
React really is difficult to grasp for a beginner. Much more difficult than Python/Javascript imho.
@BenjunOgania
@BenjunOgania 16 дней назад
Thank you very much, New Subscriber ❤ your explantion is very clear
@alexgarbero
@alexgarbero Месяц назад
Great video so far! I didn't realize a to-do list could feel so complex. Im about 30 minutes in and I've been pausing, rewinding, and commenting on my code to make sure I actually understand what you're talking about. A lot of this feels super advanced to me but cheers to pushing through. Thanks for the vid James!
@Smoljames
@Smoljames Месяц назад
Haha yea it can be a fair bit to bite off but well done for persisting :P
@alexgarbero
@alexgarbero Месяц назад
@@Smoljames Update: I finished the first two projects and I'm now working on the third. Everything's great except I will say your head often covers a decent bit of code. 😅
@Smoljames
@Smoljames Месяц назад
@@alexgarbero Making some great progress:P And cheers for the feedback - I'll be sure to cover less in future!
@anjaneyulub2529
@anjaneyulub2529 Месяц назад
Thanks James :)
@nirajchandrajoshi
@nirajchandrajoshi 4 дня назад
Thank You James ❤
@IAM_The0ne
@IAM_The0ne Месяц назад
Thank's my friend, I am a Qa analyst working to be a web developer
@Kamilek96
@Kamilek96 Месяц назад
same!
@AyaXx95
@AyaXx95 Месяц назад
thanx man. Really appreciate it !!!
@Smoljames
@Smoljames Месяц назад
My pleasure :P
@saltytunafacts1906
@saltytunafacts1906 21 день назад
Oh fudge i just found out this channel today , it was informative and well explained well keep it up bro and also continue to realease react projects
@abdul-rahmanmusah9381
@abdul-rahmanmusah9381 17 дней назад
I also just found this channel. Yet to find out wether or not this video is worthwihile
@maxburrows57
@maxburrows57 Месяц назад
Thanks for this course. What do you think of the professional certifications offered by Meta on coursera? Front end dev/ react native certificates etc
@jasonyu3847
@jasonyu3847 20 дней назад
This is super nice is there a better quality tho? The Text seems a bit blurred even on 1080p
@Sahil-lv5rz
@Sahil-lv5rz Месяц назад
The the ML project after clicking the Transcribe button an error "DOMException: Failed to construct 'AudioContext': The hardware sample rate provided (1600) is outside the range [3000, 768000]." is showing. How to resolve this??
@manokaranmanivasakan5141
@manokaranmanivasakan5141 Месяц назад
Great
@leemaclennan819
@leemaclennan819 9 дней назад
WoT for the win!
@wahiddaqaq2821
@wahiddaqaq2821 Месяц назад
How to add animation for the sidebar to open and close slowley
@regilearn2138
@regilearn2138 Месяц назад
Hi this is awesome. please use typescript for project and redux , react query and please do more real world project with MERN/next js. great job
@OneBrighDay
@OneBrighDay 9 часов назад
I know I’m asking a lot but would you consider doing the exact same course but with Qwik? I’m having the hardest time finding up to date Qwik courses.
@Owais-of4ek
@Owais-of4ek Месяц назад
Thanks for the amazing work you have into it. Please don't consider me impolite but isn't 5 h little to learn all react concepts.
@abdul-rahmanmusah9381
@abdul-rahmanmusah9381 17 дней назад
It is because I'm studying react on both Coursera and scrimbaScrimba and they both have two courses for react alone; react basis and react advance. Both courses are over 10 hours. lol
@Pj9956
@Pj9956 10 дней назад
I don't have any issue but the api key is not sending title but insted its sending "How to identify that light in the sky" line. Is it my code or is api the problem
@shankersingh1123
@shankersingh1123 День назад
My api key is not working, cleared local memory caches, it shows undefined and 403 error from nasa website on the console. What is the solution?
@razayvlogs1601
@razayvlogs1601 3 дня назад
Sir plzzzzzz 👇👇 makes a special video on react js project with Context Api Because better understanding Context Api with project Love from pakistan
@awakenwithoutcoffee
@awakenwithoutcoffee 21 день назад
Question! Why are you choosing Vite over Next.js ?
@cariyaputta
@cariyaputta 10 дней назад
Next.js is nowhere near production ready. React/Vite is far more robust and serve as a good baseline for new devs.
@devrajput6068
@devrajput6068 2 дня назад
simple query. how can i deploy the freescribe project online
@Smoljames
@Smoljames 2 дня назад
I'd recommend AWS amplify!
@amerdyne8791
@amerdyne8791 Месяц назад
can a person with no knowledge reg react do this
@Smoljames
@Smoljames Месяц назад
Absolutely!
@Sushovan_95
@Sushovan_95 15 дней назад
I love people who don't use millions of divs 😅
@wajdy2620
@wajdy2620 Месяц назад
my api key isnt working for some reason. even copied directly from github to test and create .env file with my api key
@wajdy2620
@wajdy2620 Месяц назад
also cloned the repo and again created .env and added my api key. any thoughts? all that renders is "bg-image" broken image icon and no text
@Smoljames
@Smoljames Месяц назад
if you share your code in the discord channel i can take a look :P
@wajdy2620
@wajdy2620 Месяц назад
@@Smoljames it was the caching. removed it and it worked
@Smoljames
@Smoljames Месяц назад
@@wajdy2620 Legend!
@shankersingh1123
@shankersingh1123 День назад
@@wajdy2620 Hey, would like to know more, how did you remove the caching? bcz I tried the same but it still doesn't work
@programmingjobesch7291
@programmingjobesch7291 Месяц назад
The timestamps are wrong. Just fyi!
@Smoljames
@Smoljames Месяц назад
Great catch - I forgot the seconds on the ones longer than an hour! Thanks
@programmingjobesch7291
@programmingjobesch7291 Месяц назад
@@Smoljames no problem, thanks for the video!!
@RudreshCodes
@RudreshCodes 13 дней назад
32 Minute , Adding Function to Delete
@djsargex7777
@djsargex7777 6 дней назад
Dude, no react. no suckerberg. This guy single handedly destroyed humanity into the shallow heap of crap it is these days. Lets promote something good like Angular.
@jagdishprajapati9574
@jagdishprajapati9574 4 дня назад
too fast and too complex
@creativetracks7099
@creativetracks7099 Месяц назад
The ML project doesn't work at my end. I've copied the code from your repo as well. But it doesn't transcribe. Its always on the "warming up cylinder" mode. In the console, it shows Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'model') in whisper.worker.js
@Smoljames
@Smoljames Месяц назад
How curious! Can you please try to run the application in a different browser or inside of an incognito window? Also if you could please make a post in the #help-im-stuck channel in my discord I can provide you further assistance there!
@HENIRI
@HENIRI Месяц назад
import { pipeline, env } from '@xenova/transformers'; env.allowLocalModels = false; use this code and clear all the cache one time. maybe it works
@RobinFF
@RobinFF 16 дней назад
same issue here i also downloaded your full code from github it is working but then i copied the whole project in my project it is not working
@vivekchaurasia3055
@vivekchaurasia3055 6 дней назад
I have been facing the same issue. Were you able to resolve this? If yes can you please provide some assistance on this, it will be really helpful.
@creativetracks7099
@creativetracks7099 6 дней назад
@@RobinFF Please check the comment pinned on this video. Smolijames has provided the solution for the issue. You can do those changes then it would work fine InshaAllah.
@rightq3111
@rightq3111 Месяц назад
My guys voice is optimized for RU-vid 2x speed peak consumption 👏🏽🫡
Далее
Build a Space Website w. React.JS & the NASA API
1:03:03
Просмотров 3,8 тыс.
Every React Concept Explained in 12 Minutes
11:53
Просмотров 403 тыс.
My opinion on Angular 18 & React 19
9:47
Просмотров 46 тыс.
Vite Crash Course | Faster Alternative To CRA
16:24
Просмотров 186 тыс.
All The JavaScript You Need To Know For React
28:00
Просмотров 559 тыс.
Microservices explained - the What, Why and How?
18:30
Просмотров 811 тыс.
Learn React With This One Project
42:38
Просмотров 701 тыс.
How to Get a Software Developer Job (in any economy)
12:43