Learnwizy Technologies Logo

Learnwizy Technologies

Class 15: Introduction to Frontend Frameworks & React Basics

As web applications grew in complexity, relying solely on vanilla JavaScript and direct DOM manipulation became increasingly challenging. This led to a demand for tools that could streamline the development process and provide a more organized, maintainable approach to building user interfaces. The evolution of frontend frameworks can be summarized as follows:

Diagram showing evolution Frontend Frameworks

Why Use a JavaScript Framework?

Frontend frameworks offer several significant advantages over traditional approaches:

Introduction to React.js

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It was developed by Facebook (now Meta) and is one of the most popular frontend frameworks in use today.

Core Concepts of React

Diagram illustrating React's Virtual DOM process: State Change -> Virtual DOM Update -> Diffing -> Real DOM Update

Setting Up a React Project

While you can set up a React project manually, it's common to use build tools that automate the setup of a robust development environment, including a build system, live reloading, and optimized production builds.

Installing Node.js and npm

React development relies on Node.js and npm (or Yarn). Node.js is a cross-platform, open-source JavaScript runtime environment that executes JavaScript code outside of a web browser. npm (Node Package Manager) is the default package manager for Node.js and the world's largest software registry. It allows developers to easily install, share, and manage project dependencies (third-party libraries and tools). When you install Node.js, npm is usually installed with it.

Action: Download and install Node.js from nodejs.org.

Verify the installation in your terminal by running the following commands: 

// Verify the Node.js version:
node -v

// Verify npm version:
npm -v

Using Vite for a React Project

Vite is a modern, fast build tool that provides a leaner and faster development experience for web projects. It's often preferred over older tools like Create React App for new projects due to its speed.

To create a new React project with Vite, you would typically run: 

npm create vite@latest myapp -- --template react
cd myapp
npm install
npm run dev

Exploring the Project Structure

After creating your project with Vite, you'll find a standard directory structure: 

my-react-app/
├── node_modules/      <-- Contains all the packages and libraries your project depends on
├── public/            <-- Contains static assets like images and fonts
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx        <-- Main application component
│   ├── index.css
│   └── main.jsx       <-- Entry point of your React application
├── .gitignore
├── index.html         <-- The main HTML file
├── package.json       <-- Project metadata and dependencies
├── package-lock.json
├── README.md
└── vite.config.js     <-- Vite configuration

Introduction to JSX

React applications typically use JSX (JavaScript XML), a syntax extension for JavaScript. JSX allows you to write HTML-like code directly within your JavaScript files, making it easier to describe UI components.

Key Features of JSX

JSX Examples

// Basic JSX element
const element = <h1>Hello, React!</h1>;
console.log(element);

// Embedding JavaScript expressions
const name = 'World';
const greeting = <p>Hello, {name}!</p>;
console.log(greeting);

// JSX with attributes
const image = <img src="logo.png" alt="React Logo" className="app-logo" />;
console.log(image);

// Multiple elements must be wrapped in a single parent or Fragment
const App = () => (
  <div>
    <h2>My Application</h2>
    <p>This is a paragraph.</p>
  </div>
);

// Using a Fragment for multiple top-level elements without an extra div
const AnotherApp = () => (
  <>
    <h3>Another App</h3>
    <p>No extra wrapper div here.</p>
  </>
);

Mastering JSX is fundamental for writing React components, as it allows for a clear and intuitive way to define the structure and content of your UI directly within your JavaScript code.

Embedding Expressions in JSX

One of the most powerful features of JSX is the ability to embed any valid JavaScript expression directly within your HTML-like markup using curly braces {}. This allows you to render dynamic content, perform calculations, or call functions directly within your JSX. 

function formatUser(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Jane',
  lastName: 'Doe'
};

const welcomeMessage = <p>Welcome, {formatUser(user)}!</p>;
const sum = <p>The sum of 2 + 3 is: {2 + 3}</p>;

JSX Attributes and Styling

When working with attributes in JSX, there are a few key differences from standard HTML:

React Fragments

In React, we often need to return multiple elements. However, a component's render method (or the return of a functional component) can only return a single element. To solve this, you typically wrap multiple elements in a parent <div>. While this works, it adds an extra node to the DOM, which might not always be desirable for styling or semantic reasons.

React Fragments allow you to group a list of children without adding extra nodes to the DOM. 

import { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Hello</h1>
      <p>This is a paragraph.</p>
      <p>And another one.</p>
    </Fragment>
  );
}
// Or using the shorthand syntax:
// function MyComponent() {
//   return (
//     <>
//       <h1>Hello</h1>
//       <p>This is a paragraph.</p>
//       <p>And another one.</p>
//     </>
//   );
// }

export default MyComponent;

In this example, the <h1> and two <p> elements are rendered directly into the DOM without an enclosing <div>.