Getting Started with ReactJS

February 16, 2025

ReactJS is a popular JavaScript library for building user interfaces, developed and maintained by Facebook. It enables developers to create fast and scalable web applications with a component-based architecture.

Why Use ReactJS?

Component-Based: Breaks UI into reusable pieces.
Virtual DOM: Improves performance by updating only changed parts.
One-Way Data Binding: Ensures predictable data flow.
Large Ecosystem: A vast collection of libraries and tools.

Setting Up a React Project

To start a new React project, you can use Create React App (CRA), Vite, or manually set up your environment. The easiest way is:

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

This will create a new React project and start a local development server.

Understanding JSX

JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code in JavaScript. Example:

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

Creating Components

React applications are built using components. A functional component example:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

State and Props

Props: Read-only values passed to components.
State: Internal data that can change over time.

Using state with useState hook:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}