React JS Tutorial: CSS Stylesheets 🎯

Welcome back to CodeYourCraft! Today, we're diving into the world of CSS Stylesheets in React JS. By the end of this lesson, you'll have a solid understanding of how to style your React components.

Why CSS in React? 💡

In a React application, you can style your components using JavaScript, CSS, or a CSS-in-JS library like Styled Components or Emotion. Today, we'll focus on using external CSS files, as it's a great way to organize and reuse styles across your application.

Setting up CSS 📝

To link an external CSS file in your React project, follow these steps:

Create a new CSS file in the src/styles folder. Let's call it App.css.
Inside the src folder, create a new folder called public.
Inside the public folder, create a new folder called css.
Move your CSS file (App.css) into the public/css folder.
In your src folder, open the index.js file and import your CSS file at the top:

javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/App.css'; // <-- Import your CSS file here!

// ... rest of your code

Styling a Component 🎨

Now let's style a simple React component using our external CSS file:

First, create a new component called Title:

javascript

import React from 'react';

const Title = () => {
  return (
    <h1>Welcome to CodeYourCraft</h1>
  );
};

export default Title;

In your App.css file, add the following styles:

css

h1 {
  font-family: Arial, sans-serif;
  color: #333;
  text-align: center;
}

Update your App component to use the Title component:

javascript

import React from 'react';
import ReactDOM from 'react-dom';
import Title from './Title'; // <-- Import your new component here!
import './styles/App.css'; // <-- Import your CSS file here!

const App = () => {
  return (
    <div>
      <Title />
    </div>
  );
};

export default App;

Run your application and see the magic! 🎉

Pro Tip 💡

📝 Remember, for components within components, use the className prop instead of the class prop.

Quiz Time 🎲

That's it for today! In the next lesson, we'll dive deeper into CSS Stylesheets in React, exploring advanced techniques and practical examples. See you then! 😄

Happy coding! 🤖💻🌟