Skip to content

Latest commit

 

History

History
407 lines (253 loc) · 8.14 KB

Lesson-07.md

File metadata and controls

407 lines (253 loc) · 8.14 KB
Raw

ACS 1320 - Lesson 7 - Single Page Applications

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 a full application in your browser.

☝️ 🌏

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 projects are 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 my-first-app

Then launch the project with:

npm start

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

yarn start

What's the difference between yarn and npm?

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

If you forget the commands above they are all in the Readme.md that is included with the create-react-app starter code. Go find it now and take a look, there is a lot more useful info there.

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 either component in your app 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'

function 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/Tech-at-DU/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