Introduction to React & Development Environment

Workplace Context

You have just joined a software development team building a complex web application, like a project management tool, an e-commerce site, or a social media dashboard. They are using a JavaScript library or framework, such as React, to manage the user interface efficiently. Understanding why your team chose React and how to set up a development environment are the first crucial steps to becoming a productive member of the team. This training introduces React’s core ideas and guides you through setting up a standard project, mirroring the initial tasks you might encounter in a professional setting.

Learning Objectives

By the end of this lesson, learners will be able to:

• Explain the purpose of React as a JavaScript library for building user interfaces.
• Describe the basic concepts of the Virtual DOM and its benefits.
• Articulate the advantages of component-based architecture.
• Differentiate conceptually between Single Page Applications (SPAs) and Multi-Page Applications (MPAs).
• Set up a new React project using Vite with TypeScript.
• Identify key files and folders in a standard React project structure.
• Run the React development server.
• Use the basic features of React DevTools.

What is React?

React is an open-source JavaScript library, primarily maintained by Meta (formerly Facebook) and a community of individual developers and companies. Its core purpose is to build user interfaces (UIs), specifically for Single Page Applications (SPAs).

Key characteristics of React include:

1. Declarative: You describe what the UI should look like based on the current data (state), and React takes care of updating the actual browser DOM efficiently. This contrasts with imperative programming, where you manually specify each step to manipulate the DOM (e.g., “find this element, change its text, add this class”).
   • Example: Instead of writing steps like “Find the button. Add a ‘loading’ class. Disable it.”, you declare: “If the state is ‘loading’, render the button with the ‘loading’ class and disabled attribute.” React handles the underlying DOM changes.
2. Component-Based: UIs are built by combining small, reusable pieces called components. Each component manages its own logic and appearance. This promotes modularity, reusability, and maintainability, making complex UIs easier to manage. Think of building with LEGO bricks – each brick (component) is simple, but you can combine them to create intricate structures (applications).
3. Learn Once, Write Anywhere: While primarily used for web development (with react-dom), the core principles of React can also be applied to build mobile applications using React Native.

Is React a Library or a Framework?

You will often hear debates about whether React is a library or a framework. Technically, React itself is a library focused specifically on rendering the UI. However, building a complete application usually involves integrating React with other libraries for routing (like React Router), state management (like Context API or Redux), etc. This collection of tools often behaves like a framework. For practical purposes, focusing on its role in building UIs is most important.

Single Page Applications (SPAs) vs. Multi-Page Applications (MPAs)

• MPA (Traditional Approach): When you navigate between pages (e.g., Home, About, Contact), the browser requests a completely new HTML document from the server. This results in a full page reload. Think of traditional websites like Wikipedia.
• SPA (React’s Domain): The application typically loads a single HTML page initially. Subsequent navigation and UI updates are handled dynamically using JavaScript (React). React intercepts navigation, fetches data if needed (often from an API), and updates only the necessary parts of the page without a full reload. This generally leads to a smoother, faster user experience, similar to using a desktop application. Examples include Gmail, Facebook, and Trello.

React excels at building SPAs by managing the UI updates efficiently within that single page container.

The Virtual DOM

Directly manipulating the browser’s Document Object Model (DOM) can be slow, especially for frequent updates. Every change can trigger recalculations of layout, styles, and re-painting, which impacts performance.

React introduces a Virtual DOM (VDOM):

1. In-Memory Representation: The VDOM is a lightweight copy of the actual DOM, kept in memory as JavaScript objects.
2. Batching Updates: When the application’s state changes (e.g., due to user interaction), React first updates the VDOM, not the real DOM.
3. Diffing Algorithm: React then compares the updated VDOM with a previous snapshot of the VDOM to figure out the minimal set of changes required. This process is called “diffing”.
4. Efficient DOM Updates: Only the calculated changes are applied to the real browser DOM.

This process significantly reduces the number of direct manipulations on the actual DOM, leading to better performance, especially in applications with lots of dynamic content and updates.

Component-Based Architecture

This is arguably React’s most defining feature.

• Encapsulation: Each component encapsulates its own template (JSX - discussed in the next lesson), logic (JavaScript/TypeScript), and often styling.
• Reusability: Components can be reused throughout the application, or even across different projects. A Button component defined once can be used everywhere you need a button, ensuring consistency.
• Composability: Components can be nested inside other components, allowing you to build complex UIs by composing simpler pieces together.
• Maintainability: Changes to a specific part of the UI often only require modifying a single component, making updates and debugging easier.

Think about a typical webpage: it might have a navigation bar, a sidebar, a content area, and a footer. Each of these can be a separate component. The navigation bar might contain smaller components like Logo, NavLinks, and UserProfile. This hierarchical structure makes the codebase organized and scalable.

Introduction to Vite

To build React applications, we need a development environment that handles tasks like:

• Bundling our React code, JavaScript/TypeScript, and CSS into files browsers can understand.
• Providing a development server for live reloading during development.
• Optimizing the code for production deployment.

While create-react-app (CRA) was historically popular, Vite (pronounced /vit/, like “veet”) has emerged as a modern, significantly faster alternative.

Why Vite?

• Blazing Fast Dev Server: Vite uses native ES Modules (ESM) during development, avoiding the slow bundling process required by traditional bundlers like Webpack (used by CRA) on server start and updates. Changes are reflected almost instantly.
• Optimized Build: For production, Vite uses Rollup, a highly optimized bundler, to create efficient code bundles.
• First-Class TypeScript Support: Easily create projects with TypeScript out of the box.
• Extensible: Supports plugins for adding features.

