Today we will talk about Single Page Applications, what they are, and one of the frameworks/libraries used to make them: React.
By the end of the class you should be able to:
- Describe Single Page Applications
- Create your Single Page Application
- Use React and
Create React App
to create a single page application - Use JSX to define UI
- Create components with JS
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 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
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.
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
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
When creating components, you have the choice between two different ways:
- Class-based components
- 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 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
Take a 10 minute break and visualize the workd as components.
Work through the React Fundamentals tutorial.
https://github.com/Tech-at-DU/React-Fundamentals
- 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?
- https://en.wikipedia.org/wiki/Killer_application
- https://en.wikipedia.org/wiki/Single-page_application
- https://flaviocopes.com/single-page-application/
- https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
- https://waverleysoftware.com/blog/yarn-vs-npm/
- https://stackshare.io/stackups/npm-vs-yarn
- https://github.com/MakeSchool-Tutorials/React-Fundamentals