Introduction to React: Your first component

React is a powerful JavaScript library used for building fast and interactive user interfaces. It is developed by Meta, and React components are the core building blocks of every React application.

Why We Use React?

React is widely used because it offers a clean development structure, reusable UI components, and a modern approach to creating scalable applications.

1. Component-based architecture: React breaks the UI into small reusable components for cleaner and more maintainable code.
2. Fast rendering with Virtual DOM: React compares changes in a virtual DOM and updates only what is necessary, improving performance.
3. Declarative UI: Developers describe what the UI should look like, and React updates it automatically based on state changes.
4. Unidirectional data flow: Data flows from parent to child, making applications easier to debug and predictable.
5. Large ecosystem & community: React offers a huge ecosystem, supporting tools like Redux, React Router, and excellent learning resources.

What Is a React Component?

React components are JavaScript functions that return JSX. Component names must begin with a capital letter. They combine HTML, CSS, and JavaScript into a single reusable unit.

export default function Profile() {
  return (
    <img
      src='url-here'
      alt='Katherine Johnson'
    />
  )
}

This Profile component can be used anywhere in the app using:

<Profile />

Importing & Exporting Components

Components are usually stored in separate files. We export them from one file and import them wherever needed.

export default function Profile() {
  return <h1>Hello, React!</h1>;
}

To import and use the component:

import Profile from './Profile';

export default function App() {
  return <Profile />;
}

By separating components into different files and importing them when required, React applications stay organized, scalable, and easier to maintain.

Learn more from the official docs: Click to Go Official Docs