ReactJS Introduction and Basics

About ReactJS

• React: A JavaScript library (not a framework) for building user interfaces, particularly for web applications.
• Components: The core building blocks in React. These are self-contained, reusable pieces of code (like Legos).
• JSX: JavaScript XML, a syntax extension that allows writing HTML-like code within JavaScript files.
• Virtual DOM: A lightweight version of the real DOM. React uses this to track changes and update only the specific parts of the real DOM, improving performance.

Prerequisites

• JavaScript: Knowledge of arrays, classes, objects, and ES6 features like arrow functions is necessary.
• HTML & CSS: Basic understanding since React components involve rendering HTML elements and applying styles.

Installation and Setup

1. Download Node.js from nodejs.org.
   • Node.js is a backend JavaScript runtime environment.
   • We need it mainly for the node package manager (npm).
2. Install Node.js and follow the setup instructions (Next, accept license, etc.).
3. Text Editor: Recommended is Visual Studio Code (download from code.visualstudio.com).
4. Create Project Folder: Using VS Code, create a project folder (e.g., website).
5. Command Prompt/Terminal: Open within VS Code or use your system's default.
6. Initialize Project:
   • Run: npm create vite@latest to set up a new project using Vite (modern development server replacing Create React App).
   • Follow prompts to name the project (e.g., my-react-app), choose React, and select either TypeScript or JavaScript.
   • Commands to run:
     • cd my-react-app (navigate to project directory)
     • npm install (install dependencies)
     • npm run dev (start the development server)
7. Server Address: The development server will be available at a provided address (e.g., http://localhost:3000).

Project Structure

• node_modules: Contains external libraries and packages.
• public: Holds public assets like images, fonts, etc., available via URL but not bundled in the final output.
• src: Main folder where majority of the time is spent.
  • assets: Similar to public assets but bundled into the output.
  • Main Files:
    • main.jsx: Main JavaScript file that imports and includes components.
    • App.jsx: Root component that ties other components together.
    • CSS files: app.css for component-specific styles and index.css for global styles.
  • index.html: Entry point with a <div id="root"></div> where React components are rendered.