CPRG-306

Week 2 Introduction to React

Agenda

1. Miscellaneous: GitHub Accounts, Lecture Times
2. Week 2 skills required
3. Demo

GitHub Accounts

• Use the following link to find other students' GitHub accounts
• Collaborate with other students on assignments
• Star and/or follow other students' repositories

https://webdev2.warsylewicz.ca/student-work/github-accounts (opens in a new tab)

In-person Class Times

Feel free to join any of the following in-person class times:

Wednesdays at noon in E215

Fridays at noon in E215

Online Class Times

Feel free to ask questions during any of the following online class times:

Mondays 10 am - noon

Tuesdays noon - 2 pm

Skills Required

• JavaScript
• Node
• Tailwind CSS
• React
• Next.js
• Vercel

JavaScript

• import is used to import a module, function, or variable from another file

import Link from 'next/link'; // default import
import Title from './Title'; // default import
import { useState } from 'react'; // named import

JavaScript

• export is used to export a module, function, or variable from a file

export default function Title() { return <h1>Title</h1>; } // default export
export const GST = 0.05; // named export

Node.js

• node is a JavaScript runtime built on Chrome's V8 JavaScript engine
• npm is a package manager for JavaScript
• npx is a package runner for JavaScript

rem get the version of node
node -v
 
rem install a package called mongoose
npm install mongoose
 
rem run "dev" script in package.json
npm run dev
 
rem run a package called create-next-app to create a new Next.js project
npx create-next-app my-app

Tailwind CSS

• Tailwind CSS is a CSS framework
• Uses utility classes to style elements
• If you know CSS, you can use Tailwind CSS
• If you learn Tailwind CSS, you are learning CSS

<button class="bg-blue-500 text-white p-2 rounded">Click Me</button>

React

• a JavaScript library for building user interfaces
• component-based: UI is broken down into components
• declarative: UI is a function of state
• virtual DOM: React updates the DOM efficiently

JSX

• a syntax extension for JavaScript
• combines JavaScript and HTML
• transpiled (converted) to JavaScript

const bigTitle = <h1>Big Title</h1>;

React Component

• a function that returns JSX

export default function Title() {
  return <h1>Title</h1>;
}

Next.js

• a React framework for building web applications
• server-side rendering
• API routes
• file-based routing
• modern browser features, e.g. image optimization, lazy loading, pre-fetching

Vercel

• a cloud platform for static sites and serverless functions
• deploy Next.js applications
• free tier available

Demo

1. Create a new project
2. Cleanup root page
3. Add a new page
4. Demonstrate JS expression interpolation
5. Add a new component
6. Link to the new page
7. Deploy to Vercel