CS 651 Spring 2020 Homework 5

Node, NPM, Parcel, React

Dr. Greg M. Bernstein

Due Friday, February 28th, 2020 by 11:59PM, 50 points.

General Instructions

In this homework…

Create and Use a new Branch hw5

We will create a new git branch called hw5 (starting from your ‘hw4’ branch) for use in this assignment. The branch you create must exactly match the one I’ve given you for you to receive any credit for this homework.

Prior to creating this new branch make sure your working directory is “clean”, i.e., consistent with the last commit you did when you turned in homework 4. Follow the procedures in GitHub for Classroom Use to create the new branch, i.e., git checkout -b hw5. Review the section on submission for using push with a new branch.

Use README.md for Answers

You will modify the README.md file to contain the answers to this homework.

Question 1. (5 pts)

Install Node.js/NPM, version number, set up directory create package.json, install commonmark, run commonmark from command line with node.js

(a) Install Node.js

If it is not already installed on your machine go to Node.js download and install Node.js. Use the LTS (long term support) verion. Go to the command line and type node -v to get the Node.js version number and npm --version to get the npm version number. Write these down here as your solution.

I get 12.16.1 as my Node.js version, and 6.13.7 as my NPM version.

(b) Create a directory

Within your main repository directory create a directory called ‘mdProcess’. We are going to work within this directory to try out some node features.

IMPORTANT! Make sure your .gitignore file contains the following lines:

This should ignore these directories from your commit. You will lose points if any of these directories and their contents end up in your repo!!!!!

(c) Create a package.json file

Change into the mdProcess directory and type npm init -y. This will create an initial package.json file for you.

(d) Install commonmark npm package

Use the command npm install --save commonmark to install the commonmark markdown to HTML converter. Create a small markdown test file called test.md in this directory. Add some markdown to the file.

While the installation of the package gives us a JavaScript “library” that we can use in our application, it also gives us a command line utility. Within your mdProcess directory try the command:

commonmark test.md

Which will convert the markdown in test.md to HTML. Take a screen shot and show it here. I get something like:

Question 2. (5 pts) {.Question} Bundler Installation and Use

(a) Install Parcel.js globally

We are going to use the Parcel.js bundler in this class. We can do a global NPM installation so we don’t have to install it for each project we build. Use the npm command npm install -g parcel-bundler.

(b) Set up an HTML file for development

We are going to make our own markdown processing web application. In the directory your created in problem 1 create an HTML file called processMD.html. We will need an input text area to take user’s markdown text, a button to trigger conversion and a <div> or other type of element to show the output. With minimal styling my non-functional page looks like:

non functional
non functional

(c) Setup “main” JavaScript file

Create a file named processMD.js and “link” to it in your HTML file via a <script> tag. You should now be ready to start the Parcel.js development environment that includes file watcher, development server, etc. On the command line (within the directory). Give the command parcel processMD.html. Parcel will take a while to get started (changes are updated quickly). Take a screenshot of your terminal. I get something like:

Question 3. (10 pts) {.Question} Using Modules

Now we will put the commonmark library to use.

(a) Import the commonmark module

At the top of your processMD.js file import the commonmark module with standard JavaScript syntax such as:

Parcel.js, our bundler knows to look in the node_modules directory to find this for us. Make sure you have your development browser open on the page: localhost:1234 to see and debug your work. Have your developer tools open and look to the console for error messages (as well as the Parcel.js output).

(b) Follow Usage Instructions to Complete the App

See Commonmark usage for how to use the library. Use the button on the page to trigger the conversion.

Show the body of HTML here, followed by your JavaScript, and a screen shot. My screen shot looks like:

Question 4. (10 pts) {.Question} More Modules and Deployment

Did you try some code with your application from problem 3? Not as nice as I was hopping since it doesn’t have syntax highlighting. Let’s add that by using another module from NPM. I happened to choose Highlight.js. You can try others but this is the one I’ll illustrate with.

(a) Install and Import

Use npm install --save hightligh.js for installation and use the following JavaScript to import the module and some CSS.

Anything odd about the above? How can we “import” CSS?

(b) Complete the App

Look at the usage instructions. We’ll apply this on the DOM element holding the HTML from the converted markdown and trigger on the button press, i.e., just another processing step in our click handler.

Show your JavaScript and a Screen shot here with a code sample. I get something like:

(c) Deploy the App

All the work we have been doing has been previewed via the development server. Now lets do a build that we can deploy. However there is one sticking point. If we run parcel build processMD.html it will build the app based on absolute URLs. For relative URLs we need to use the command: parcel build processMD.html --public-url ./. This takes a while on my machine as Parcel.js is making an optimized version for deployment and will put the result in the dist subdirectory.

Test the application locally by clicking on the HTML file and loading it in your browser. Deploy to a subdirectory on the CS Server and put the link here for me to test the app.

(d) App files and size

In the dist directory you will see a number of files. The .map files aid in debugging so their size isn’t important for deployment. You may see multiple .js files and *.css files to see which are actually used look at your app/page as in part (c) and look for the external CSS and JavaScript files. Write down the sizes of those files here. Do they seem large to you? How could your reduce the size of the JavaScript file?

Question 5. (20 pts) {.Question} React Intro, JSON data

(a) Create a React practice project

At the top level of your repo create a directory “ReactPractice” to hold the React project for this problem. Create a package.json file for this project like you did in Problem 1(c). Install the react and react-dom packages from NPM for this project, i.e., npm install --save react react-dom. Use the index.html and index.js code from the Geting Started with React slides. Put a copy of this elements.json file into this directory (this has all sorts of information on the chemical elements). Import this JSON file into your index.js file with the code import chemElements from "./elements.json";. Note that importing a JSON file like this is a common feature of bundlers and not standard JavaScript. Add code including JSX to your index.js file to produce output like:

.

Put a screen shot of your output here, and show your nicely formatted JavaScript code here.

(b) Create a Periodic Table Component

We’re going to make a React function component that takes information about all the elements and a list of fields we are interested in and create a nice HTML table of the chemical elements with just the information the user is interested in. Create a file periodic.js to hold this component. Name the component PeriodicTable. It will take two properties: chemElements, and desiredCols where chemElements will just be set to the imported chemical element information and desiredCols is an array containing the column names to be included (look at the elements.json file to see permitted column names).

In your index.js file you would use this component something like this:

Show the JavaScript for your PeriodicTable component here. Show a screen shot of your output here. I get something like: