Skip to content

Latest commit

 

History

History
346 lines (225 loc) · 7.84 KB

Lesson-07.md

File metadata and controls

346 lines (225 loc) · 7.84 KB
Raw

FEW 1.2 - Lesson 7 - Single Page Applications

Minute-by-Minute

Elapsed Time Activity
0:05 0:05 admin
0:05 0:10 Overview
0:05 0:15 Learning Objectives
0:30 0:55 Single Page Applications
0:10 1:05 BREAK
1:00 2:05 Lab
0:20 2:25 Wrap Up
0:20 2:45 Admin

Overview

Today we will talk about Single Page Applications, what they are, and one of the frameworks/libraries used to make them: React.

Learning Objectives

By the end of the class you should be able to:

  1. Describe Single Page Applications
  2. Create your Single Page Application
  3. Use React and Create React App to create a single page application
  4. Use JSX to define UI
  5. Create components with JS

Single Page Applications

A single application is a Single webpage that acts like an application in your browser.

VisiCalc was the first Killer App that made the Apple II useful. I'd say that Gmail was the Killer app that gave rise to Single Page Applications.

What's a Killer App? Look it up. https://en.wikipedia.org/wiki/VisiCalc

Discuss.

Single Page Applications are web pages that act like multipage static sites but are built from a single HTML file. These pages don't load or reload new HTML files. Instead, they rewrite the content of the existing HTML page to show new content.

Read this:

https://flaviocopes.com/single-page-application/

Discuss.

React

React is a popular library/framework for making Single Page Applications.

Here is what you need to know about React:

  • React is written in JS
  • React uses ES6 and must be compiled with webpack and babel
  • React applications are built with components
    • Components are the building blocks of React Applications
  • React uses JSX
    • JSX is an extension of the JavaScript language used to generate HTML
    • JSX has it's own syntax

Getting started

Make your first React app.

Use the Terminal to navigate a directory where you will build your first React Project.

npx create-react-app my-first-app

This command creates a new react starter project using the Create React tool.

my-first-app would be the name of your app.

Run your app by navigating to the folder with:

cd first-app

Then launch the project with:

yarn start

This runs the start script in package.json. You could alternately use:

npm start

What's the difference between yarn and npm?

https://stackshare.io/stackups/npm-vs-yarn

Tour the React Project

The React project is a folder with several files and folders.

  • node_modules - Contains all of the packages downloaded from npm
  • package.json - npm configuration and options
  • public - distribution folder
  • README.md - A default Read for Create React App you should replace this!
  • scr - Your source code! You will do all of your work here
  • yarn.lock - ignore this it's auto-generated by yarn

You'll do all of your work in src take a look at it.

  • src
    • App.css - CSS for App component
    • App.js - App Component
    • App.test.js - Tests for App component (ignore it for now)
    • index.css - CSS for index component
    • index.js - Entry point for your app don't edit this it's boiler plate code
    • logo.svg - It's the picture used in the default app
    • serviceWorker.js - optional code for special purposes ignore this
    • setupTests.js - more optional code testing, ignore this

Components and JSX

Edit the existing components.

Look at App.js. This is a function that returns some HTML. Make a few changes:

  • add an h1 tag - <h1>Hello World</h1>
  • add another - <h2>Foo Bar</h2>

What's going on here? This is JSX. It looks like HTML.

  • JSX is an extension of the HTML language
  • JSX looks like HTML (mostly) and follows most the same rules
  • JSX is converted to vanilla JavaScript during bundling
  • JSX has a few rules you need to learn

Take a quick look at the reference:

https://reactjs.org/docs/jsx-in-depth.html

Defining your own components

When creating components, you have the choice between two different ways:

  1. Class-based components
  2. Functional components

A Class-based component has a render method that returns JSX.

class Heading extends React.Component {
  render () {
    return <h1>Hello World</h1>
  }
}

A functional component is just a function that returns JSX.

const Heading = () => {
  return <h1>Hello World</h1>
}

Use this component like this:

<Heading />

Use a variable in a component:

const Heading = () => {
  const str = 'Foo Bar'

  return <h1>{str}</h1>
}

When writing JS expressions (JS code) inside a block of JSX you must wrap is in the curly braces

<h1>{str}</h1>

Props

Props are an important part of components. Props are attributes passed into a component. The component then receives the attributes as a prop object

In class-based components:

class Heading extends React.Component {
  render () {
    return <h1>{this.props.str}</h1>
  }
}

In functional components:

const Heading = props => {
  return <h1>{props.str}</h1>
}

Pass props to your component through attributes:

<Heading str='Hello World' />

Any attribute passed into a component will be available to the component through the props object.

Now the component can be reused and configured to display any string.

<Heading str='Hello World' />
<Heading str='Foo Bar' />
<Heading str='Foo World' />
<Heading str='Hello Bar' />
<Heading str='Hello foo' />
<Heading str='Foo Hello' />

Usually, you'll want to put each component into it's own file. Do that with the Heading component.

  • Make a new file named: Heading.js (best practice: use the Component name as the file name)
  • Save the file to the src directory (all of your files go into src)
  • import React from 'react' goes at the top of the component
  • Write your component code...
  • export default Heading goes at the bottom of the component
  • In App.js import your Heading component: import Heading from './Heading'
import React from 'react'

const Heading = props => {
  return <h1>{props.str}</h1>
}

export default Heading

[10m] BREAK

Take a 10 minute break and visualize the workd as components.

Lab

Work through the React Fundamentals tutorial.

https://github.com/MakeSchool-Tutorials/React-Fundamentals

Wrap Up

  • What did you see in the tutorial?
  • Compare building with React to other methods?
  • What do you think of Components?
  • What problems did you encounter?
  • How did you solve them?

After Class

Additional Resources

  1. https://en.wikipedia.org/wiki/Killer_application
  2. https://en.wikipedia.org/wiki/Single-page_application
  3. https://flaviocopes.com/single-page-application/
  4. https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
  5. https://waverleysoftware.com/blog/yarn-vs-npm/
  6. https://stackshare.io/stackups/npm-vs-yarn
  7. https://github.com/MakeSchool-Tutorials/React-Fundamentals