ReactJS Tutorial - 20 - Styling and CSS Basics

Подписаться 652 тыс.

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

50% 1

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
Basics of Styling and CSS in React

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

1 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

0:35 3 ways to add CSS 4:45 pass 2 classes 5:25 inline styling 7:20 code for inline styling 7:22 3rd: CSS modules 10:01 advantage of css module

@Be_Logical_101 5 месяцев назад

😢

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

Oh wow I really liked this clear explanation of the different methods. My brain was all foggy on this concept and you cleared it up nicely, thanks!

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

i love your explanations....simple and straight forward without all the other nonsens that can confuse you...

@apurvsawant5703 4 года назад

The best React tutorial so far. This playlist deserves far more attention.

@garvitgupta13 4 года назад

is he creating a project alongside or he is explaining only theory. Please guide should I go for it

@fullstacknest 4 года назад

Hello Sir, I loved all your videos and it Cleared all my concepts... Thanks a lot

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

best tutorials in youtube so far, Tnx alot

@ivan-the-l 4 года назад

Thank you for your tutorials! They are great!

@adebolaadesina6912 4 года назад

The best React Tutorial so far and the best teacher I've ever seen..... Thank you, especially the way you explained the "key" and "state" Thankssssssssssssssss and many thanksssss.

@victoryyugeshre-turns2498 3 года назад

Thalivar fan ha?

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

@@victoryyugeshre-turns2498 Thalaivar kum ithukum ennada sambantham 🤣

@victoryyugeshre-turns2498 3 года назад

@@amongdoomers9464 sambantham there da... React (Thalaivar) Angular(Thalapathy) Vue(Thala) Do you got it now lol 😂🤣

@victoryyugeshre-turns2498 3 года назад

@@amongdoomers9464 main reason is that He written thanks & many thanks in thalaivar slang Which is from Baba movie dialogue So I asked him Don't get me wrong ok

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

@@victoryyugeshre-turns2498 Ethavath olarikitu iru .. un thalaivaru அரசியல் ku epo varuvaru 🤣🤣

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

great tutorial series, thanks a lot!

@softwaredevnk166 4 года назад

Very good demo and explanation. Thanks

@rtyufghv 4 года назад

awesome tuts, thanks teacher!

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

Completed video 20. Thank you 🙂

@drinou3556 4 года назад

nice vid, very useful for a beginner like me !

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

Wow, this was superbly good.

@Sergey-mr6be 5 лет назад

Good lesson! Thanks!

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

That was very useful, THANKS :)

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

Great tutorial...Thank you very much.

@WordPress_Expert Год назад

Thank you, you helped me a lot

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

Nice tutorial, thanks. Any idea how can you add styling to the html and body tags?

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

awesome explanation 🙏

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

Very basic, very important , thank you !

@Rohan-vl1ve Год назад

hiiiiii

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

super cool! TY! you are the best

@amirprodhan9075 4 года назад

very very thanks ....its help me

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

Amazing, thank you

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

not sure if it is be covered further in the course, but it would be nice to cover the BEM naming topic

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

Fantastic job

@Salmancreationbd 4 года назад

nice tut+ thanks

@vladserhiychuk7759 5 лет назад

Thanks a lot )

@juhairahamed5342 Год назад

Good Explanation

@rs.wright Год назад

Maybe this is something you wouldn't typically want to do, but could you theoretically pass module styling to a child component by using props? I could see it being useful for repetitive css that will be used by multiple children.

@anas2004 5 лет назад

super styling

@kevinnava4376 5 лет назад

I love you (for the science computer)

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

If you are going through the same problem, RFCE is now RSF i repeat RFCE is now RSF

@AxxionMarketPlace-iu6ri Год назад

Thank you

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

Is CSS in css stylesheets scoped only to that component where it is imported or the CSS is available globally?

@Pradeep-eq4ue 5 лет назад

Nice video

@websitedisigin1253 Год назад

thank you

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

2:39 conditionally apply a className based on props or state of component

@subee128 Год назад

Thanks

@Aditya.Santra 2 года назад

amazing video

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

Awesome!

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

Much more help to learn react... Best topic Declaratives mode teach..

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

Please teach more about style components

@bhavikrathod7493 4 года назад

