Images and Styles | Mastering React: An In-Depth Zero to Hero Video Series

Summary

In this React JS tutorial, the instructor introduces beginners to adding images and styles in functional components. They demonstrate using direct URLs, data URLs, and local images by importing them into the component. The video then covers applying styles through inline styles and CSS classes, highlighting potential issues with global CSS. The instructor introduces CSS modules to avoid style conflicts, showcasing how to scope styles locally. The video concludes with a challenge for viewers to create an application and provides a GitHub link for solution code.

Takeaways

• 😀 This video is part of a React JS tutorial series aimed at beginners.
• 📚 The previous video explained how to use the useState hook for state management in functional components.
• 🖼️ The video demonstrates how to add images to a React component, including using direct URLs, data URLs, and local images.
• 📁 To display a local image, it must be imported into the component with the correct file path and extension.
• 🎨 The video covers two methods for applying styles in React: inline styles and using CSS classes.
• 🔗 Inline styles are applied directly to elements, while CSS classes require creating a CSS file and importing it into the component.
• 🚫 A drawback of using CSS classes is that they are scoped to the entire application, not just the component they are imported into.
• 🔑 CSS Modules are introduced as a solution to scope CSS locally, preventing style leakage across components.
• 📝 The video instructs viewers to change the file extension to .module.css to use CSS Modules and import them differently to ensure local scoping.
• 🛠️ The video concludes with a task for viewers to create an application following the tutorial's design and offers a Git repo for solution code.

Q & A

What is the main focus of the 'React JS - Zero to Hero series'?

The main focus of the 'React JS - Zero to Hero series' is to teach beginners how to learn React JS from scratch.

What was the topic of the previous video in the series?

The previous video explained how to maintain states in functional components using the useState hook.

How can you add an image to a React component?

You can add an image to a React component by using the URL in the src attribute of the image element, or by using a data URL.

What is the difference between using a direct URL and a data URL for images in React?

A direct URL refers to hosting the image externally and linking it directly, while a data URL embeds the image data directly into the source attribute using a Base64 encoded string.

How do you import and display a local image in a React component?

To import and display a local image, you first create an images folder in the source directory, place the image there, import it into your component by specifying the correct path and file extension, and then use it in the src attribute of the image element.

What are the different ways to apply styles to a React component?

There are two main ways to apply styles to a React component: using inline styles directly on the element and using a CSS file with class names.

What is the potential issue with using class names in CSS files imported into React components?

The potential issue is that the CSS is scoped to the entire application, not just the component it's imported into, which can lead to style overrides and unexpected behavior.

How do CSS modules help in scoping styles locally in a React application?

CSS modules scope class names and animation names locally by default, ensuring that styles are only applied to the component that imports the CSS module.

How do you convert a regular CSS file into a CSS module in a React project?

To convert a regular CSS file into a CSS module, change the file extension from '.css' to '.module.css', and when importing, use the import statement with a variable name to capture the scoped class names.

What is the unique naming convention used by CSS modules in React?

CSS modules use a unique naming convention where class names are transformed into unique identifiers, often a combination of the component name, the class name, and a hash, to ensure local scoping.

Where can the audience find the solution code for the tasks mentioned in the video?

The solution code for the tasks can be found in the Git repository linked in the video description.

Outlines

00:00

🖼️ Adding Images and Styles in React Components

This paragraph introduces viewers to the React JS 'Zero to Hero' series, aimed at beginners. It covers how to add images to React components by using direct URLs or data URLs. The video also demonstrates the use of local images by creating an 'images' folder and importing images into components. The instructor then explains how to apply styles to components, first by using inline styles and then by using CSS classes. The paragraph concludes with a discussion on the potential issue of CSS scoping in React applications and introduces CSS modules as a solution to scope styles locally within components.

05:01

🎨 Utilizing CSS Modules for Local Scoping

The second paragraph delves into the use of CSS modules in React to avoid global style conflicts. It explains how to rename a CSS file to include '.module.css' to enable local scoping. The video shows how to import and use CSS modules in components, resulting in unique class names that prevent styles from leaking to other components. The instructor then encourages viewers to create their own application following the tutorial's design and offers a Git repository link for the solution code. The video ends with a call to action for likes, subscriptions, and support for the channel.

Keywords

💡React JS

React JS is a popular open-source JavaScript library for building user interfaces, particularly for single-page applications. It is maintained by Facebook and a community of individual developers and companies. In the context of the video, React JS is the main theme as the series is designed to teach beginners how to learn React JS from scratch, with a focus on various aspects of the library including state management and styling components.

💡useState hook

The useState hook is a feature in React that allows state to be added to functional components. It is part of React's Hooks API, introduced in version 16.8. In the video, the speaker has previously explained how to maintain states in functional components using the useState hook, which is essential for managing state in React applications.

💡Functional Component

A functional component in React is a component that is defined as a JavaScript function. It receives props as its input and returns JSX as its output. The video mentions functional components in the context of using hooks like useState to manage state, which is a common practice in modern React development.

💡Image Element

In the context of the video, an image element refers to the HTML <img> tag used in React components to display images. The speaker explains how to use the 'src' attribute to reference images, either from a direct URL or from local files, which is a fundamental aspect of embedding media in web applications.

💡Data URL

A Data URL is a method of embedding small files directly into a web page, which can include images. The video script mentions using a Data URL for images as an alternative to hosting images externally. This approach can be useful for including small images directly within the code for convenience.

💡Local Images

Local images refer to images stored on the same server or within the project directory. The video discusses how to import and display local images in a React component, which involves creating an images folder and importing the image using a specific path, illustrating a common workflow in web development.

💡Inline Styles

