Session Plan

Introduction to React

• Vanilla JavaScript

  • interacts directly with the DOM

  • this is fairly easy to maintain for small apps and sites – and if it's just you developing it

• React

  • can enable you to add a bunch of other people to help you and collaborate to move faster

  • can help you avoid repetition that's natural when interacting with the DOM a lot

  • can update the UI in a reactive way (hence the name) when your data changes

  • makes it possible to compose an application or website of small components that you can re-use

• React's strengths:

  • Very suitable for working in teams and sharing those components (even publicly)

  • Great choice for design systems, i.e. making components once and using them for all your (future) applications, across different devices

  • There's a vast library of components already out there on npm and a big community of developers using it today

• React's weaknesses:

  • May introduce too much overhead to small projects

  • It's an abstraction – can be misused and slow down your page

  • Need to learn JSX, hooks and other concepts

JSX Fundamentals

• You always have to return JSX from a component for it to work

• Returning JSX works like this

function MyComponent() {
  return <h1>Hello World</h1>;
}

• JSX looks a bit like HTML, and you need to use HTML elements to build components

• But JSX has some extra rules compared to plain HTML

• For example, you always have to return a single root element, that's a fixed requirement

// ⚠️ THIS WON'T WORK
function MyBrokenComponent() {
  return (
    <h1>Hello World</h1>
  <h2>Hello Universe</h2>
)
}

• You can use Fragments to address this issue

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Hello World</h1>
      <h2>Hello Universe</h2>
    </React.Fragment>
  );
}

– or –

function MyComponent() {
  return (
    <>
      <h1>Hello World</h1>
      <h2>Hello Universe</h2>
    </>
  );
}

• JSX is really a templating language, enabling you to use JavaScript while generating HTML (kind of)

• You put JavaScript in {} curly braces

function MyComponent() {
  const firstName = "HackYour";
  return <h1>Hello {firstName + "Future"}</h1>;
}

• This mechanism also allows you to "render" conditionally, showing different content based on conditions you define

• Rendering is a fancy term for putting the HTML in the DOM that you describe in JSX, i.e. showing the component on the page

function MyComponent() {
  const isSunday = new Date().getDay() === 7;
  return (
    <>
      <h1>Hello!</h1>
      {isSunday ? <h1>What a nice Sunday!</h1> : null}
    </>
  );
}

Components & CSS imports

Thinking in components

• What are components?

• Breaking down UI into reusable components

• Hierarchy and composition of components

Writing your first static component

• Creating a Functional Component

• Returning JSX

  • Single Root Element Requirement

  • Fragments

• Using components inside components

Use {} to execute JS inside JSX

• Embedding Expressions in JSX

• Conditional Rendering

Setting attributes

• Standard HTML attributes

• className

Importing / exporting .jsx

• default exports and named exports

Importing .css

• Global styles vs. component-specific styles

• CSS modules using Vite

Exercises

1. Setting up a new React project

• Point your terminal at the folder where you manage your projects, e.g. cd ~/Sites

• Scaffold a basic Vite React project by following the instructions in the Vite Guide

  • At the time of writing this, you can get started by running the following command npm create vite@latest hyf-frontend-react -- --template react, where hyf-frontend-react is the project/folder name that the tool will create

  • Confirm with y + Enter that npx may run the create tool

• Open your IDE (probably VSCode) at the hyf-frontend-react folder (or alternative name you chose)

  • Run npm install in a terminal as requested above

  • Every time you start development, run npm run dev

• Hints

  • Ctrl/Cmd + click on the URL displayed in your terminal, it watches your files and updates automatically in your browser

  • The file you likely want to edit to follow the next exercises is src/App.jsx

  • When you add components, create a src/components folder and add a file per component

2. Writing static components

• Create a functional component called Greeting that returns an h1 element with the text "Hello, React!"

• Create a functional component called Card that returns a article element with a nested h2 element and a p element. The h2 should display the text "Card Title", and the p should display the text "This is a card component"

3. Nesting components

• Create a functional component called Cards that renders two instances of the Card components from the previous exercise, potentially inside a section element

4. Executing JavaScript in JSX

• Create a functional component called Person containing two constants name and age. The component should display the text: {name} is an adult if the age is 18 or higher or {name} is a minor if the age is less than 18

5. Setting properties such as className and placeholder

• Create a functional component called Button that renders a button element with a className prop set to btn primary

• Create a functional component called DangerButton that renders a button element with a dangerous text and a className prop set to btn danger

• Create a functional component called TextInput that renders a text input field with a placeholder value Type something here

• Create a functional component called ProfileImage that renders an image of a person

• Add all the components above to your app

6. Adding basic styling

• Create a global CSS file that changes the color of all buttons to blue

• Add component styles for the DangerButton which makes it large and red

(Bonus) Create a simple component structure

• Design a basic layout with header, main content, and footer

• Create separate components for each section