Code A React Website Tutorial | ReactJS Tutorial For Beginners
HTML-код
- Опубликовано: 10 сен 2024
- CODE: github.com/mac...
LINKS:
nodejs.org/en/...
www.npmjs.com/...
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
#react #reacttutorial #reactwebsite
A few things have changed. This is for myself but it can help others:
1. Tutorial is in npm but the code example is in yarn.
2. Beginning react-route-dom vs6 'Switch' has now become 'Routes'
3. Route now takes an element property instead of component.
You re great! I was not getting the Home content. It is ok now!
Cheers m8
thanks so much!
thank you very much. it's terrible that everything is still changing each time on daily basis in a messy way
Thanks a lot!! Saved me!
for those having troubles with the Switch:
Yes, React Router updated and now many of my old videos have this issue.
@@PedroTechnologies Yup, figured this out too just now.
very helpful thanks
Thanku so much
I am also having same issue
Thank you so much! Finally! This is the first ReactJS tutorial video I was able to get through and make it to the end.
Great to hear!
yeah me too
Hi, Pedro I just started watching the tutorial. I have a request can you do a complete tutorial create a website in react and teach CSS as well in the same video so it all makes sense and to do that together
Exactly! MF is not writing CSS, It made it so hard to follow. That's what I hate about this MF
Its been a long time since I am learing React JS but Today after watching this tutorial I can surely say that I have learnt something very meaningful things.😍😍
Thank you so much for this tutorial!!! It took a couple of days and going through the comments to note some minor changes -- including one night where I lost my entire repo and had no way of getting it back... but I did it! This video is extremely clear-cut. It's long, but it's well worth it. Pedrotech, I'm learning more from you in just the last few weeks I've been watching your videos than I did in twelve weeks in a dev bootcamp!
Caralho maluco, o mano é brazuca, só fui perceber em 1h de vídeo quando ele fala. Poha Inglês perfeito, valeu pelo tutorial maninho.
kkkkkkk vlw mano
Thank you very much pedro! you know how to explain react better than anyone else. I wish you could do a short introduction to each element of CSS that you used in your code and its relation with Navbar. Thank you again.
by far the best tutorial of react. Thanks a lot for the details (e.g the 2 dots when describing the path to import t he image.)
Another video idea is using google maps api or any another map APIs, using a api call with data of latitudes and longitude, generate a position on the map of the user, I think its interesting use of location data which is not common in react tutorials!
Without doubts, you are incredible Pedro, just wanted to thank you all the effot put on this, keep it going
Thank you so much!
Dude, this video was perfect! even if its long, it doesnt matter. these videos are super helpful!
thank you for this excellent tutorial sir!! i am a beginner #REACT programmer and i have learnt a lot here about basics . looking forward to apply them at work in the next few weeks!! please keep more #REACT videos coming
Just wow..I'm totally a beginner ..But his explanation is too good..Thanks a lot...
npm install react-router-dom doesn't work it blocked error watch should i do
Love to hear that you're from Brazil! Couldn't tell just by the accent! Valeu pelo conteúdo irmao kakakak
hey i have followed the same steps and the changes that happened in react and put out this code. but even after saving and reloading the code my react page is still blan on google. i cant see my logo or home heading. is there anything wrong with this code?
import './App.css';
import Navbar from './Components/Navbar';
import Home from './Pages/Home';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
function App() {
return (
);
}
export default App;
please help!
same thing here dont know what went wrong
@@royzheng4772 please give me the solution if you ever find🤧
Same
I know how I'm spending the rest of my holiday now.
Hahaha where are you from? I had a holiday this monday so I spent the whole day recording this video
Hi! We would like to request for a video tutorial on react sorting on a CRUD table like on a specific column etc,, like this comment so Pedro can see this!
Great suggestion! May make a video on a react table library and show an example like the one you said!
@@PedroTechnologies yes please! Because I find that most of your videos are on crud but an important concept of sorting is not present! Looking forward! Just subscribed to get notifications to your content!!
@@PedroTechnologies that's actually a great video idea per say, would be even better if its a dynamic table pulling data from mysql.
you're really making react look easier. Thanks for it❤❤
Thank you so much for this tutorial. It made it really easy to start and was inclusive of all set up steps. Would absolutely recommend to beginers like me!
i have a problem on the 4th line '' component={}'' there is and an error
update the router dom and then change the switch to routes
Did you ever figure this out? I still can't get my home screen to appear
I've just finished the video and would like to thank you for the amazing tutorial! 😄
I hope I can be able to do something so good soon
Really like the long form of the videos.
Maybe consider continuing making one very long video creating a project from start to finish, than a series of a lot of smaller videos. That way there are videos for everybody like you want. Thanks for the video !
Wow, this comment was caught on youtube's spam for some reason hahaha I agree with you, many times when I do a lot of small videos they usually start getting less and less views with time. I am trying different formats :)
Thanks for this tutorial, you are a great teacher!
You helped me to learn React. Thanks
Just before 40:52 minutes, while toggling between openLinks and !openLinks,
once we are hiding the navbar left image and then again expanding the page,
we are getting home, contacts ,menu and about written twice.
and it is not resolves further.
yeah, I too have same problem!
@@55sathish63 I corrected the issue by doing the following to the Navbar.js component.
I removed...
Home
Menu
About
Contact
What it looks like afterwards....
function Navbar() {
const [openLinks, setOpenLiinks] = useState(false)
const toggleNavbar = () => {
setOpenLiinks(!openLinks);
}
return (
Home
Menu
About
Contact
);
}
export default Navbar;
@@aanderson6728 sir not getting media query correctly
Dude - You have a gift for teaching. Really. Thanks! 👍
can you make a video with "add-to-cart" functionality and backend connection to this same website?
Amazing tutorial.. I have watched the full video and learned so many new things..keep bringing such React tutorials.
You did a phenomenal job with this, great explanation
one of the best tutorials i have ever seen! thanks man, valeu
Best video for learn ReactJS, i swear
Thank you a lot Pedro! That's a very useful content, I've learned a lot
pls how did you access the menuItem class in the menu css?
It was a pleasure to watch it ! Thanks guys!
Module not found: Error: Can't resolve './pages/Home' in 'D:\web application\Test react app\my-app\src' - Bro i have trouble with this error what are solutions
Quality content as always, thank you for your tutorials Pedro
Thank you! Appreciate the support!
Thank you PedroTech, you make it look easier
I liked the content very informative on the react side, you seem to explain everything nicely. The css just needed very minor tuning to be responsive. Good stuff thanks keep posting videos like this :)
how did you get the css to work?
Lesgoo! Nice collaborating with you 💥💥
Great working with you! Now go clean your room
Your channel really helps me a lot. GREAT WORK ! & THANK YOU!
Hey Pedro, thank you for this great content. I'd be glad if you Create a CRUD application to allow users from around the world submit their recipes to their preferred category (food type/ingredient/nationality, e.t.c). If the category does not exist, they can create one however, if it does, the user should receive an alert to say it does. Users should also be able to rate recipes (star ratings) and search for recipes that have been submitted. You can go further by including a feature that allows users to add comments to submitted recipes, perhaps a correction or addition. It is an excellent chance to show off your frontend framework skills.
finally i can watch your page transitions video
Hi Pedro, does not work. which tag could i use?
So, comments people were very helpfull. Thank you for all your support.
instead of switch use Routes
Hie Pedro, i have been stuck with this error here
Module not found: Error: Can't resolve './index.css' in 'C:\Users\XLOLANI MHLANGA\Desktop\Front-End\ReactJs\React Websites\website-tutorial\src'
thank you a lot ...just finishes coding along
After installing the material UI using nom, I get the error 'React' must be in scope when using JSX react/react-in-jsx-scope
and it says this for line 12-19
I went back an deleted the material UI import line to see if that was the problem and its still giving me that when I do npm start to preview in a browser. wish I knew what I did wrong here.
0 dislikes !! Thats is Really Awesome 😎
Hope you didn't jinx it hahaha Thank you for watching!
loved it really helped me. But the css wont apply to the contact page and i cant seem to find any error. If anyone can help me out it'll be highly appericiated
Hey Pedro! this is valuable content! you helped me a lot. Just something that may sound weird from my side. The toggle button if you resize the screen while the state is open, it stays open and shows two times the links, do you know any possible way to solve this?
I am also having this issue. Were you able to figure out how to fix it? Or does anyone happen to know how to fix this? Thank you!
Best author of REACT JS!!!
I got a bug in you code, In the navbar section on clicking the hamburger menu we get 2 times navigation elements i.e. home, menu, about us, sign in. Can you please suggest changes for that ?
what about media query screen
Does anyone know why when I am clicking on the button the url is updating to the /event but my contents on the page are showing when I refresh the page and not just by clicking on the button. Does anyone know how I can fix that? Please help.
Your explanation is awesome. can I get heart from you please
Thank You Pedro, It was a great tutorial. Thanks a lot sir.
i follow ur instruction but after typing in my Navbar.js. i see only blank white screen
i don't know how to fix this😓
Hi i have followed all the steps and yet I’m not getting the outcome and what are we supposed to do with the components under public they are all related to the sample program!
Can you please make a video on how to get data of react website based on url...because when i refresh or hit the url directly, it is throwing me errors..Thank you in advance
@PedroTech
Quick question, why did you write id={openLinks ? "open" : "close"} in the leftSide div and not in the hiddenLinks div, as you're only manipulating the links
Please dear Pedro or anybody, I have followed every bit of this lesson but my rendering is not displaying especially wihen adding the routes ..please is there a speciall configuration or extensions u use to help
Like always great work man....also can you show us a website with node implemented with react with session too, i am doing a site here after completing the session and if i try to render or redirect to other pages it doesnt work ...please make a tutorial
i use v5.3.0 react router dom it update the url but didn't render the components in that page
i don't know why?
"Switch" is now "Routes" apparently
Yes sir
Found out the hard way in a multi page project.
Magnificent video! Thanks a lot Pedro!
Thank you I learned a lot by this tutorial.
the best tutorial out there imo
Thank you!
Nice way of explaination.Keep going champ😍😍
Thank you 🙂
hey i closed the tabs and my pc got restart for some reason how to go back and reopen all of this
woow it is a very intersting really i don't see the very cool video🔥🔥🔥
You deserve a LOVE.
hey I'm having error in ./src/app.js what should i do
my navbar.css has no effect on the website ui, any tips?
Hey bro amazing video application looking beautiful and works great. However my home page the image doesnt fit the screen and the footer doesnt fill the page leaving a big blank space i have tried looking at the css but nothing is stretching to fit the whole page any help would be amazing
Thanks Pedro
same problem
Amazing Work bro plz do more projects with javascript also
I have a request to update the video according with the new versions of react-router/react-router-dom. For example Switch is deprecated, and instead you need to use Routes.
Bro learned a lot❤
03:20 create a folder and give it a name. I know this is stupidly basic stuff, but better to show creating a new folder in VS Code, rather than just starting accessing a previous one you made-- if this is truly for beginners.
I got this error ( Failed to compile ) after imported the Reorder icon.
Css for navebar image "logo" is not working can anyone help.
Great explanation...thank you so much...👍
If u could also do the backend for the same. Great work!
I liked building this, may make a backend website without react for those who don't use react!
My pc can't install the packages to create the react app help
i got another issue....navbar.css does not work.....
I am facing the issue of invalid Hook call any solutions?
Could you make a video on how to create a website with React Typescript? Or is it easier with JavaScript?
npm run build makes not working build. Why?
You came up with big!
Appreciate it!
sir media query is not working for me.pls help me anyone
thanks for the video, great work. Just some constructive feedback : maybe try to finetune your way of speaking. You say 'uhm' a lot, and you switch between slow and rapid speaking too.
I probably would do a much worse job so its just some feedback for you to work with!
good work Pedro, thanks
Um br conhece o outro só pela voz né? Kkkkk Depois faz uns tutoriais em português, tá difícil achar um tutorial de react iniciante bom em pt 🥺
There is a channel called "coding addict"....see his 10 hour react js video...you will love it... give it a try...
Friend from 🇮🇳
Thanks Pedro!!!!!
One word compliment
#Supercalifragilisticexpialidocious
Appreciate the compliment hahaha
Can you show back-end for it so it is fully functional please
Thank you very much sir.
Excellent tutorial !
liked and subscribed. Amazing tutorial
you never disappoint
wonderful stuff as always
Seems like it was a good tutorial, sucks that it doesn’t work at all anymore
why? and how?