Meta tags:
description= CSS modules make sure that your CSS is locally scoped by adding a unique hash to your class names. You will understand it better once we use CSS modules for styling our random number generator...;

Headings (most frequently used words):

css, modules, using, learn, react, 18, what, are, setting, up, the, project, final, thoughts,

Text of the page (most frequently used words):
the (46), this (38), css (30), react (27), all (22), you (20), development (20), for (18), and (17), will (16), randomgenerator (16), your (15), app (14), font (14), class (12), number (12), start (11), #modules (11), that (11), state (11), learning (11), random (10), code (10), envato (9), our (9), design (9), use (9), templates (9), get (9), from (9), div (9), view (9), are (8), create (8), javascript (8), using (8), type (8), classname (8), import (8), web (7), randomnumber (7), styles (7), lowerlimit (7), file (7), size (7), hosting (7), ruby (7), php (7), center (6), like (6), have (6), with (6), names (6), input (6), container (6), content (6), border (6), following (6), props (6), tuts (5), video (5), creative (5), project (5), rules (5), name (5), generator (5), form (5), button (5), handlesubmission (5), lowinput (5), numberrange (5), capitalized (5), display (5), let (5), newlow (5), newrange (5), cloud (5), python (5), coding (5), fundamentals (5), mobile (5), wordpress (5), help (4), music (4), free (4), assets (4), access (4), one (4), new (4), can (4), same (4), elements (4), submit (4), rangeinput (4), ref (4), limit (4), rangecontainer (4), render (4), 5rem (4), 4rem (4), flex (4), padding (4), range (4), files (4), family (4), 2rem (4), math (4), however (4), any (4), tools (4), learn (4), course (4), ionic (4), native (4), android (4), ios (4), author (3), become (3), about (3), policy (3), terms (3), unlimited (3), now (3), when (3), regular (3), component (3), hash (3), sure (3), collisions (3), selectors (3), look (3), different (3), here (3), what (3), justify (3), gap (3), width (3), example (3), should (3), make (3), weight (3), text (3), lato (3), solid (3), 2px (3), margin (3), place (3), inside (3), current (3), low (3), numrange (3), root (3), directory (3), rgen (3), these (3), unique (3), styling (3), products (2), blog (2), join (2), who (2), discover (2), share (2), license (2), popular (2), stock (2), without (2), everything (2), over (2), million (2), asset (2), monty (2), shokeen (2), means (2), them (2), markup (2), onclick (2), upper (2), lower (2), return (2), shown (2), below (2), another (2), give (2), module (2), begin (2), 10px (2), radius (2), 1rem (2), inline (2), block (2), fit (2), white (2), color (2), orangered (2), background (2), becomes (2), only (2), bold (2), uppercase (2), transform (2), black (2), bottom (2), focus (2), none (2), auto (2), numtimer (2), tempval (2), setstate (2), floor (2), isnan (2), value (2), parseint (2), createref (2), reactdom (2), index (2), bunch (2), npx (2), command (2), install (2), setting (2), tool (2), started (2), they (2), locally (2), scoped (2), adding (2), understand (2), better (2), once (2), two (2), working (2), might (2), could (2), global (2), require (2), tags (2), want (2), wrappers (2), again (2), single (2), scaling (2), servers (2), aws (2), game (2), rails (2), django (2), terminal (2), cli (2), expressions (2), ajax (2), xml (2), performance (2), version (2), control (2), git (2), authentication (2), machine (2), rest (2), api (2), patterns (2), workflow (2), testing (2), security (2), databases (2), sql (2), functional (2), programming (2), oop (2), yii (2), codeigniter (2), scripts (2), laravel (2), apis (2), angular (2), jquery (2), node (2), vue (2), kotlin (2), firebase (2), corona (2), theme (2), plugin (2), photo (2), business (2), youtube (2), 2025, trademarks, brands, property, their, respective, owners, sitemap, mixkit, placeit, market, sign, authors, company, team, purpose, affiliate, explore, marketing, resources, not, sell, personal, information, cookie, settings, cookies, fair, acceptable, privacy, conditions, user, searches, fonts, photos, royalty, pricing, plans, ideas, host, meetups, lead, discussions, collaborate, community, professional, photoshop, beautiful, logos, designs, mockups, seconds, need, next, digital, downloads, month, toolkit, developing, longer, worry, style, messing, layout, also, conjunction, best, both, worlds, final, thoughts, did, notice, prepended, appended, respectively, way, makes, there, but, attached, changed, modify, method, looks, convention, word, object, modifying, updating, statement, first, rename, convert, updated, camelcase, kebab, case, small, changes, generated, output, above, similar, image, pointer, cursor, blue, outline, column, direction, aclonica, align, 300, 20px, body, default, export, clearinterval, componentwillunmount, 2000, setinterval, componentdidmount, preventdefault, bind, super, constructor, extends, 1000, 500, getelementbyid, document, createroot, const, dom, client, directories, concerned, delete, three, named, src, execute, choice, needed, solve, problems, consider, developers, independent, components, larger, some, which, ultimately, result, conflicts, due, scoping, things, tricky, large, projects, problem, lot, wrapper, around, proper, probably, values, properties, write, uniquely, targets, hard, keep, track, specific, avoid, scope, define, apply, indeed, happen, defining, would, very, cumbersome, packages, webpack, babel, eslint, etc, feature, discuss, tutorial, ability, building, page, apps, running, simply, possible, toolchain, integrate, directly, into, existing, website, simple, toolchains, speed, additional, features, allow, detect, mistakes, script, complete, developer, take, lesson, how, full, length, beginner, copied, clipboard, min, read, aug, 2023, scroll, top, home, every, skip,

