React Intro

Dr. Greg Bernstein

February 24th, 2020

Getting Started

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.js bundler for development and production builds.

  • We will not be using Create React App

  • Install Parcel Globally: npm install -g parcel-bundler

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>React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="index.js"></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")
);

Starting Parcel.js Development Environment

  • From command line: parcel index.html
Parcel Development Startup
Parcel Development Startup

Development Server

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

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!