Setting Up Your First React Project with Vite

Let us create our first React project.

Prerequisites:

• Node.js and npm: Ensure you have a recent LTS (Long-Term Support) version of Node.js installed. Node.js includes npm (Node Package Manager). You can verify your installation by opening your terminal or command prompt and running:

  node -v
  npm -v

  If you do not have them installed, download the LTS version from nodejs.org .

Activity 1: Create the Project

1. Open your terminal or command prompt.
2. Navigate to the directory where you want to create your project (e.g., cd path/to/your/development/folder).
3. Run the Vite creation command:

   npm create vite@latest

4. Vite will prompt you for a few details:
   • Project name: Enter a name for your project (e.g., react-fundamentals-app). Use kebab-case (lowercase letters and hyphens).
   • Select a framework: Use the arrow keys to navigate, select React, and press Enter.
   • Select a variant: Navigate, select TypeScript + SWC, and press Enter. (SWC is a fast Rust-based compiler used by Vite).
5. Vite will display instructions. Follow them:

   cd react-fundamentals-app  # Navigate into your new project directory
   npm install                # Install project dependencies (React, ReactDOM, etc.)

Activity 2: Explore the Project Structure

Open the newly created project folder (react-fundamentals-app) in your code editor (like VS Code). Let us examine the key files and folders:

• node_modules/: Contains all the third-party libraries and dependencies your project needs (installed via npm install). You typically do not edit anything here directly.
• public/: Contains static assets that are served directly by the development server and copied to the build output without processing. You might put fonts, icons (like vite.svg), or images here.
• src/: This is where most of your application code will live.
  • assets/: Often used for static assets (like images, CSS) that might be imported directly into your components. The react.svg is here.
  • App.css: Basic CSS styling for the App component.
  • App.tsx: The main application component. This is where the initial UI structure is defined (a .tsx file indicates TypeScript with JSX).
  • index.css: Global CSS styles applied to the entire application.
  • main.tsx: The entry point of your application. This file finds the root HTML element and tells React to render the <App /> component into it using ReactDOM.createRoot.
  • vite-env.d.ts: TypeScript declaration file for Vite-specific environment variables.
• .eslintrc.cjs: Configuration file for ESLint, a tool for code linting (finding potential errors and enforcing code style).
• .gitignore: Specifies files and folders that Git should ignore (e.g., node_modules, build output, environment files).
• index.html: The only HTML page in our SPA! It is the template Vite uses. Notice the <div id="root"></div> – this is where our React application will be injected. Also, see <script type="module" src="/src/main.tsx"></script> which points to our application’s entry point.
• package.json: Records project metadata (name, version) and lists dependencies (dependencies required for the app to run, devDependencies needed for development). It also defines scripts (like dev, build).
• package-lock.json: Records the exact versions of dependencies installed, ensuring consistent installs across different machines.
• tsconfig.json / tsconfig.node.json: Configuration files for the TypeScript compiler.
• vite.config.ts: Configuration file for Vite itself.

Activity 3: Run the Development Server

1. Make sure you are still in your project directory (react-fundamentals-app) in the terminal.
2. Run the development script defined in package.json:

   npm run dev

3. Vite will start the development server and print a local URL (usually http://localhost:5173/ or similar).
4. Open this URL in your web browser. You should see the default React + Vite starter page.
5. Try making a small change to the text inside src/App.tsx (e.g., change “Vite + React”) and save the file. Notice how the page in your browser updates almost instantly without a full reload. This is Vite’s Hot Module Replacement (HMR) in action!
6. To stop the development server, go back to your terminal and press Ctrl + C.

Introduction to React DevTools

React DevTools is an essential browser extension for debugging React applications. It allows you to inspect the React component hierarchy, view component props and state, and even profile performance.

Activity 4: Install and Explore React DevTools

1. Install the React Developer Tools extension for your browser (available for Chrome, Firefox, Edge). Search the extension store for “React Developer Tools”.
2. After installation, restart your development server (npm run dev) if it is not running, and refresh the application page (http://localhost:5173/).
3. Open your browser’s developer tools (usually by pressing F12 or right-clicking on the page and selecting “Inspect” or “Inspect Element”).
4. You should now see two new tabs: “Components” and “Profiler”.
   • Components Tab: Click on this tab. You will see the component tree for the current page (e.g., <App>). Select a component (like App) to view its props and state (if any) on the right-hand panel.
   • Profiler Tab: This tool helps diagnose performance issues (we will not cover it in depth in this module, but it is good to know it exists).
5. Spend a few minutes clicking through the components in the “Components” tab to see how the structure shown relates to the code in App.tsx.

Knowledge Check

Summary

In this lesson, you learned about React’s fundamental purpose as a declarative, component-based library for building user interfaces, primarily for Single Page Applications. We discussed how the Virtual DOM enhances performance and how component architecture promotes modularity. You also successfully set up a modern React development environment using Vite and TypeScript, explored the project structure, ran the development server, and learned how to use React DevTools for inspection.

References

• React Official Documentation 
• Vite Official Documentation 
• Node.js 
• React Developer Tools (Chrome) 
• React Developer Tools (Firefox) 

Additional Resources

• React for Beginners  (React Docs Tutorial)
• Vite: Getting Started  (Vite Docs Guide)
• MDN: Introduction to client-side frameworks  (Provides context on frameworks/libraries)