Text of the page (random words):
learn react 18 using css modules envato tuts skip to content get every type of asset for any type of project and access to ai tools from 16 50 m design business photo video web design code code view all code start learning wordpress wordpress view all wordpress plugin development theme development mobile development mobile development view all mobile development ios development ios templates android development android templates react native development react native templates ionic development ionic templates corona firebase kotlin javascript javascript view all javascript react vue js node jquery angular web apis php php view all php laravel php scripts codeigniter yii coding fundamentals coding fundamentals view all coding fundamentals oop functional programming databases sql security testing workflow design patterns rest api machine learning authentication version control git performance xml ajax regular expressions tools terminal and cli python python view all python django ruby ruby view all ruby ruby on rails game development cloud hosting cloud hosting view all cloud hosting aws web servers hosting scaling music tuts youtube envato get unlimited creative assets go to envato tuts youtube design business photo video web design code wordpress start learning plugin development theme development all wordpress mobile development start learning ios development ios templates android development android templates react native development react native templates ionic development ionic templates corona firebase kotlin all mobile development javascript start learning react vue js node jquery angular web apis all javascript php start learning laravel php scripts codeigniter yii all php coding fundamentals start learning oop functional programming databases sql security testing workflow design patterns rest api machine learning authentication version control git performance xml ajax regular expressions tools terminal and cli all coding fundamentals python start learning django all python ruby start learning ruby on rails all ruby game development cloud hosting start learning aws web servers hosting scaling all cloud hosting music get unlimited creative assets home code javascript learn react 18 using css modules scroll to top monty shokeen aug 4 2023 60 min read copied to clipboard javascript css modules make sure that your css is locally scoped by adding a unique hash to your class names you will understand it better once we use css modules for styling our random number generator app in this lesson from our free full length beginner course on react 18 you ll learn how take the course for free learn react 18 the complete react developer course free course it is possible to use react without any toolchain and integrate it directly into your existing website by using simple script tags however using toolchains will speed up your development give you access to additional features and allow you to detect mistakes in your code one popular tool for building new single page apps is create react app you can get started with it by running a single command here rgen app is simply the name of your app 1 npx create react app rgen app this will install a bunch of packages and tools for you like webpack babel eslint etc the feature of create react app that we will discuss in this tutorial is the ability to use css modules what are css modules css rules have global scope this means that any css rules that you define will apply to all elements with the same class this is indeed what we want to happen defining the same rules again and again would be very cumbersome however things can get tricky when we are working on large projects one problem could be name collisions for example a lot of elements in your project might require wrapper div tags around them for proper styling however you probably want these wrappers to have different values for properties like margin and padding this will require you to write css that uniquely targets these wrappers it will get hard for you to keep track of all the unique class names or specific css selectors and avoid any collisions for another example consider two developers who are working on two independent components for a larger project they might use the same class names for some of the elements which could ultimately result in conflicts due to the global scoping of css css modules will help you solve these problems they make sure that your css is locally scoped by adding a unique hash to your class names you will understand it better once we use css modules for styling our random number generator app let s get started setting up the project execute the following command in a directory of your choice to install everything needed for setting up the create react app tool 1 npx create react app rgen app this will create a bunch of files in different directories however we are concerned only with the src directory for now delete all the files in the directory and create three new files named index js randomgenerator js and randomgenerator css place the following code inside the index js file 1 import react from react 2 import reactdom from react dom client 3 import randomgenerator from randomgenerator 4 5 const root reactdom createroot document getelementbyid root 6 root render 7 randomgenerator low 500 numrange 1000 8 place the following code inside the randomgenerator js file 1 import react from react 2 import randomgenerator css 3 4 class randomgenerator extends react component 5 constructor props 6 super props 7 8 this rangeinput react createref 9 this lowinput react createref 10 11 this state 12 numberrange props numrange 13 lowerlimit props low 14 randomnumber math floor math random props numrange props low 15 16 17 this handlesubmission this handlesubmission bind this 18 19 20 handlesubmission e 21 e preventdefault 22 23 let newrange parseint this rangeinput current value 24 let newlow parseint this lowinput current value 25 26 27 if isnan newrange newrange 0 28 newrange 0 29 30 31 if isnan newlow newlow 0 32 newlow 0 33 34 35 this setstate numberrange newrange lowerlimit newlow 36 37 this lowinput current focus 38 39 40 componentdidmount 41 this numtimer setinterval 42 let tempval math floor math random this state numberrange this state lowerlimit 43 this setstate randomnumber tempval 44 2000 45 46 47 componentwillunmount 48 clearinterval this numtimer 49 50 51 render 52 return 53 div class container 54 h1 random number generator h1 55 div classname range container 56 p classname capitalized lower limit this state lowerlimit p 57 p classname capitalized upper limit this state lowerlimit this state numberrange p 58 div 59 h2 classname random number this state randomnumber h2 60 form 61 input type number ref this lowinput 62 input type number ref this rangeinput 63 button type submit onclick this handlesubmission submit button 64 form 65 div 66 67 68 69 70 export default randomgenerator place the following code inside the randomgenerator css file 1 body 2 margin 20px auto 3 font family lato 4 font weight 300 5 text align center 6 7 8 h1 9 font family aclonica 10 font size 3 5rem 11 12 13 random number 14 font size 4rem 15 background orangered 16 color white 17 width fit content 18 display inline block 19 padding 0 1rem 20 border radius 10px 21 22 23 capitalized 24 text transform uppercase 25 font weight bold 26 27 28 form 29 display flex 30 gap 2rem 31 margin 0 auto 32 justify content center 33 flex direction column 34 width 80 35 36 37 input 38 border none 39 border bottom 2px solid black 40 font size 2rem 41 font family lato 42 outline none 43 44 45 input focus 46 border bottom 2px solid blue 47 48 49 button 50 border 2px solid black 51 font size 2rem 52 padding 0 5rem 2rem 53 font family lato 54 text transform uppercase 55 font weight bold 56 cursor pointer 57 58 59 range container 60 display flex 61 gap 4rem 62 justify content center 63 64 65 range container p 66 font size 1 5rem 67 the output of the code above should be similar to the following image the markup generated by the app should look as shown below using css modules you only have to make small changes to the randomgenerator js and randomgenerator css files to start using css modules let s begin with the css file first rename it to randomgenerator module css now convert your class names that are in kebab case to camelcase for example range container becomes rangecontainer and random number becomes randomnumber the css file should be updated to have the following rules 1 randomnumber 2 font size 4rem 3 background orangered 4 color white 5 width fit content 6 display inline block 7 padding 0 1rem 8 border radius 10px 9 10 11 rangecontainer 12 display flex 13 gap 4rem 14 justify content center 15 16 17 rangecontainer p 18 font size 1 5rem 19 when modifying the randomgenerator js file we will begin by updating the import statement for our css 1 import randomgenerator css will become 1 import styles from randomgenerator module css using styles is a convention here and you can use another word if you like this styles object will give you access to the class selectors from the css file modify the render method of the component so that it looks as shown below 1 render 2 return 3 div class container 4 h1 random number generator h1 5 div classname styles rangecontainer 6 p classname styles capitalized lower limit this state lowerlimit p 7 p classname styles capitalized upper limit this state lowerlimit this state numberrange p 8 div 9 h2 classname styles randomnumber this state randomnumber h2 10 form 11 input type number ref this lowinput 12 input type number ref this rangeinput 13 button type submit onclick this handlesubmission submit button 14 form 15 div 16 17 our random number generator app will look the same but the class names attached to different elements will have changed here is what the new markup will look like did you notice that react prepended and appended the class name with the component name and a hash respectively this way it makes sure that there are no name collisions in selectors final thoughts using css modules when developing your react app means that you no longer have to worry about new style rules messing up your layout you can also use them in conjunction with regular css to get the best of both worlds javascript by monty shokeen like your all in one creative asset toolkit start now unlimited downloads from 16 50 month get access to over one million creative assets on envato over 9 million digital assets everything you need for your next creative project create beautiful logos designs mockups in seconds design like a professional without photoshop join the community share ideas host meetups lead discussions collaborate discover about envato our pricing plans stock video video templates royalty free music stock photos fonts popular searches license user terms license terms terms conditions privacy policy acceptable use policy fair use policy cookies cookie settings do not sell or share my personal information resources discover tuts video music design marketing web design explore blog help help center become an affiliate about us who we are our products our purpose join our team company blog authors become an author author sign in author help center envato market envato tuts placeit by envato mixkit all products sitemap 2025 envato trademarks and brands are the property of their respective owners