REACT Tutorial

Introduction to React

React is a popular JavaScript library used to build modern, interactive user interfaces, especially single-page applications (SPAs). It was created by Facebook and has become widely adopted for creating reusable UI components.

Why Use React?

• Build complex UIs by breaking them into smaller, reusable components.
• Efficiently update and render the right components when your data changes using a virtual DOM.
• JSX syntax makes writing UI code easier by combining HTML-like code with JavaScript.
• Strong community and ecosystem with lots of tools and libraries.

Key Concepts

• Components: Independent, reusable pieces of UI.
• JSX: JavaScript syntax extension that looks like HTML.
• Props: Inputs to components that allow data passing.
• State: Internal data managed within a component.
• Virtual DOM: A lightweight copy of the real DOM that React uses to optimize updates.

Basic React Component Example

import React from 'react';

function HelloWorld() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React component.</p>
    </div>
  );
}

export default HelloWorld;
  

How to Use This Component?

Import and render the HelloWorld component inside your main application file (usually App.js):

import React from 'react';
import HelloWorld from './HelloWorld';

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;
  

Quick React Setup

To create a new React project easily, use create-react-app CLI tool:

npx create-react-app my-app
cd my-app
npm start
  

This will start a local development server and open your new React app in the browser.

Summary

• React is a JavaScript library for building reusable UI components.
• It uses JSX, a syntax that looks like HTML within JavaScript.
• Components can receive props and manage state.
• React’s virtual DOM improves rendering efficiency.
• create-react-app helps you start React projects quickly.