React Getting Started

Dr. Greg Bernstein

Updated September 17th, 2021

Getting Started

Learning Objectives

  • Introduce the front end framework React and the lesson plan
  • Learn about the tooling needed to build React apps
  • Build and understand a bit about your first React App

What is it?

  • “A JavaScript library for building user interfaces”

  • “Component-Based”

    • “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

Readings

  • We will use the “Main Concepts” track (not the tutorial track) which begins at Hello World and proceeds from there

Slide Sets

  1. JSX Intro
  2. Function Components
  3. Basic React Rendering
  4. Class Components Intro
  5. Interactivity
  6. Component Life Cycle

Development Environment: Parcel.js

  • We’ll be using the Parcel.jsV2 bundler for development and production builds.

  • We will not be using Create React App

  • Install Parcel Locally with: npm install parcel

Examples Repos Zip

  • ReactParcelRepoExamples.zip

  • Unzip and run git reset --hard

  • use git branch to see all the example branches

  • use git checkout branchName to checkout a particular example

Create a base HTML file

Starting index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="index.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Dr. B's React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="index.js" type="module"></script>
</body>
</html>

Hello Application

Starting index.js file:

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

// What is this? HTML mixed with JavaScript
ReactDOM.render(
    <h1> Hello Website Development! </h1>,
    document.getElementById("root")
);

Setup NPM Scripts

Add the following to your package.json file and remove the "main": ... entry:

"scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --public-url ./"
},

Starting Parcel.js Development Environment

  • From command line: npm start

Development Server

  • The Development Server is running at http://localhost:1234
  • Can change the port with the option: "start": parcel index.html -p <port_num>

Production Build

  • Use npm run build
  • Files will be in the dist sub-directory
  • Need a server to deliver the files since JavaScript modules are used

What’s All this 1?

  • import statements are for JavaScript modules, i.e., code packaging

  • <h1>Hello ...</h1> is a JavaScript language extension called JSX.

What’s All this 2?

  • ReactDOM.render(...) is a function call to get React to render something for us.
  • document.getElementById('root') is a regular DOM call to get the element with the id root.
  • There must be a corresponding element in an HTML file somewhere!
// reveal.js plugins