We use cookies to enhance your experience on the site

Your first component

At the heart of React are components - self-contained, reusable blocks of code that encapsulate HTML, CSS, and JavaScript. Components are like LEGO blocks from which you build your user interface. In this module, we'll create our first React component and understand its basic structure.

What is a React component?

A React component is a JavaScript function (or class) that returns a React element (JSX). Components allow you to split the user interface into independent, reusable parts and think about each part separately.

Creating your first functional component

Let's start by creating a simple functional component. A functional component is a regular JavaScript function that returns JSX:

1// File: WelcomeMessage.jsx
2import React from 'react';
3
4function WelcomeMessage() {
5  return (
6    <div className="welcome-container">
7      <h1>Welcome to the world of React!</h1>
8      <p>This is your first component.</p>
9    </div>
10  );
11}
12
13export default WelcomeMessage;

Key elements of this component:

Import React -
```
import React from 'react';
```
(in newer versions of React this isn't necessary, but it's good practice to include this import)
Function declaration -
```
function WelcomeMessage() {...}
```
Return with JSX - The function returns JSX that defines the component structure
Export -
```
export default WelcomeMessage;
```
allows importing the component in other files

JSX - what is it exactly?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write code resembling HTML directly in JavaScript. Without JSX, creating React elements would be much more complex:

1// With JSX
2function WelcomeMessage() {
3  return (
4    <div className="welcome-container">
5      <h1>Welcome to the world of React!</h1>
6      <p>This is your first component.</p>
7    </div>
8  );
9}
10
11// Without JSX (this is what React actually transforms JSX into)
12function WelcomeMessage() {
13  return React.createElement(
14    'div',
15    { className: 'welcome-container' },
16    React.createElement('h1', null, 'Welcome to the world of React!'),
17    React.createElement('p', null, 'This is your first component.')
18  );
19}

As you can see, JSX makes the code much more readable and resembles HTML, which most developers are familiar with.

JSX rules

JSX looks like HTML but has several important differences:

className
instead of
class
- Since "class" is a reserved keyword in JavaScript, in JSX we use
```
className
```
to define CSS classes
Attributes use camelCase - HTML attributes like
```
onclick
```
are written as
```
onClick
```
in JSX
Self-closing tags - Tags like
```
<img>
```
must be closed:
```
<img />
```
JavaScript expressions in JSX - You can use JavaScript expressions in curly braces:
```
{expression}
```

Using properties (props)

Components can receive data through properties (props). Props are a way to pass data from a parent component to a child component:

1// File: WelcomeMessage.jsx
2function WelcomeMessage(props) {
3  return (
4    <div className="welcome-container">
5      <h1>Welcome, {props.name}!</h1>
6      <p>{props.message}</p>
7    </div>
8  );
9}
10
11export default WelcomeMessage;
12
13// Using the component
14<WelcomeMessage name="Cosmonaut" message="Ready for a journey through the React galaxy?" />

We can also use props destructuring, which makes the code more readable:

1function WelcomeMessage({ name, message }) {
2  return (
3    <div className="welcome-container">
4      <h1>Welcome, {name}!</h1>
5      <p>{message}</p>
6    </div>
7  );
8}

Conditional rendering

One of the strengths of React components is the ability to render different elements depending on certain conditions:

1function WelcomeMessage({ name, isLoggedIn }) {
2  return (
3    <div className="welcome-container">
4      {isLoggedIn ? (
5        <h1>Welcome back, {name}!</h1>
6      ) : (
7        <h1>Welcome, guest! Log in to continue.</h1>
8      )}
9    </div>
10  );
11}

Rendering lists

React components are great for rendering lists of data:

1function AstronautList({ astronauts }) {
2  return (
3    <div className="astronaut-list">
4      <h2>Space mission crew:</h2>
5      <ul>
6        {astronauts.map(astronaut => (
7          <li key={astronaut.id}>
8            {astronaut.name} - {astronaut.role}
9          </li>
10        ))}
11      </ul>
12    </div>
13  );
14}
15
16// Usage
17const crewMembers = [
18  { id: 1, name: "John Smith", role: "Captain" },
19  { id: 2, name: "Anna Green", role: "Scientist" },
20  { id: 3, name: "Thomas Wright", role: "Engineer" }
21];
22
23<AstronautList astronauts={crewMembers} />

Note the

key

attribute - it is required when rendering lists so that React can efficiently update the DOM when the list changes.

Styling components

There are several ways to style React components:

1. External CSS stylesheet

1// WelcomeMessage.css
2.welcome-container {
3  padding: 20px;
4  border-radius: 8px;
5  background-color: #f5f5f5;
6  text-align: center;
7}
8
9// WelcomeMessage.jsx
10import React from 'react';
11import './WelcomeMessage.css';
12
13function WelcomeMessage({ name }) {
14  return (
15    <div className="welcome-container">
16      <h1>Welcome, {name}!</h1>
17    </div>
18  );
19}

2. Inline styles

1function WelcomeMessage({ name }) {
2  const styles = {
3    container: {
4      padding: '20px',
5      borderRadius: '8px',
6      backgroundColor: '#f5f5f5',
7      textAlign: 'center'
8    },
9    heading: {
10      color: '#333',
11      fontSize: '24px'
12    }
13  };
14
15  return (
16    <div style={styles.container}>
17      <h1 style={styles.heading}>Welcome, {name}!</h1>
18    </div>
19  );
20}

3. CSS Modules

1// WelcomeMessage.module.css
2.container {
3  padding: 20px;
4  border-radius: 8px;
5  background-color: #f5f5f5;
6  text-align: center;
7}
8
9// WelcomeMessage.jsx
10import React from 'react';
11import styles from './WelcomeMessage.module.css';
12
13function WelcomeMessage({ name }) {
14  return (
15    <div className={styles.container}>
16      <h1>Welcome, {name}!</h1>
17    </div>
18  );
19}

Component composition

One of the greatest advantages of React is the ability to compose larger interfaces from smaller components:

1// Button.jsx
2function Button({ onClick, children, color = 'blue' }) {
3  return (
4    <button
5      onClick={onClick}
6      style={{
7        backgroundColor: color,
8        color: 'white',
9        padding: '10px 15px',
10        border: 'none',
11        borderRadius: '4px',
12        cursor: 'pointer'
13      }}
14    >
15      {children}
16    </button>
17  );
18}

Summary

In this module we learned:

What React components are and how to create them
The basics of JSX and its rules
How to use props to pass data
Conditional rendering and lists
Different methods of styling components
Component composition for building larger interfaces

Components are the fundamental element of React, and understanding how they work is key to effective React application development. In the following modules, we'll dive deeper into advanced concepts like state, component lifecycle, and hooks.

Go to CodeWorlds→