Day 2 of Learning React: Understanding JSX, Introduction to Components, and Creating Your First React Component

Welcome to Day 2 of your React learning journey! If you haven’t already, make sure to check out?Day 1 of Learning React: Setting Up the Environment?where we covered setting up the development environment for React. In today’s lesson, we’ll dive deeper into React by understanding JSX, getting familiar with components, and creating our very first React component. Let’s continue building our React skills!

Understanding JSX: Combining JavaScript and HTML

JSX is a syntax extension for JavaScript that enables us to write HTML-like code within our JavaScript files. It’s a powerful tool that combines the expressiveness of HTML with the flexibility of JavaScript, making it ideal for building dynamic user interfaces in React.

In JSX, we can use familiar HTML tags and include JavaScript expressions within curly braces?{}?to create dynamic content. This seamless integration allows us to leverage the full power of JavaScript while constructing our UI.

To grasp the concept of JSX, let’s dive right in and create our first React component together. But before we do that, let’s briefly discuss the concept of components in React.

Introduction to Components: Building Blocks of React

In React, components are the building blocks of our application’s user interface. They encapsulate specific UI logic and can be reused throughout our application. Components allow us to break down our UI into smaller, manageable pieces, making our code more modular and maintainable.

There are two types of components in React: functional components and class components. In this article, we’ll focus on functional components, which are simple JavaScript functions that return JSX code.

Now, let’s create our first React component!

Creating Your First React Component

1. Open your code editor and navigate to the?src?folder of your React project.
2. Create a new file called?FirstComponent.jsx.
3. Open?FirstComponent.jsx?in your preferred text editor.
4. Write the following code in?FirstComponent.jsx:

import React from 'react';

function FirstComponent() {
  return <h2>This is my first React component!</h2>;
}
export default FirstComponent;        

In this code snippet, we import the essential?React?library and define a functional component called?FirstComponent. The component returns JSX code that renders an?<h2>?element with the text "This is my first React component!".

5. Save the?FirstComponent.jsx?file.

Congratulations! You have just created your first React component. This example demonstrates the simplicity and expressive nature of JSX in creating user interfaces with React.

Integrating Your Component into the App: Understanding App.js

Now, let’s integrate our?FirstComponent?into our application by understanding the?App.js?file.

In a typical React application, the?App.js?file serves as the entry point to our application. It's the top-level component that holds and renders other components. Think of it as the container that houses all the components and provides the structure for our app.

When you created your React application using the?create-react-app?command, the default project structure includes an?App.js?file.

Open the?App.js?file located in the?src?folder. This is where we'll integrate our?FirstComponent?and see how components can be composed together.

Inside the?App.js?file, you'll find a?return?statement within the?App?component's function body. This is where the JSX code is returned and rendered.

To integrate our?FirstComponent, add the following code within the?return?statement of the?App?component:

<FirstComponent />        

Save the?App.js?file.

Now, if you run your React application, you’ll see that the?<h2>?element from our?FirstComponent?is rendered on the page.

By adding the?<FirstComponent />?JSX element in the?App.js?file, we're telling React to render our?FirstComponent?within the?App?component.

Conclusion

Congratulations on completing Day 2 of your React learning journey! Today, we explored the power of JSX, learned about components in React, and created our first React component. We also integrated the component into our?App.js?file to see it in action.

Remember, mastering React takes time and practice. Take some time to experiment with creating more components, explore different JSX elements, and observe how they interact within your app. The more you practice, the more confident you’ll become in your React development skills.

Stay tuned for Day 3, where we’ll delve further into creating more complex components and exploring React’s lifecycle methods.

Keep up the great work, and happy coding!