React Basics

Welcome to the React basics tutorial!

What is React?

React is a JavaScript library for building user interfaces.

It's component-based, making it efficient and scalable.

Key Concepts

Components: Reusable building blocks.
JSX: Syntax extension for JavaScript.
Virtual DOM: Efficiently updates the UI.

Example

Here's a simple React component:

This is a React component.

``` ```css /* style.css */ body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } main { padding: 20px; background-color: #fff; margin: 20px; } section { background-color: #f4f4f4; padding: 20px; border-radius: 5px; margin-bottom: 20px; } section h2 { font-size: 2em; margin-bottom: 10px; } section ul { list-style: none; padding: 0; } ul { padding-left: 20px; } li { margin-bottom: 5px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; position: relative; height: 30px; border-top: 1px solid #ccc; } /* Responsive adjustments */ @media (max-width: 600px) { main { padding: 10px; } section { padding: 8px; } } ``` ```javascript /* script.js */ // This is a placeholder for the React code. Replace with actual components and logic.