Why does position sticky and position fixed doesn't work in ReactJS for css module and normal css file

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

How can I import css files conditionally in react? While loading the page, i have to sent an AJAX call to server. Based on that, I have to import different css file based on the value i am getting from an AJAX. can you please help me ?

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

what happens when your child component has an html element with className="success". would it get styled ?

@sarahzaman3173 4 года назад

Thank you so much this is so helpful But I'm confused when I should use backticks?

@TheAdel136 4 года назад

backtits is a javascrypt "methode" not a React's one !! go to js es6 and you will learn more about it ;) hope y'll find the answers !

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

a = "Kunal" console.log = `Hey My name is ${a} .` Output : Hey My name is Kunal . This is called Template Literal. Whenever you need to have an expression in a string , you use backtick along with ${}.

@websitedisigin1253 Год назад

you the best

@jasonautentico2765 5 лет назад

is there any advantage to using this way compared to just using the external css file and importing all the attributes from one css for all the js files?

@06_sumitsharma2 Год назад

css in js file is given more priority over external CSS in case of same attribute .

@tambolaking5383 4 года назад

Can this style modules be used with scss?

@muhammedashkar692 3 месяца назад

so how would be css for animations, hover and all achieved?

@quatreiquorizawa9885 5 лет назад

Thanks man, this is very helpful. 2 questions on css modules: - can we also have less & scss modules? - what if my module contains something like .table > .row:first-child how am i going to reference them in my component? Thanks in advance & God bless!

@tambolaking5383 4 года назад

For your first question the answer is yes

@aXimo 4 года назад

What is the theme you are using here?

@saisankarmatam8016 4 года назад

What is your source for learning react ???

@sahith2547 10 месяцев назад

I have been learning React using this tutorials as am a beginner but i found that these videos are posted four years ago, Can I continue learning here or should I try finding other tutorials ??Please answer anyone.

@sparshgupta8078 4 года назад

sir you havent covered the disadvantages of external stylesheets and inline sttyle sheets

@-sY.Nuclear Год назад

okay we are supposed to use modules thats fine but what if we use scss ? does thath mean that we have to import it in every single file that we need ?

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

inline styling - it is an object with camelCase styles modules - applies only to specified component. as it is imported as a variable. so wont apply inside other components... where as other styles - apply to all child components.

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

i was trying to create mystyles.css.but it was not possible for me...!!! finally i could not create .css file in my project. is any one can suggest about this

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

I love you Vishwas.

@alokkumarsahoo2974 4 года назад

Sir When we import the component we are not writing the extension but at the time of importing the css file we need to mention the extension why ?

@abhishek.rathore 4 года назад

When there is no extension described React defaults it to .js but for css files we have to describe the extension as we dont want it to consider it as a js file, it is a .css file

@imranmughal2215 4 года назад

nice tutorials one thing in my mind is . Is it necessary to learn node.js for websites creating in react or not?

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

not necessary

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

5:00 alternative to TEMPLATE LITERALS

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

I'm having an error with style module can u help

@srkanjali 6 месяцев назад

I am not sure why my success and error colors are not being rendered. I followed the steps exactly.

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

my code is working however I'm getting an error. Cannot find module './appStyles.module.css' or its corresponding type declarations.ts(2307)

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

fixed by deleting all the language settings for java-script in vscode

@augischadiegils.5109 2 года назад

♥️♥️♥️

@ms310 4 года назад

I don’t understand why when I style a component on its own css page it renders on all pages.

@tambolaking5383 4 года назад

Use style modules

@wesleywebster6851 4 года назад

Because when you do it that way, the styles are actually global. CSS Style Modules is what you want and is similar to that method of each component having their own css file. Plus it is scoped to the component

@neokristar Год назад

This is not working, I am unable to show h1 tag in the return statement

@abhishek3313 4 года назад

Please make a tutorial on javascript

@ramcharanmadasu7052 5 лет назад

It's show time

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

Hey i got this error Module not found: Can't resolve './' in 'D:\ReactBasics\learnbasicsreeact\src\components'

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

did you use npx when you started or npm? If npm, you probably forgot to install webpack or need to configure it

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

@@noordinabdulkadir351 would you tell me what should we do if we started with npm ? which webpack we should install now?

