Full React Tutorial #6 - Adding Styles
HTML-код
- Опубликовано: 22 авг 2024
- Hey gang, in this React tutorial we'll see how to add CSS to our React projects.
🐱💻 🐱💻 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
The way you break things down shows you have a fantastic ability to understand teaching from the perspective of the people you teach. The way you do it with react has shown me things I couldn’t understand from so many more videos! Thank you!
I totally agree he seems to know the exact questions that are forming in my mind and answers them with perfect clarity.
The fact that you re-created a series of videos to make sure the videos are up-to-date with the language is brilliant! there are soo many tutorials out there out of date. This is what I need it some update on react! You teaching style is unique very well explain. Really appreciate your video tutorials.
Thanks for the kind words :)
after watching this ill be honest.....its absolute brilliance, i had a hard time understanding everything for js but learning now that you can do it this way through react just make everything easier for me to read and understand, im currently in a course who sometimes go way to fast but this is just great loving the series so far keep it up, i also subbed ;)
Thanks Demon, much appreciated :)
Shaun, your simplicity of teaching is brilliant - you are close to the Tao, thank you. Additionally, we appreciate the gang asking valid questions, and more importantly, we are thankful for the informed answers from the senior gang
You're a fantastic teacher.
Thank you! 😃
Super fantastic teacher 😁👍
Excellent video Net Ninja, I noticed most who create tutorials never really touch CSS, they always plugin boot strap for their styles. I am really impressed with your level of CSS. Months ago, I learned the fundamentals of CSS from one other channel but once I took your CSS course, I learned the most. Back then I had a hard time understanding the class and id for CSS, but you made it so simple I learned very quickly, thanks for your content.
Do you have a course on grid?
1) The App.css, styles not only the App.js component but every component placed in the app.js
Better to do this instead of inline styling.
Const styles = { /* style go here */ }
...
writing css rules in object notation is unnatural.
I learned a lot about this, thanks to you. I wouldn't mind buying this course on Udemy. Hopefully you make one.
Your explanations are really easy to digest.
Thank you for your kind words and support Ichirou :) you can find more courses over at NetNinja.dev
Brilliant tutorials! ❤🔥You are a great teacher! Thank you!!
Didn't know that the inside curly braces for the style was a JS Object. Now it makes way more sense
Great React tutorials. Thank you!
these videos are really helping me! thx for the contribution
your video is help full thank you bro ❤
No probs! Glad to hear it's helpful :) thanks for watching
Best teacher ever
Very well explained. Thank you!
Very pretty style. I love it. And your train. Thanks
Fantastic teaching style i can learn all now
What's the point of making index.css if App.css is already a global CSS file? Don't they do exactly the same thing? In React, any CSS file imported to any component will get bundled in the end into the single HTML file so they will all join the same global namespace
Hi! Did you find the answer to your question? I have the same question.
I'm just a beginner but I guess when writing CSS wouldn't you want separate style files for your separate components? I guess it just makes everything more readable and easier to work with
Thanks dude.
thanks for your courses..
Hello Ninja Master, there's a problem. My index.js is not reflecting the index.css styling. Why is that?
Hey, great lessons so far! Just wanted to ask at 5:16 you said objects and in earlier ones you said it doesnt take objects, but it takes arrays. So it accepts also objects in the end?
It doesn't take both.. Objects and arrays both
pls pls pls/... do a STYLED COMPONENTS course pls.
yes, waiting on that!
Can you make a new series on Django PLEASE!
Yeah I like his style of teaching.
There's a playlist by Corey Schafer
Yes please do!
great video man
Thanks for these new videos!
Thank you sir, helpful
you my man. are awesome.
hello sorry cant find the (@import URL) any help please?
please do a video on protected routes 🙏
Could you please help me 😞i can't find the link URL from Google font can you send it here
@import URL
Thank you.
Awesome!! 😇
Thanks 🤗
Couldn’t get your git repo css codes
Can we use bootstrap to styling?
actually when we inspect the page at that time we are getting index.css page codes sir not app.css page can you please explain me this why it is so ?
why i have to do 'npm start' in the terminal everytime to get the live server after deleting something that you said don't required for this tutorial from the dojo-folder ?
This is really useful thanks a lot.
I am also coding along with you to fully grasp the content. At 4:28, I had Homepage centered while you don't. Checked all of my code line by line to see any difference between the code in repo, and did not find anything. In index.css, .content class is assigned margin: 40px auto, which should make the heading centered.
What am I getting wrong?
I know it's an old comment, but I had the same problem and wanted to add this in case someone else had it. I realized that the app call wasn't contained within the content div in App.js
My code looked like this:
When it should have looked like this:
Hope this helps anyone in the future that needs it!
I am facing the same problem
Hi thanks, teacher. You say set margin-left: auto to .links that shoots them over to the right "because the parent is displayed as flex". But I examined that it works fine even if not be there a parent as flex. Is right?
Hey Can you give me the font link here? I cannot able to access from you github profile as it is not there
We want more of flutter videos , pleasse make some !
Hey, guys! Does anyone know how to access course files on Github or the channel author disabled them? The only thing I can access there is readme file :-(
I had to add import './index.css'; in the App.js in order to make styles work. I am using IntelliJ. I don't understand why I need it, and on the video it is not necessary.
maybe you know that matters, like it might be important to import in VScode, but maybe in IntelliJ
Sir plz make a video on e-commerce application
thanks
Where and how i can copy data for index,css file from lesson #6 Help plz
So what's the difference between index.css and app.css..... both are like global stylesheets right?
Right? It seems like there's no difference, just a different file name for no reason
in description where do i get description?
Hi Shaun, on github files, css files are not opening in "lesson-6" or others as well. Please check from your end. May be files are not uploaded correctly. Thanks
Hey, all working for me, maybe there was an error yesterday, hopefully it's working for you now! :)
In your component Navbar.js, the className must be className="navbar" not className="Navbar"
thank but i cant get the css file ...
ty.
Hi! Can anyone explain the difference between App.css and index.css?
your App.css is basically for the first react-app that you created, maybe it was only for that rotating react logo, it has nothing to do with our code, if you want you can do changes in it,
index.css is the file that we will use for our classes that we create
hope you might have understood!
index.css not applied on page any solution
The entire github repo is appearing empty for me for some reason.
Change the branch
@@InbetweenInteresting Thanks!
how do you import external styles, like from a cdn ?
Import a local css file and in it @import url('');
For some reason, margin:auto; for links is not pushing it to right side.
it worked, margin-left auto calculates the available space on the left side and occupies all the space
best 💯💯💯💯💯💯💯💯
Difference between App.css and Index.css?
Got it. Index.css refers to all components. While App.css refers to App component and anything inside App component.
@@kashmirtechtv2948 No, in React, whenever you import any CSS file, even if you only import it in a small component, it will get bundled into the final output. All CSS gets put into the single HTML file at the end so it really doesn't matter, every style file becomes rolled into one huge global namespace. You just have to use class and ID tags to apply specific styles
How do I add the font offline? i don't have a constant internet connection so i want to load the font offline
You won't be able to
I got lost after deleting App.css . Now my app wont run on the local host
where's the repo
nice
its possible that the github link only have a readme file and no other files?
Maybe it is late but will help some other people who have the exact question. You have to click on "branch" on the top of the respository and choose the lesson number to see the codes
after deleting app.css I get an error and cant style anything in react folder, any solution?
delete its import
I’m sorry but I really did not understand why we needed to write our Css style in the index.css and not the app.css
The code in Github do not show anymore!
The code is there on github, you just have to choose the relevant branch for each lesson. By default, it's on the main branch.
can we mix bootstrap and react together??
Yes bro
My H2 the homepage does not padd with the others and i copied it exactly from the github
Hi, that's because .navbar .links in the CSS should actually be .navbar .link :) once you fix that, the margin-left: auto will apply correctly
@@razvanudream How come when Shaun write "links" it works for him but not us?
@@qwertmom I'm not entirely sure, maybe he never went back to change it in github, but the class in the NavBar needs to match the one in CSS for it to work :) whether it's links or link
@@razvanudream Thank you it worked for me
@@razvanudream thx
been waiting for more, Thank you! Any chance we could get React with PHP MYSQL? for if anyone knows a good tut on it?
What is it about?
A separate technical stack.
If you learn how to do POST/GET/PATCH/DELETE to an API with React then you are already set.
PHP/Mysql are the backend, so they are separate from React and shouldn't be in "React" tutorials (ps. change to Python/Ruby (Rails)/NodeJS bro, PHP is a heavily old language [with that weird syntax], inconvenient - old timers who doesn't accept changes use it, whereas there is plenty of work for the languages listed above).
All of your courses files are gone..
not true, just select from the dropdown from the root directory page
Can you use bootstrap instead of css?? Would appreciate if someone answers
You can
😍😍😍😍
Brilliant