React & Hooks 

En introduksjon

Kort React-intro ✌️

Hva er React? 🤔

A JavaScript library for building user interfaces.

– Reactjs.org

Hva er React? 🤔

A JavaScript library for building user interfaces.

– Reactjs.org

Hvorfor bruke React? 🤷🏼‍♀️

  • Gjenbrukbart og skalerbart
  • God ytelse
  • God plattformstøtte
  • Stort utviklersamfunn

Det minste React-eksempelet

Hei verden! 👋

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

ReactDOM.render(
  <h1>Hei verden!</h1>, 
  document.getElementById("root"),
);

Hei verden! 👋

Det minste React-eksempelet

JSX

En syntaksutvidelse for JavaScript (JavaScript + XML)

Babel

Kompilerer JSX ned til noe som nettleseren forstår

Komponenter

JavaScript-funksjoner

Props

  • "Egenskaper" som kan sendes mellom komponenter
  • Endres en prop fører dette til en re-render av komponenten
  • Props kan kun sendes én vei:

Komp A

Komp B

❌

Props

Conditional Rendering 

Lister og nøkler 

Litt om Hooks 🤙

Hva er Hooks? 🤔

  • En ganske ny React-feature (introdusert i versjon 16.8)

  • Lar oss bruke tilstand og sideeffekter i funksjons-komponenter

  • Kjennetegnes ved at funksjonene har "use" som prefix

Hooks

  • En ganske ny React-feature

  • Kjennetegnes ved at funksjonene har "use" som prefix

  • De mest vanlige hookene er:

    • useState 

    • useEffect

    • Custom Hooks

  • NB! Hooks må brukes på toppnivå (ikke i løkker, if-setninger eller nøstede funksjoner)

Hvorfor Hooks? 🤔

  • Gjør det enklere å gjenbruke tilstandslogikk på tvers av komponenter

  • Ingen kompliserte livssyklusmetoder (som componentDidUpdate)

  • Ingen binding av "this"

  • Ingen breaking changes (kan trygt brukes parallelt med eksisterende kode)

  • Slipper konvertering av funksjonskomponenter til klassekomponenter

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  onButtonClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.onButtonClick}>Click me</button>
      </div>
    );
  }
}
const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  function onButtonClick() {
    setCount(prevState => prevState + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={onButtonClick}>Click me</button>
    </div>
  );
};

Grunnleggende Hooks 🤓

  • useState ✅

  • useEffect ✅

  • useContext ✅

Ytterligere Hooks 🤯

  • useReducer

  • useRef

  • useCallback

  • useMemo

  • useImperativeHandle

  • useLayoutEffect

  • useDebugValue

Du kan også lage egne Hooks (såkalte Custom Hooks
som samler flere Hooks).

Ytterligere Hooks 🤯

  • useReducer ✅

  • useRef ✅

  • useCallback ⛔️

  • useMemo ⛔️

  • useImperativeHandle ⛔️

  • useLayoutEffect ⛔️

  • useDebugValue ⛔️

Du kan også lage egne Hooks (såkalte Custom Hooks ✅ som samler flere Hooks).

To fundamentale regler ✅

  1. Hooks må brukes på toppnivå
     
  2. Må kun brukes i funksjonskomponenter og i
    Custom Hooks

ℹ️

Bruk ESLint og installer eslint-plugin-react-hooks (denne utvidelsen sørger for at du ikke bryter disse to reglene).

useState 🚦

Brukes til tilstandslogikk

useState 🚦

Brukes til tilstandslogikk

useEffect ⚡️

  • Brukes til sideeffekter (f.eks. nettverkskall, endre DOMen etc.)
     

  • Erstatter livssyklusmetodene componentDidMount, componentDidUpdate og componentWillUnmount

useEffect(() => {
  document.title = `You clicked ${count} times`;
});
componentDidMount() {
  document.title = `You clicked ${this.state.count} times`;
}

componentDidUpdate() {
  document.title = `You clicked ${this.state.count} times`;
}

useEffect ⚡️

useEffect ⚡️ 

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

Trigging av effekter kan utelates

ℹ️

Denne effekten trigges ved mount og unmount.

useEffect ⚡️

Trigging av effekter kan utelates

ℹ️

Denne effekten trigges ved mount og unmount.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

ℹ️

Denne effekten trigges kun når count endrer seg.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

useEffect ⚡️

Custom Hook 🏗

useContext ⚙️

import React, { createContext } from "react";

const texts = { 
  nb: { hello: 'Hei' },
  en: { hello: 'Hello' },
};

export const LanguageContext = createContext(texts.nb);
import React, { useContext } from "react";
import LanguageContext from "./LanguageContext";

export const LocalizedHello = ({ name }) => {
  const { hello } = useContext(LanguageContext);
  return <h1>{hello} {name}!</h1>
};

export const App = props => (
  <LanguageContext.Provider value={texts.en}>
    <LocalizedHello name="Ola Nordmann" />
  </LanguageContext.Provider>
);
  • Brukes gjerne til mer kompleks tilstandslogikk (f.eks. når flere tilstander endres samtidig)
     
  • Minner veldig mye om Redux

useReducer 🧽

useReducer 🧽

import React, { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

Hva har vi lært så langt? 🤓

  • Komponenter – det appen din bygges opp av
  • JSX – JavaScript + XML (HTML-markup)
  • Props – dele egenskaper mellom komponenter
  • Conditional rendering – lar oss bestemme hva som vises når
  • Lister og nøkler – rendre komponenter dynamisk
  • Hooks – brukes til tilstand og sideeffekter

tinyurl.com/

react-hooks-ws

github.com/

bekk/react-intro

Made with Slides.com