CIS-2450 Lab #6: Introduction to React

Reading: The React website has a lot of useful information. We will also be using the Vite build tool for front end web development.

Part 1: Setting Up

React is a JavaScript library that facilitates the creation of single page websites. Such sites are composed of a single page consisting of an empty <div> element into which JavaScript computes the application's output as dynamic HTML document.

React is very popular and widely used. For example, it is maintained by and heavily used by Facebook, but many other major websites use the system. In this lab, you will get your feet wet with React.

React applications are compiled into websites using JavaScript tools. Not only is JavaScript used in the web application itself, it is also used to build and manage the production of the website. The assumption is that you will put your web application under version control, such as Git, and then "build" it to a deployable website which you then copy to your web server later.

During development, you can run a development server (in JavaScript) to test your pages as they will appear in their final form. The development server is not how you would deploy your site to the global Internet, however.

For this lab, you will need to install Node.js and npm. You can download Node.js from the Node.js website. Node.js includes npm, the Node Package Manager. You will use npm to install the React tools.

Once you have Node.js installed, create a folder for this lab, say lab05 (you can call it what you like).

Open a command prompt (or PowerShell prompt, as appropriate) where you can access the Node.js tools. Change into the lab05/frontend and run the following command to create a skeletal React app:

  > npm create vite@latest frontend -- --template react
  > cd frontend
  > npm install

This creates a folder named frontend containing your web app. Using a subfolder in this way anticipates a future backend subfolder for any back end technology you will use later to support your site. We won't use any such technology in this lab, but it's good to get in the habit of preparing for future growth when possible.

Run the following command to start the development server:

  > npm run dev

Part 2: Deploy the Skeleton

In this part you will deploy the skeleton application to your Apache web server. React applications are built offline and must be "compiled" to a final form before they can be put on a conventional web server.

First, decide on a base folder to use for the URL of your project. For example, if you want your project to appear at the URL http://localhost/lab-06/, the base folder is "/lab-06/." You will need to tell Vite about this decision so that it can account for it when it prepares your website. Edit the file vite.config.js in the root of your project to include a base setting. For example:

  export default defineConfig({
    base: '/lab-06/',
    plugins: [react()]
  })

Next, compile your application for deployment using the command:

  > npm run build

This will create a folder named dist containing your website. Copy the contents of this folder to your Apache web server and into the proper folder (e.g., lab-06). Demonstrate that the site works by starting Apache and loading the top level page.

Submission

Create a zip archive of your skeletal project, including the dist folder, and submit that archive to Canvas.