Introduction to React Development

React is a popular JavaScript library developed by Facebook for building user interfaces, particularly single-page applications. Developers choose React for several compelling reasons:

  • Component-Based Architecture: Build encapsulated components that manage their own state and compose them to create complex UIs
  • Virtual DOM: React’s efficient rendering system minimizes direct DOM manipulation for better performance
  • Strong Ecosystem: Rich collection of libraries, tools, and community support
  • Cross-Platform Development: React Native extends React principles to mobile app development

Essential React Ecosystem Components

Beyond React itself, a typical development environment includes:

  • Package Managers: npm or Yarn to manage dependencies
  • Build Tools: Webpack, Babel for bundling and transpiling code
  • State Management: Redux, Context API, or MobX for managing application state
  • Routing: React Router for navigation between components
  • UI Libraries: Material-UI, Chakra UI, or Ant Design for pre-built components
  • Testing Tools: Jest, React Testing Library for testing components

Installing Node.js and npm

Method 1: Direct Download

  1. Download and install Node.js from nodejs.org
  2. Verify installation by opening a terminal and running: 
    node --version
npm --version

Method 2: Using Homebrew (macOS/Linux)

  1. Install Homebrew if not already installed: 
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  2. Install Node.js using Homebrew: 
    brew install node
  3. Verify installation: 
    node --version
npm --version

Creating a React Application

  1. Open a terminal and navigate to the target host directory
  2. Create a new React application: 
    npx create-react-app my-app

    Note: Replace “my-app” with a preferred project name

  3. Navigate to to the new project folder: 
    cd my-app

Ref: create-react-app

Project Structure Overview

  • public/: Contains static files like HTML and images
  • src/: Contains React source code
  • package.json: Lists dependencies and scripts
  • node_modules/: Contains installed packages (created automatically)

Creating a Hello World App

  1. Open src/App.js and replace its contents with: 
    import React from 'react';
   
function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}
   
export default App;

Running the React Application

  1. In the terminal (from project directory), run: 
    npm start
  2. The browser will open automatically to http://localhost:3000
  3. The browser content should present “Hello, World!” on the page

Building for Production

When ready to deploy, create an optimized build:

npm run build

This will generate a build/ folder containing the production-ready files.