React js

Introduction to React

Introduction to React

What is React?

  • React is a JavaScript library developed by Facebook.

  • It’s used for building interactive user interfaces (UIs), especially single-page applications.

  • React lets you create reusable components that manage their own state and efficiently update the UI when data changes.

Why Use React?

  • Component-based architecture: Build encapsulated components that manage their own state.

  • Declarative: Describe what you want your UI to look like; React handles updates efficiently.

  • Virtual DOM: React uses a lightweight copy of the actual DOM to minimize slow updates.

  • Large ecosystem: Huge community, many libraries, and tools support React development.

React Concepts

Concept Explanation
Components Reusable UI building blocks
JSX JavaScript XML syntax for writing HTML-like code inside JavaScript
Props Inputs to components to pass data
State Internal data managed by components
Lifecycle Special methods to hook into component creation, update, and removal

Simple React Component Example

jsx
import React from 'react';

function HelloWorld() {
return <h1>Hello, React!</h1>;
}

export default HelloWorld;

Or using a class:

jsx
import React, { Component } from 'react';

class HelloWorld extends Component {
render() {
return <h1>Hello, React!</h1>;
}
}

export default HelloWorld;

JSX Example

jsx
const element = <h1>Hello, world!</h1>;

JSX looks like HTML but is actually JavaScript — you can embed variables, expressions, and components:

jsx
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

Rendering Components

React renders components into the real DOM using:

jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import HelloWorld from './HelloWorld';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloWorld />);

Summary

  • React helps build dynamic, interactive UIs with reusable components.

  • Uses JSX to blend JavaScript and HTML-like code.

  • Handles UI updates efficiently with a virtual DOM.

  • Has a rich ecosystem and community support.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *