All right, we have a development setup. Good to go. We just need to choose a styling approach and we can start building. So let's talk about how to handle styling and React. What are the different possibilities? And then we'll pick one solution. And this might not be a surprise to you. First and foremost, you can just use plain old CSS. React doesn't force you to adopt a react centric approach to styling things, although it has some great solutions.

React doesn't force you to adopt a react centric approach to styling things, although it has some great solutions. But you can just have a CSS file and then import that file and I'll do that right now. So in the src folder, I will add a app.css file, and let's target the h1 element here since we have one on the page. And go text-transform: uppercase; plain old CSS. And the h1 is clearly not uppercase, but this is

plain old CSS. And the h1 is clearly not uppercase, but this is because we haven't registered the CSS file yet. In the most traditional way, you would go in the index.html file and add a <link> tag with a rel of stylesheet and points to this src/app.css. And after saving this, you can see that now the styles have been applied. Uh, h1 is uppercase. If you want the body to have a background

Uh, H1 is uppercase. If you want the body to have a background of yellow, you can do so. Now, while it's perfectly fine to register UCSS file through a link tag in the document, Head is very good at managing imports in JavaScript. And so let's delete that. So we're back to an unst style page. And in this module, entry point app.js, just like we import ReactDOM,

And in this module, entry point app.js, just like we import react-dom, we can also import without a name the path to the app, do css. So same directory /app do css. And when I save this, the styles are back one more time. Alright, let's make a quick note here. If I open the dev tools, in the document heads, the styles we've created have been injected in a style tag. And so this is VI doing its own little management.

the styles we've created have been injected in a style tag. And so this is VI doing its own little management here in development. It'll put the style in a style tag and then in production it'll create a separate CSS file and then import it. So by moving our CSS imports from the HTML file to the JavaScript file, with the import statement, we can hand off the responsibility to VE to make the best decision, what's the most logical

we can hand off the responsibility to VE to make the best decision, what's the most logical for development and production. And so it's pretty good to let the framework handle this instead of us doing the management. Alright, I had enough of this yellow background, so I will keep the app CSS file, but I'll remove the styles for now and save the file. So we are back to an UN style page

but I'll remove the styles for now and save the file. So we are back to an UN style page and we're going to use some other CSS here in a little bit. But first I wanna talk about something I haven't covered when talking about JSX earlier and its style objects. So we've seen that in JSX, you can have a className attributes and then pass my class like this. But just like you can in HTML, you can also have inline styles with these style attributes.

But just like you can in HTML, you can also have inline styles with these style attributes. Now, there is a big difference here compared to HTML. Instead of having a string of CSS like this, this will not work. And matter of fact, it's bombed our app. You can see that when using JSX, the style prop expects a mapping, a key value pair instead of a string. And you have an example here. So in other words, we need to find a way

And you have an example here. So in other words, we need to find a way to pass a JavaScript object to this declaration, something like that. But that still doesn't work. It looks like it's still reading it as a string. Okay, so you might remember from a previous lesson that we had a variable, let's go here. const tech = react and vet. And then we had used a set of curly braces.

Cons, tech equals react and vet. And then we had used a set of {} to basically escape the world of what looks like HTML and enter the world that looks like JavaScript. And there we could use the tech and you can think of these {} around the world tech here as a gateway to JavaScript expressions. So JSX looks like HTML, you have the whole markup with divs, h1, uls, et cetera.

So JSX looks like HTML, you have the whole markup with divs, h1s, uls, et cetera. And then whenever you want to have JavaScript inside of this markup, you use curly braces and you can have a JavaScript expression inside of it. And so inside a string here is one way that you can enter and exit JavaScript. And you can also do it on attributes, but instead of having quotes that define a string, you're going to have directly the curly braces.

but instead of having quotes that define a string, you're going to have directly the { curly braces after the equal sign as the expression that is going to populate that style attribute. That still doesn't work. And you can see that the linter is not happy. So I will fix it, but hopefully you understand what's happening here. I now have double sets of { curly braces here. Is that a specific escape syntax? Well, no.

I now have double sets of curly braces here. Is that a specific escape syntax? Well, no. The first set of curly braces mention, Hey, I'm entering JavaScript expressions. And then the next set of curls inside of it is your JavaScript object. So it looks like double curly, but it's really entering JavaScript and then creating an object inside of it. This time when I save it should work.

