Web Programming for Apps and Services

In the ever-evolving world of web development, React has emerged as a game-changer. This JavaScript library has revolutionized the way we build web applications, making them more modular and scalable. In this blog post, we'll provide a simple overview of React and introduce you to Next.js, a powerful framework for building React applications.

The Old Way: Native JavaScript

Traditionally, web developers used native JavaScript to manipulate the Document Object Model (DOM) directly. This approach involved modifying elements, handling user interactions, and generating HTML on the fly. While effective for smaller projects, it became unwieldy as applications grew more complex.

Example: Adding a click event listener using native JavaScript:

const button = document.getElementById('myButton');

button.addEventListener('click', function () {
  alert('Button clicked!');
});

Enter MVVM: Model View ViewModel

To address this challenge, the concept of Model View ViewModel (MVVM) emerged. It separates an application into three key components:

1. Model: Represents the data and operations related to your application, independent of the user interface.

2. View Model: A pure-code representation of the data and UI operations. It's a bridge between the model and the view.

3. View: The visible and interactive UI that displays data from the view model and responds to user actions.

This separation of concerns allowed for more modular, reusable, and testable code.

Example: A simple MVVM structure in JavaScript:

// Model
const userData = { username: 'JohnDoe', email: 'johndoe@example.com' };

// View Model
function displayUser() {
  console.log(`Username: ${userData.username}, Email: ${userData.email}`);
}

// View (HTML)
<button id="showUserData">Show User Data</button>

The Birth of React

In 2011, Facebook employee Jordan Walke created React as an early prototype called "FaxJS." React introduced the concept of components, which act as both the view model and view, making UI development more organized and efficient. React's popularity grew rapidly, surpassing other frameworks like Angular and Vue.

Example: Creating a simple React component:

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Getting Started with React

To start working with React, you only need to include some scripts in your HTML file. You can create and render components like this:

Example: Rendering a React component in HTML:

<div id="hello_container"></div>

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">
  'use strict';

  const e = React.createElement;

  function Hello() {
    let msg = 'Hello World!';
    return <p>{msg}</p>;
  }

  const domContainer = document.querySelector('#hello_container');
  const root = ReactDOM.createRoot(domContainer);
  root.render(e(Hello));
</script>

However, for larger applications, it's better to use a toolchain that simplifies development. Tools like Webpack, Babel, ESLint, and Jest are essential for building robust React applications.

Introducing Next.js

Next.js is a popular framework for building React applications. It offers a fantastic developer experience and includes features like static and server rendering, TypeScript support, routing, and more—all without the need for complex configuration.

Difference between ReactJS and NextJS

Example: Creating a new Next.js app:

npx create-next-app my-app --use-npm

you can view the starter site immediately by executing the commands:

cd my-app
npm run dev

• /my-app

  • /node_modules

  • /pages

    • /api

      • hello.js

    • _app.js

    • _document.js

    • index.js

  • /public

    • favicon.ico

    • vercel.svg

  • /styles

    • globals.css

    • Home.module.css

  • .eslintrc.json

  • .gitignore

  • jsconfig.json

  • .next.config.js

  • package-lock.json

  • package.json

  • README.md

Next.js provides a well-structured file system for your application, including a "pages" folder for defining routes, an "api" folder for serverless functions, and a "public" folder for static assets.

Conclusion

React and Next.js have transformed web development by simplifying the creation of dynamic and scalable web applications. With React's component-based architecture and Next.js's powerful features, building modern web applications has never been easier.