React Component Basics

What You’ll Learn 📚

In this tutorial, you’ll learn the following:

• What React components are and why they’re important
• Key terminology and concepts
• How to create and use components with examples
• Common questions and troubleshooting tips

Introduction to React Components

React is a popular JavaScript library for building user interfaces, and at its core are components. Think of components as the building blocks of your application. Just like Lego bricks, you can combine them to create complex structures.

Key Terminology

• Component: A reusable piece of UI.
• JSX: A syntax extension for JavaScript that looks similar to HTML.
• Props: Short for properties, these are inputs to components.
• State: A way to manage data that changes over time within a component.

Simple Example: Hello World Component

import React from 'react';

function HelloWorld() {
  return 
Hello, World!
;
}

export default HelloWorld;

Progressively Complex Examples

Example 1: Greeting Component with Props

import React from 'react';

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

export default Greeting;

Example 2: Counter Component with State

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

export default Counter;

Example 3: Todo List Component

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build a project']);

  return (
    

      {todos.map((todo, index) => (
        
{todo}
      ))}
    
  );
}

export default TodoList;

Common Questions and Answers

1. What is a React component? A reusable piece of UI that can be used throughout your application.
2. How do props work? Props are inputs to components that allow you to pass data and event handlers down to child components.
3. What is state? State is a way to manage data that changes over time within a component.
4. Why use components? Components help break down the UI into manageable, reusable pieces, making your code more organized and easier to maintain.

Troubleshooting Common Issues

Warning: If your component isn’t rendering, check for syntax errors or missing imports.

Tip: Use the React DevTools browser extension to inspect your components and debug issues.

Practice Exercises

• Create a component that displays your favorite movie title.
• Modify the Counter component to decrement the count as well.
• Build a simple shopping list component with add and remove functionality.

Remember, practice makes perfect. Keep experimenting and building! 💪

Additional Resources

• React Components and Props Documentation
• React State and Lifecycle Documentation