@latasha2123 4 года назад

Module not found: Can't resolve './appStyles.css' in 'C:\Users\Parichay\Desktop\MyProject\React_Tutorial\hello-world\src' This is the error I'm getting. What to do?

@yajnasenipanda7697 4 года назад

I am getting same error. Do you know how to resolve?

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

@@yajnasenipanda7697 Make sure both 'appStyles.css' and appStyles.module.css' is under src but not components. If you move files from components to src, in this case make sure you save files after moving to src. I solved this error this way. Hope it solves for you as well. Thanks. Have a good one!

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

I have the same problem,did you find the solution?

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

@@atisafarkhah5923 rename the file as name.module.css and make sure the proper hierarchy is maintained while declaring the path. This is how I solved it.

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

Check file path of your css file. My css files were in the component folder, but i forgot to add components when importing into App.js....like this: ./components/appStyles.css

@peaceandfood7952 5 лет назад

how come in modules.css we don't need to export??

@tambolaking5383 4 года назад

Because it's still .css and not .js ... Export is a Javascript module concept, not css

@Itisingh-mm8jd 2 месяца назад

can anybody tell how to update read scripts???

@surbhibaranwal9749 4 года назад

Why I am not getting the green color?

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

I had the same problem when I named the ".module.css" file starting with a number (18-appStyles.module.css). Renaming the file to a simple "appStyles.module.css" solved the problem.

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

I am getting error -module not found can't resolve './appStyles.css'.please anyone tell what is solution for this

@asthamansoriya6006 Год назад

Did you find the solution? I m getting same error

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

5:55 inline styling

@sparsh1825 4 года назад

Note that the development build is not optimized. To create a production build, use npm run build. What should I do ?

@jintanstupidani7227 5 лет назад

hey man, I have tried your method to simply import './css/file.css', but why it gets imported by all the components even though I only import it on the current component? is it because imported on my App.js file?

@RemcoBravenboer 4 года назад

No, you have to use the .module.css file. Watch the video again

@tambolaking5383 4 года назад

That's the reason you must use style modules

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

7:20 CSS modules

@logs 4 года назад

Why would you use this? Why not just stick to traditional CSS...

@niteshrawat576 4 года назад

Hi, i liked the inline/within component approach better as this would but all my components details inside that component file only.

@logs 4 года назад

@@niteshrawat576 That's true, but what if you want to switch to a whole other color for your site or style or whatever. You'd have to go through each and every component.

@niteshrawat576 4 года назад

@@logs hey, I think we should also have a main css file for project wide css. Components css will be their own

@animelafuerza 4 года назад

@@niteshrawat576 Exactly, an example for this is, maybe you have 2 components with a class you want to name "error" (an input and a select), the css for each componen is diferent, so, leaving that into each componen lets you use that class name in each component without an error

@yajnasenipanda7697 4 года назад

I am getting an error like "Module not found: Can't resolve './appStyles.css' in 'C:\Users\LENOVO\Documents\React\Hello-world\src'". Can anyone help me?

@shashankagarwal6808 4 года назад

Hi, I have the same problem. Have u solved it yet??

@ajnabeechowdhuryAjnabee 4 года назад

may be u did some spelling mistake,,,otherwise it just works fine

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

Check file path of your css file

@gevorgdavtyan9163 4 года назад

thanks, bro for `${} ${}`

@ShubhamSharma-wf8zr 4 года назад

2:36 am i color blind or its yellow ??!

@luccateixeira5470 4 года назад

It can look like yellow depending on the calibration of your monitor.

@ShubhamSharma-wf8zr 4 года назад

@@luccateixeira5470 ooh i see🧐

@enchantking 4 года назад

When I heard "orayt guiz" my heart skipped a beat. 😓

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

I dont see much of use of modules. Maybe in a bigger projects ?!

@djelassimedhani3134 Год назад

Anybody facing a problem with className={styles.success} ?

@sadanmian Год назад

yes

@pranjalsrivastava4260 Месяц назад

make sure to import styles from './appStyles.module.css'

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

not resolved

@roliverma8100 4 года назад

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

Nice tutorial! But I don't get it ... All this work just to show a simple text. I don't know what's the problem of using pure HTML, CSS and JS with a simple JS library like jQuery