React: A component based UI framework

React: A component based UI framework

Please interrupt me if you have questions.

WHAT

ARE

COMPONENTS

?

WHERE

HAVE WE

COME FROM

?

Model

View

Controller

Model

View

Controller

<a href="/notifications">
  Notifications
</a>

img

h2

span

em

img

main

h2

span

div

em

h4

strong

nav

h2

span

div

em

img

nav

span

div

em

img

nav

h2

span

div

em

Cristiano Rastelli @areaweb

Components

twitter

feed

form

input

icon

We've had bug reports on the site where users are unable to like or dislike individual items. Please could you investigate? Thanks!

thread.com/shop

ItemCard

<ExclusiveBadge />

<ItemImage />

<ItemShipping />

<ItemDetails />

<ItemSize />

<ItemSentiment />

Thinking in Components

Exercise: Thinking in components

function updateGreeting(newValue) {
  const span = document.querySelector("#greeting-output");
  span.innerText = newValue;
}

// Update the greeting when the user types
document.querySelector("input").addEventListener("input", (event) => {
  updateGreeting(event.target.value);
});

// Update the greeting when the page first loads
const greeting = document.querySelector("input").value;
updateGreeting(greeting);

const { useState } = React;

function App() {
  const [greeting, setGreeting] = useState("world");
  return (
    <div id="wrap">
      <input
        type="text"
        name="greeting"
        value={greeting}
        onInput={(event) => setGreeting(event.target.value)}
      />
      <div id="output">
        Hello, <span id="greeting-output">{greeting}</span>
      </div>
    </div>
  );
}

ReactDOM.render(React.createElement(App), document.querySelector("#react"));

You are not expected to understand this code yet, so don't worry!

IMPerative (Non-react)

We give the browser precise instructions on what to do:

1. Query for the input

2. Find the value of the input

3. Query for the <span> output

4. Update the <span> with the value of the input.

declarative (react)

We declare to React what we want to happen:

Please render a div with an input and a div for the output. The output should always reflect what the user has typed into the input box.

Your React code

The DOM

Your code

The DOM

React

Writing our first bit of React

const element = React.createElement("div", {
  children: "Hello World",
});

const rootElement = document.querySelector("#root");
ReactDOM.render(element, rootElement);

Writing our first bit of React

const element = React.createElement("div", {
  children: "Hello World",
});

const rootElement = document.querySelector("#root");
ReactDOM.render(element, rootElement);

React.createElement

const element = React.createElement("div", {
  children: "Hello World",
});

React.createElement

const anotherElement = React.createElement('div', {
  id: 'my-div',
}, [
  React.createElement('p', {}, 'Hello')
]

<div id="my-div">
  <p>Hello</p>
</div>

JSX

const anotherElement = <div id="my-div">
  <p>Hello</p>
</div>;

Your JSX

<div>

React.createElement('div', ...)

Babel

JSX => React.createElement with Babel

Exercise 2: Playing with JSX

https://jsbin.com/gekahexige/edit?html,output

1. Change the <div> to a <h1>

2. Can you wrap the <h1> in a <div> with an ID of "wrapper" ?

Important: the browser does not understand JSX

Exercise 3: Create a React app

https://syllabus.codeyourfuture.io/guides/creating-a-react-app/

Follow the above instructions to create a React application called "pokedex" using create-react-app.

Your first React component

function HelloWorld() {
  return <p>Hello world</p>;
}

React components are defined as functions.

React components must return what they will output into the DOM.

Remember, React is declarative.

Your first React component

import React from 'react';

function HelloWorld() {
  return <p>Hello world</p>;
}

React components are defined as functions.

React components must return what they will output into the DOM.

We need to import React to get at React.createElement

Your first React component

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <p>Hello world</p>;
}

ReactDOM.render(
  <HelloWorld />,
  document.querySelector("#root")
);

Your first React component

import React from 'react';
import ReactDOM from 'react-dom';

function HelloWorld() {
  return <p>Hello world</p>;
}

ReactDOM.render(
  <HelloWorld />,
  document.querySelector("#root")
);

React components must start with a capital letter

React components are defined as functions.

React components must return what they will output into the DOM.

We need to import React to get at React.createElement

React components must start with a capital letter

We use ReactDOM to render our React app into the DOM.

Exercise 4: starting on the Pokedex

1. In the pokedex React app that you just created, open the src/App.js file.

2. Delete everything in the file except the line containing export default App. You should see an error in your terminal and in your web browser - don't panic! We're going to remake the App component ourselves.

3. Import the React variable from the React package.

4. Create a function named App, which will be our component.

5. Within the App function, return a <h1> element with the text "Welcome to the Pokedex". What do you see in your web browser?

6. Create a <div> element that wraps around the <h1> you just created.

7. Below the <h1> element (but within the <div>), create an <img> element. Then make its src attribute equal to https://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png. What do you expect to see in your web browser?

8. Now create a <header> element to wrap both the <h1> element and the <img> element.

Remember to run `npm start` to get your Pokedex app running locally!

Component composition

One component can render another.

function Greeting() {
  return <span>Hello</span>;
}

function Mentor() {
  return <span>Ali</span>;
}

function HelloWorld() {
  return (
    <div>
      <Greeting />
      <Mentor />
    </div>
  );
}

HelloWorld

Greeting

Mentor

Component composition

Exercise 5: creating a Logo component

1. In your pokedex React app, open the src/App.js file.

2. Create a new function named Logo.

3. Copy the <header> element and its contents and paste it into the Logo component.

4. Replace the <header> element in the App component with the new Logo component.

5. Create a new component function named BestPokemon and return a <p> element with some text saying which is your favourite Pokemon (e.g. "My favourite Pokemon is Squirtle").

6. Render your new BestPokemon component below the Logo component within the App component.

Has Jack admitted he never got into Pokemon yet so this is a bad example application for CYF to use?

Arrow Functions and Components

function HelloWorld() {
  return <p>hello world</p>
}

const HelloWorld = () => {
  return <p>hello world</p>
}

const HelloWorld = () => (
  <p>hello world</p>
)

Arrow Functions and Components

const HelloWorld = () => {
  console.log('WHAT IS GOING ON?!')
  return <p>hello world</p>
}

const HelloWorld = () => (
  console.log('WHAT IS GOING ON?!')
  <p>hello world</p>
)

Exercise 6: arrow functions

1. Using the pokedex React app that you created earlier, open the src/App.js file.

2. Convert the Logo and BestPokemon functions into arrow functions.

WHAT

ARE

COMPONENTS

?

WHERE

HAVE WE

COME FROM

?

Thinking in Components

Thinking in Components

Exercise: Thinking in components

Exercise: Thinking in components

IMPerative (Non-react)

declarative (react)

CYF React Week 1

CYF React Week 1

Jack Franklin

WHAT

ARE

COMPONENTS

?

WHERE

HAVE WE

COME FROM

?

Thinking in Components

Thinking in Components

Exercise: Thinking in components

Exercise: Thinking in components

IMPerative (Non-react)

declarative (react)

CYF React Week 1

More from Jack Franklin