DA219A - Lab 2

Contents
LABORATION’S GOAL ........................................................................................................................ 1
PRE-REQUIREMENTS ........................................................................................................................ 1
Instructions .......................................................................................................................................... 2
Creating a Toolchain from Scratch ...................................................................................................... 2
Initialization ....................................................................................................................................... 2
Webpack ............................................................................................................................................. 2
Setting Up React and Babel ............................................................................................................... 3
Setting up webpack-dev-server ........................................................................................................ 6
Prepare The Scripts in Package.Json ................................................................................................... 7
Adding The Server Part ........................................................................................................................ 7
Running it all ...................................................................................................................................... 7
TASKS ..................................................................................................................................................... 8
Extra Tasks: ........................................................................................................................................ 10

LABORATION’S GOAL
Build a table using react framework

PRE-REQUIREMENTS
In this second Lab you will need the following:
• NODE.JS
• Express
• A database server (MongoDB, PostgreSQL, or any other of your choice)
• React (which needs some prerequisites including package manager,
bundler and compiler)
Instructions

Creating a Toolchain from Scratch

A JavaScript build toolchain typically consists of:

• A package manager, such as Yarn or npm. It lets you take advantage of

a vast ecosystem of third-party packages, and easily install or update
them.
• A bundler, such as webpack, vite.js or Parcel. It lets you write modular
code and bundle it together into small packages to optimize load time.
• A compiler such as Babel. It lets you write modern JavaScript code that
still works in older browsers.

Instead of taking the whole huge “create-react-app” project, you are going to
install react with all the toolchains. It is expected that npm is already installed
in your machine as well as NodeJS (from lab1). The following will explain how
to set up React + Babel + Webpack.

Initialization
Create a new project where you will have React+Webpack+Babel. Create a
new directory with the name "yourname_react_app". Create package.JSON file
using npm init . (Please stick to the naming!)

Webpack
We need to install webpack as a dev dependency and webpack-cli so that you
can use webpack in the command line:

Install webpack and webpack cli

npm i webpack webpack-cli -D

notice that -D is the same as — save-dev.

Create a src folder with index.js and place the following code as an
example:
console.log("hello");
 Add the following scripts to your package.json

"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"

Webpack 4 now has two modes, development and production where

code is minimized in the latter.

See it for yourself by running:

npm run start

This will create a dist folder with main.js file inside (containing your src
code).

Setting Up React and Babel

To work with React, we need to install it along with Babel. This will transpile
the code from ES6(E2015) to ES5, as not all browsers support ES6 yet (for
example Internet Explorer).

Also, browsers don’t understand JSX. The JSX has to be ”transpiled” to

JavaScript using Babel! So if you want to use JSX , it is good to install it.

Install react and react-dom as a dependency

npm i react react-dom -S

(note that -S: is the same as — save)

Then install babel-core, babel-loader, babel-preset-env and babel-

preset-react as a dev dependency:
npm i babel-core babel-loader babel-preset-env babel-preset-react -D

Now, create a webpack.config.js file to state the rules for our babel-
loader.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
 exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};

We then need to make a separate file called .babelrc to provide the options
for babel-loader. You can include it in the webpack.config.js file, or have a
separate file which results in clearer readability.
{
"presets": ["env", "react"]
}

Next, change your index.js file to render a component:

import React from "react";
import ReactDOM from "react-dom";

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

const element = <Welcome name="YOUR NAME" />;

ReactDOM.render(element, document.getElementById("index"));

*note that you can create a component by creating a class

Create an index.html file in the src folder where you can add your
section element with id “index”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lab 2 react</title>
</head>
<body>
<section id="index"></section>
</body>
</html>

Install html-webpack-plugin and use this in your webpack config file.

This plugin generates an HTML file with <script> injected, writes this to
dist/index.html, and minifies the file.

Install html-webpack-plugin as a dev dependency:

npm i html-webpack-plugin -D

Update the webpack config like so:

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({

template: "./src/index.html",
filename: "./index.html"
});

module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlPlugin]
};

You can also input the plugin like this:

plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
]

If you now run npm run start you should see index.html being generated
in the dist folder.
Run open dist/index.html and you should see “Hello World!” in your
browser.