and then creating an object inside of it. This time when I save it should work. And yet we have this wonderful looking black text on red background. It's pretty common in React to use style attributes to style specific elements. And because it's JavaScript inside the style object, you have a lot of power and you can do super cool stuff. Let's say for example, we had a theme object that had some keys like primary Rebecca Purple here.

Let's say for example, we had a theme object that had some keys like primary RebeccaPurple here and secondary paleVioletRed. We'll take that. Well now because it's JavaScript, you could access these values theme.primary. And you know what? Maybe let's make the color white. And there you go. If you ever in doubt with the CSS in JavaScript object syntax, you can use something like transform DevTools.

with the CSS in JavaScript object syntax, you can use something like transform Do tools. So here I've selected CSS to JS object and you can paste any CSS and it will transform it to the correct CSS in JavaScript object syntax. React has a huge ecosystem of styling libraries that leverage CSS and CSS in JavaScript object. You have libraries like styled-components, chakra-ui, styletron, or StyleX.

You have libraries like style-components, chakra, UI styletron, or StyleX. And these are all really interesting solutions that I suggest you check out. But for the rest of this course and this application, we are going to use my favorite styling approach, tailwindcss, tailwindcss version four is super easy to set up and we are using V, so we can use the V plugin. So I'll show you the complete setup.

and we are using V, so we can use the V plugin. So I'll show you the complete setup for Tailwind from scratch. All right, strap in step one npm install tailwindcss and add tailwindcss/v. Okay, that's the npm packages done in the vite.config.js file. Let's put the import at the top and I will also import the tailwindcss vite-plugin from vite and register it after the React one and call it. And at this point V is already ready.

and register it after the React one and call it. And at this point V is already ready to process our Tailwind style. We just need to go in a .css file that already exists and add the @import 'tailwindcss/base';, @import 'tailwindcss/components';, and @import 'tailwindcss/utilities'; there. Remember we created that app, that CSS file in here. I can add @import 'tailwindcss/base';, @import 'tailwindcss/components';, and @import 'tailwindcss/utilities';, and we are done. When I check the browser, once again, I'm still expecting the h1 tag to have this RebeccaPurple background and white text,

I'm still expecting the h1 tag to have this RebeccaPurple background and white text, but it should be resized to 16px because of the Tailwind Reset style. Let's not forget to restart the server with npm run dev and whoops, what is going on? Aha, look at this. Another instance of issues with ES modules and require. So basically the Tailwind CSS plugin is ES modules only. So it only works with script types module.

So basically the Tailwind CSS plugin is ES modules only. So it only works with script types module. And sort of like we've done in our index.html file here and added type="module", we actually need to also do that at the package.json level and here add a type of module. And with that in place, if we rerun npm run dev, everything should go smoothly. It looks like it does. And when we look at the browser, we have exactly what I was hoping for.

It looks like it does. And when we look at the browser, we have exactly what I was hoping for. We have the font size resize to 16 pixels, which tells me that Tailwind CSS is working. So in my app, that JSX file where we import the tailwind styles, let me remove the theme styles and the style attributes here. And we're gonna go with a few tailwind classes. So let's go with font-monospace just to see that it works.

And we're gonna go with a few tailwind classes. So let's go with font-monospace just to see that it works and maybe make it bigger. With text-xl, it's not gonna look great, but it's going to give us the confidence that Tailwind CSS is working properly. And that's it. This time we're completely ready to start building with React. We are using Tailwind CSS, but this course is not going to focus on Tailwind at all.

We are using Tailwind CSS, but this course is not going to focus on Tailwind at all or just a little bit. Sometimes we are going to stay locked in on the React knowledge. And real quick before I let you go, just know that if you wanna start a new project, you don't have to do all of the things we've done manually. If you want to use vite, you can go npm, create vite at latest,

If you want to use vite, you can go npm, create vite at latest, and then you will be able to choose different startup projects. Let's call it VProject. And here you can select react, and then choose if you want TypeScript, JavaScript, react-router, et cetera. That'll set you up with the vite plugin JavaScript entry points, the type module on the package.json.

That'll set you up with the V plugin JavaScript entry points, the type module on the package that JS O, and basically everything that we've done manually and a little bit more.