mathieu-anderson

// React components are declared as functions
// And can be assigned to variables (treated as values)
const Component = () => {
  return <div>A first-class function</div>
}
function App() {
// They also can be the return value of another function 
// Treating them like data
  return <Component />
}

mathieu-anderson

Charlie Owen - All constraints are beautful

Using cakes to make your friends happy

But they all have issues (vegan, gluten intolerance, peanut allergy) So they all went to the bar -> examples of constraints : making people happy is the objective, you adapt to the constraints

Constraints makes us more creative : Mihaly Csikszentmihaly Nietzsche : "Dancing in chains"

mathieu-anderson

import * as React from "react";
import { render } from "react-dom";

// Defining types
type InputValue = string | number;
type Label = string;

// Defining an interface
interface InputProps {
  value: InputValue;

mathieu-anderson

// Defining an interface
type InputValue = string | number;
type Label = string;

interface InputProps {
  value: InputValue;
  label: Label;
}

function InterfaceTsInput(props: InputProps) {

mathieu-anderson

// Defining types
type InputValue = string | number;
type Label = string;

function TypeTsInput(props: { value: InputValue; label: Label }) {
  const { value, label } = props;
  return (
    <div className="container">
      <div className="label">{label}</div>
      <div className="typeof">

mathieu-anderson

import * as React from "react";
import { render } from "react-dom";

// Inline types
function InlineTsInput(props: { value: number | string; label: string }) {
  const { value, label } = props;
  return (
    <div className="container">
      <div className="label">{label}</div>
      <div className="typeof">

mathieu-anderson

import * as React from "react";
import { render } from "react-dom";

// Vanilla JS
function JsInput({ value, label }) {
  return (
    <div className="container">
      <div className="label">{label}</div>
      <div className="typeof">
        Type: <b>{typeof value}</b>

mathieu-anderson

// Get the value for index n in a Fibonacci sequence

// Recursion : O(2^n)
// n: positive integer
const getFibRecursion = n => {
  //initialize result to be returned eventually
  let result
  // check for the first two values (not computable)
  if (n === 1 || n === 2) {
    result = 1

mathieu-anderson

for (var i = 0; i < 9; i++) {
  // var i = 0; -> initial value of the loop statement : i === 0
  // executed before the first iteration

  //  i < 9 -> condition that must be true for the loop to proceed : check if i is less than 9
    // if it is not less than 9, end the loop
    // if it is less than 9, do the thing inside the loop :
      console.log('The current value of i is :', i)

  // i++ -> post statement (executed at the end of an iteration) : increment i by 1 (i++ is the same as i + 1)

mathieu-anderson

!! Disclaimer : no value judgement !! !! Disclaimer : I'm not an expert !!

Components are the building block of a React app. There have been historically many ways of defining a component. But there are two main approach :

• class component
• "stateless functional components", or more simple functional component (the "stateless" part is going away soon)

Difference between class and functional components