Setting up webpack-dev-server
It is a bit tedious to keep running this command every time you want to see
your changes in the browser. To have webpack “watch” our changes and thus
refresh whenever we have made changes to any of our components, we can
use webpack-dev-server module.

Install this as a dev dependency

npm i webpack-dev-server -D

Then change your package.json start scripts like so :

{

"scripts": {

"start": "webpack-dev-server --mode development --open",

"build": "webpack --mode production"
},
}

If you now run npm run start you should see localhost:8080 open up in your
default browser — that’s what the —-open flag is for. Now every time you
make changes, it will refresh the page.
Now you have a React + Webpack + Babel project, so you can create and
develop the React-code with JSX syntax easily. At this point, you shall be able
to play around with React code and see it update in real-time in your browser
with the Webpack dev- server.

Next step is to bring in the server-part. We want to access a back-end server

and a database from the React front-end code. We shall use Express and any
database the same way you did on Lab1.

Prepare The Scripts in Package.Json

Make sure you have the following scripts in the package.json file:
- "npm start" should trigger the react + webpack dev-server to fire up the
React-code in your browser on localhost:8080.
- "npm run build" should build the production React code into the dist-folder.
- "node server.js" should start the Express server (this is new!)

Note: you can't run both "npm start" and "node server.js" in the same shell! In
that case you have to install "concurrently" which is an npm package

Adding The Server Part

Add a new "server.js" file that should contain the Express server code. In the
server code, you have to point out the public static file folder. It should now
point to the "dist" folder where Webpack puts the built files, because that's
where the index.html will end up along with other needed files. Then install
express (and any DB) into the newly created project directory with your name.

Running it all

1. Start the server in one terminal window "node server.js", and let’s
assume it listens at 3000.
2. Then "npm start" in another terminal window. This will automatically
launch the Webpack dev server at localhost:8080 and the index.html
page will render in your browser. This is the Webpack dev-server
showing your HTML-file with your React-code included.
 But we want to use the Express-server so that we have full control over
the back-end as well!
3. Navigate to localhost:3000 instead. That's where your Express server
is running and it should now also show the same index.html file!
You are now connected with your own Express server!
4. Now that you have the connection up and the Express server is (should
be) connected to database, let your React code do some client-side AJAX
call to fetch data from a DB table and show it on the home page!
Note
If you do changes "on the fly" in the React code on the Webpack dev-server, it
won't show in the Express server! It's because the Webpack dev-server only
autogenerates the JS-code in its own local copy of the dist-folder (wherever
that is...).
So, if you look inside your own project's dist folder, you will see that the index
file and JS-code hasn't updated. And this is the code that your Express server
delivers. To have the Express server reflect changes, you must manually
rebuild with Webpack: "npm run build". That will update your dist-folder, and
you can also verify that.

TASKS
You shall create a very simple back-end server that has one database which
consists of three tables. The database should be on the cloud (not local)

Student
This table shall have the following attributes:
• unit_id, max 50 characters (should be unique)
• full name
• email
• hashed_password (optional if you add users manually)

Registration
• student_id
• course_code
• unix_timestamp the time the student registered to a new course
Course
This table shall have the following attributes:
• course_code, max 50 characters (should be unique)
• course name
• course description

Add at least 5 rows in each table with some initial values. In the table
registration, there shall be different values on timestamps. Make sure that if
the data in the database table is changed, the reflected changes shall show on
the webpage! You need only to show one table explained below.

The UI front-end part shall be done with React, meaning as much as possible in
the UI shall be generated client-side from JavaScript with the React library.
Only fetch the minimum amount of data from the server and then generate as
much as possible of the UI from JavaScript code with React components.

The homepage (e.g. index.html) shall display a table of the latest 5 registered
students. The table headers shall be “clickable” so that the table should be re-
ordered according to the clicked header.
Student_ID Student name Course name Registration time

The table shall be rendered with a React component.

The React UI shall have a “browser-local” timer that automatically refreshes

data from the web server every minute using AJAX. The link in the lecture 2
will be helpful for learning how to do so.
Extra Tasks:
1. Create git repository for the lab to publish everything to it.
2. Create an .env file.
3. Create. gitignore file.
4. Add a simple readme:md file in which you write down some instructions to
run your website.

Please submit .zip file with all the required files (except node_modules) no
later than 14th April
Best of Wishes!