Inline styles in React are styles that are directly applied to a component's element using JavaScript object syntax. The video demonstrates applying an inline style to change the color of an h1 tag to red, showcasing a quick and direct method of styling React components.

💡className

In React, the 'className' prop is used to apply CSS classes to components. The video script explains how to use 'className' in conjunction with CSS files to style components, which is a standard practice for applying styles in a maintainable and scalable way.

💡CSS Modules

CSS Modules are a feature that allows for local scoping of CSS by automatically creating unique class names. The video explains the concept of CSS Modules and how to use them by renaming the CSS file to include '.module.css' and using the imported styles with a unique local scope, which helps prevent style leakage across components.

💡Webpack

Webpack is a static module bundler for modern JavaScript applications. It is used to bundle JavaScript files for usage in a browser, and it can also transform, bundle, or package other resource types. The video mentions Webpack in the context of identifying CSS modules by the '.module.css' file extension, highlighting its role in modern web development toolchains.

💡Git repo

A Git repository, or 'repo', is the storage location for a project's source code, including all files, folders, and their revision history. The video concludes by directing viewers to a Git repository for solution code, emphasizing the importance of version control and community sharing in software development.

Highlights

Introduction to React JS Zero to Hero series for beginners.

Explanation of maintaining states in functional components using useState hook.

Upcoming videos will cover other hooks in React.

Introduction to adding images and styles in React components.

Demonstration of using a direct URL for an image in a component.

Using a data URL to display an image.

How to use local images by importing them into a component.

Importing images requires specifying the correct path and file extension.

Applying inline styles to a React component.

Using className to apply styles from a CSS file.

Importing a CSS file and applying styles to a component.

The drawback of CSS scoping in React applications.

Demonstration of overriding styles and its impact on the application.

Introduction to CSS modules for local scoping of styles.

Changing the file name to .module.css to use CSS modules.

Importing CSS modules and using scoped class names.

Unique class names generated by CSS modules for each component.

Task for viewers to create an application with a given design.

Providing a Git repo link for solution code in the video description.

Call to action for likes, subscriptions, and support.

Transcripts

Hi Friends

Welcome back to React JS - Zero to Hero series.

This series is for beginners who wants to learn React JS from Scratch.

In the last video I have explained about how we can maintain states in functional component

using useState hook.

And I am going to explain about the other hooks in the upcoming videos.

But before that, I wanted to explain few more useful concepts.

So, in this video I am going to explain about how we can add images and styles in react

component.

Let's start.

I have created a new react application, In which I have created a new component and configured

that in the App component.

In the new component, I am just having an image element.

If the image needs to be shown in this component is hosted somewhere, we can directly use the

URL in the src props of the image element.

And so, we can see the image.

Instead of direct URL, we can also use the data URL.

Like this.

Now we can see this image as well.

Sometimes, we may need to use some local images.

Inside the source folder, I have created an images folder.

Inside that, I have kept an image.

I want to display this image.

To display the local image, first I need to import that image in my component.

I can give any name here.

And, I need to specify the correct path.

Otherwise it will throw error.

Also, please note that while importing we need to give the file extension as well.

But while importing the javascript component, we do not specify extension.

Now, I can use this image wherever needed.

Like this.

And so, we can see this image is also displaying.

Next, let's see how we can apply styles.

For that, I have created another component.

So, in app component, let me comment this one and configure this one.

Also, in one of our previous application, we have created a student component.

Let me copy that and let me use it here.

And so, we can see this.

So, we are going to apply some styles in student component.

In our previous applications, we have applied some inline styles.

That is one way of adding styles to react component.

Let me apply an inline style to this h1 tag.

Let me change the color to red.

Ok.

Another way is to use class, in react it is going to be className.

You would have noticed this also in few of my previous applications.

Let me add a className to this div.

And, I can create a css file and I can import this css file in this component.

In this css file, I can add this class.

To this class, first let me give a border.

And so, we can see this.

I am going to apply few more styles.

This is how we can attach a css file to a component and apply some styles.

Ok.

Let me quickly create another css file and let me import that in this component and let

me apply a style to that.

And so, we can see this.

There is a drawback in this approach.

We have used this student class in this student dot css file only and this file is imported

only in student component.

But the problem here is, in react even though this student dot css is imported only in the

student component, the css is scoped to the entire application.

That means, in another component, if I have a div with class as student, that will also

get the same style.

Let me show you.

Let me create a div and add class name as student.

So, we have to be careful, otherwise we may override styles.

That may lead to unexpected behavior.

For example, if I add display none to this class in this css file, this will reflect

there also and so we will not see anything.

Let me comment this.

To solve this, we have CSS modules.

A CSS Module is a CSS file in which all class names and animation names are scoped locally

by default.

So, how can we make use of this CSS modules.

First thing to do is, we need to change the file name.

Instead of dot css, we need to have dot module dot css.

Only then, module bundler like webpack will identify this as a css module.

And so, let me change that.

And after that, while importing we need to import it like this.

This name can be anything.

And here, instead of specifying the class name directly, we need to have it like this

name dot class name.

And so, we can see now the student class styles from this file are applied only to this component.

The div from the other component is not having this style.

If I inspect this, you will understand.

We can see the class name is changed to some unique name.

And, this class name is not changed because we are not using css module there.

Let me use there also.

We can see for the other component classes, the unique names are different.

And now, if I uncomment this, we can see it is not reflecting here.

So CSS modules are very useful to scope our css in react applications.

Let me give you a task.

You can try to create an application like this.

Try to follow the exact design.

You can use any images and content.

Try this.

If you need the solution code, you can take it from this Git repo.

The link is available in the description.

That's all for today.

Please like this video.

Subscribe my channel and support me.

Thank you.

Bye.