React

import React from 'react'

const Card = ({name, description}) => {
  return (
    <div>
      <span>Product: {name}</span>
      <p>Description: {description}</p>
    </div>
  )
}

export default Card

import React from 'react'
import Card from './Card'

const Parent = () => {
  return (
    <div>
      <Card name="Game of thrones" description="Greats Books" />
      <Card name="The Lion King" description="Super movie" />
    </div>
  )
}

export default Parent

npm create vite@latest my-react-app -- --template react-ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

npm install --save-dev eslint
yarn add -D eslint

{
  "env": {
    "jest": true // À ajouter
  },
  "plugins": [
	"@typescript-eslint",  // À ajouter
	"prettier"  // À ajouter
  ],
  "extends": [
    "prettier" // À ajouter
  ]
}

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

// On écrira alors: 
import Loader from '@/components/Loader';
//Plutôt que
import Loader from '../../components/Loader';

npm i -D vite-tsconfig-paths

"paths": {
  "@components/*": ["./src/components/*"]
}

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});

const name = 'Fabio'
const element = (<h1>Bonjour, {name}</h1>)

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(element);

const Button = ({name}) => {
  return <button>Send to {name}</button>
}

root.render(
  <Button name="Fabio" />
)

const Button = ({name}) => {
  return React.createElement('button', {name}, `Send to ${name}`)
}

root.render(
  React.createElement(Button, {name: 'Fabio'}, null)
)

import React from "react"
import UserCard from "./Usercard"
const Profile = () => {
  return (
    <h2>Profil</h2>
    <UserCard id={1} name="Fabio"></UserCard>
  )
}
// Ne va pas compiler car deux éléments sont retournés

import React from "react"
import UserCard from "./Usercard"
const Profile = () => {
  return (
    <React.Fragment>
      <h2>Profil</h2>
      <UserCard id={1} name="Fabio"></UserCard>
    </React.Fragment>
  )
}

<div>
    <span></span>
    <UserCard id={1} name="Fabio"></UserCard>
</div>

// revient à écrire
<div>
    <span />
    <UserCard id={1} name="Fabio"/>
</div>

<MyComponent propsA={valueA} propsB={valueC}/>

<UseCard name="Tony Start" hero="Iron Man"/>

ReactDOM.render(
  <Welcome name="Fabio" />,
  document.getElementById('root')
)

const user = {
  name: "Fabio",
  gender: "male"
}

return (
  <Welcome {...user} />
)

<SomeComponent visible />
// est équivalent à
<SomeComponent visible={true} />

const DisplayThreeTimesComponent = (props) => {
    return <div>
        {props.children}
        {props.children}
        {props.children}
    </div>
}


const ParentComponent = () => {
    return (
      <div>
          <Header />
          <DisplayThreeTimesComponent>
              <p>Hello !</p>
          </DisplayThreeTimesComponent>
      </div>
    )
}

git clone https://github.com/FabioReact/exercice-react.git
cd exercice-react
npm install / npm i / yarn
npm run dev / yarn dev

const names = ['Emmanuel', 'Martin', 'Dupont']
const arrayOfLi = names.map((name) => <li>{name}</li>)
return (
  <ul>
    {arrayOfLi}
  </ul>
)
// Ou encore
const names = ['Emmanuel', 'Martin', 'Dupont']
return (
  <ul>
    {names.map(name => <li>{name}</li>)}
  </ul>
)

const names = ['Tony', 'Steve', 'Natasha']
return (
  <ul>
    {names.map((name, index) => <li key={index}>{name}</li>)}
  </ul>
)

import PropTypes from 'prop-types'

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    )
  }
}

Greeting.propTypes = {
  name: React.PropTypes.string
}

type Props = {
  name: string;
};

const Greeting = (props: Props): JSX.Element => {
  return (
    <h1>Hello, {props.name}</h1>
  );
};

class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome, {this.props.name}</h1>
    )
  }
}

Welcome.defaultProps = {
  name: "Fabio"
}

const Greeting = ({name = "Emmanuel"}) => {
    return <h1>Hello, {name}</h1>;
}

const MyComponent = () => {
  // ...
}

export default MyComponent

const MyComponent = () => {}
const MySecondComponent = () => {}

export { MyComponent, MySecondComponent as MSComponent }

export { fonction1 as default, fonction2, fonction3 }

import MyComponent from "./path/to/component";

import { MyComponent } from "./path/to/component";

import fonctionParDefaut, { fonction2, fonction3 } from "./path/to/functions";

import MonComposantRenomme from "./path/to/component";

import { MyComponent as MonComposantRenomme } from "./path/to/component";

src 
│
└───hooks
│   │   useCustomHook.jsx
│   
└───components
│   │   Navbar.jsx
│   │   Header.jsx
│   │   Footer.jsx│  
│
└───pages
│   │   Home.jsx
│   │   Blog.jsx

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  static getDerivedStateFromProps(nextProps, prevState)
  {
    if (true) {
      return someNewState
    }
    return null
  }

  render() {
    // JSX
  }
 
  componentDidMount() {
    // Code After-render
  }
  
}

class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Renvoie "true" par défaut
  }

  
  
  
  getSnapshotBeforeUpdate(prevProps, prevState) {
	// Utilise si on a besoin de faire
	// des calculs selon l'état précédent
  }
 

  componentDidUpdate() {
    // Après le re-render
  }

  
  
  render() {
    // re-render
  }
  
}

class MyComponent extends Component {
  componentWillUnmount() {
	// Code unsubscribe
  }
}

import React, { useState } from 'react';

const Count = (props) => {
    const initialCount = 0; // Peut être un array [], un object {},
    // une string "chaine", un int...
    const [count, setCount] = useState(initialCount);
    return (<>
      Total : {count}
      <button onClick={() => setCount(initialCount)}>Réinitialiser</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>);
}
// Ici, utilisation de React.Fragment dans sa forme réduite: <> et </>
export default Count;

import React, { useEffect } from 'react';

const SomeComponent = (props) => {
   	// Some code
    useEffect(() => {
      // Effect
	  return () => {
         // Clean up effect
	  };
    }, [input]);
   	// Some Code
    return (
      //Some JSX
    )
}

import React, { useLayoutEffect } from 'react';

const SomeComponent = (props) => {
   	// Some code
    useLayoutEffect(() => {
      // LayoutEffect
	  return () => {
         // Clean up effect
	  };
    }, [input]);
   	// Some Code
    return (
      //Some JSX
    )
}

import React, { useRef } from 'react';

const SomeComponent = (props) => {
  const usernameRef = useRef(null);
  const login = () => {
    const username = usernameRef.current.value;
    // Some code...
  }
  return (
    <>
      <input ref={usernameRef} type="text" id="username" />
      <button onClick={login}>Submit</button>
    </>
  )
};

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {counter: state.counter + 1};
    case 'decrement':
      return {counter: state.counter - 1};
    default:
      throw new Error("Incorrect action type");
  }
}

const Counter = (props) => {
  const initialState = {counter: 0};
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <p>Compteur: {state.counter}</p>
      <button onClick={() => dispatch({type: 'increment'})}>Increment</button>
      <button onClick={() => dispatch({type: 'decrement'})}>Decrement</button>
    </>
  )
};

import React, { useTransition } from 'react';

const MyComponent = (props) => {
  const [isPending, startTransition] = useTransition()
  
  const someEventHandler = (event) => {
    startTransition(() => {
      // Toutes les mises à jour faite ici sont déclarées comme non urgente et peuvent être interrompues
      setValue(event.target.value);
    });
  }

  return (...)
};

import React, { useDeferredValue } from 'react';

const MyComponent = ({ list }) => {
  const deferredValue = useDeferredValue(list);

  return (
    <>{deferredValue.map(el => <OtherComponent info={el} />)}</>
  )
};

function HelloUser(props) {
  if (!props.name) return (<p>Hello visitor</p>)
  return (<p>Hello {props.name}</p>)
}

function HelloUser(props) {
  return (<p>Hello {props.name ? props.name: 'visitor'}</p>)
}

function HelloUser(props) {
  let component = null
  if (props.name) component = (<p>Hello {props.name}</p>)
  else component = (<p>Hello visitor</p>)

  return component
}

function HelloUser(props) {
  return (
    <p>Hello gamer</p>
    {props.points && <p>You have {props.points} points so far. Good job!</p>}
  )
}

function HelloUser(props) {
  return (
    <p>Hello gamer</p>
    <p>You have {props.points || 0} points so far.</p>
  )
}

<input
  type="text"
  value="My value"
/>

  constructor(props) {
    super(props);
    this.state = {inputValue: "My default value"};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({inputValue: event.target.value});
  }
  handleSubmit(event) {
    console.log('The submitted value was ' + this.state.inputValue);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.inputValue}
          onChange={this.handleChange}
        />
        <button>OK</button>
      </form>
    );
  }

  const [inputValue, setInputValue] = useState('')
  
  const handleChange = (event) =>  {
    setInputValue(event.target.value)
  }
  
  const handleSubmit = (event) => {
    event.preventDefault()
    console.log('The submitted value was ' + inputValue)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <button>OK</button>
    </form>
  );

constructor(props) {
  super(props);
  this.inputRef = React.createRef();
}

handleSubmit(event) {
  console.log('we got the value ' + this.inputRef.current.value);
  event.preventDefault();
}

render() {
  return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <input 
          type="text"
          defaultValue="A default value"
          ref={this.inputRef} />
        <button>OK</button>
      </form>
  );
}

import React, { Suspense, lazy } from 'react';
import Profile from './components/Profile';

const User = lazy(() => import('./components/User'));

const App = () => (
  <React.Fragment>
    <Profile />
    <Suspense fallback={<div>Loading...</div>}>
      <User />
    </Suspense>
  </React.Fragment>
);

import React, { PureComponent} from 'react';

class SomeComponent extends PureComponent {
    // Some Code
    render() {
      return (
      	// Some JSX
      );
    };
};

import React from 'react';

const SomeComponent = (props) => {
    // Some Code
    return (
      // Some JSX
    );
};

export default React.memo(SomeComponent);

import React, { useCallback } from 'react';

const SomeComponent = (props) => {
  // ...
  const memoizedCallback = useCallback(
    () => {
      doSomething(a, b);
    },
    [a, b],
  );
  // ...
};

import React, { useMemo } from 'react';

const SomeComponent = (props) => {
  // ...
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  // ...
};

// theme-context.js
import{ createContext } from 'react';

const ThemeContext = createContext({
    foreground: "#000000",
    background: "#eeeeee"
});

export default ThemeContext;

// App.jsx
const App = () => {
  return (
    <>
      <ThemeContext.Provider value={{
        foreground: "#ffffff",
        background: "#222222",
      }}>
        <Home />
      </ThemeContext.Provider>
      <Footer />
    </>
  );
}

// ThemeButton.jsx
import ThemeContext from "./context/theme-context";

const ThemedButton = () => {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      Je suis stylé par le contexte de thème !
    </button>
  );
}

export default ThemeContext;

import ThemeContext from "./context/theme-context";

const useTheme = () =>  useContext(ThemeContext);

export default useTheme;

// ThemeButton.jsx
import ThemeContext from "./context/theme-context";

const ThemedButton = () => {
  return (
    <ThemeContext.Consumer>
      {(theme) => (
        <button style={{
          background: theme.background,
          color: theme.foreground
        }}>
          Je suis stylé par le contexte de thème !
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemeContext;

npm install -D vitest

{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest"
  },
  ...
}

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./setupTests.ts'],
  },
});

import { describe, it, test, expect } from 'vitest';

describe('something truthy and falsy', () => {
  it('should be true', () => {
    expect(true).toBe(true);
  });

  test('false to be false', () => {
    expect(false).toBe(false);
  });
});

npm install --save-dev jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

import '@testing-library/jest-dom'

import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import Fetch from './fetch'

test('loads and displays greeting', async () => {
  // render permet de charger notre composant dans notre test
  render(<Fetch url="/greeting" />)

  // userEvent permet de simuler des actions utilisateur
  await userEvent.click(screen.getByText('Load Greeting'))
  // getBy throw une erreur si le noeud n'est pas trouvé contrairement à findBy
  await screen.findByRole('heading')

  // ASSERT
  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  };
}

const initialState = {};

function rootReducer(state = initialState, action) {
  // On mettra en place ici un switch/case pour une faire un traitement particulier
  // selon le type de l'action qui aura été passé en argument lors du dispatch
  // et ainsi retourner le nouvel état de l'application
  return state
};

npm install --save redux react-redux
OU
yarn add redux react-redux

// src/index.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './store/reducer';

const myStore = createStore(rootReducer);

ReactDOM.render(
  <Provider store={myStore}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// src/store/reducer.js
import * as actionTypes from './actionTypes'

const initialState = {
  todos: []
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      }
    default:
      return state
  }
}

// src/store/actionTypes.js
export const ADD_TODO = "ADD_TODO"

// src/store/actionCreators.js
import * as actionTypes from './actionTypes'
export const addToDo = (text) => {
  return {
	type: actionTypes.ADD_TODO,
	text: text
  }
}

// src/pages/ToDoComponent.js
import React from "react"
import { connect } from "react-redux"
import { addToDo } from "../store/actionCreators.js"

const ToDoComponent = props => {
  // ...
}
// mapStateToProps reçoit comme paramètre le store actuel de redux
const mapStateToProps = state => {
  return {
    todos: state.todos // props.todos (type []) sera accessible dans notre component
  }
}
// mapStateToProps reçoit comme paramètre la fonction dispatch de redux
const mapDispatchToProps = dispatch => {
  return {
    onAddToDo: (text) => dispatch(addToDo(text)) // props.onaddTodo (type fn) sera  aussi accessible
  }
}
// connect permet de connecter ce que l'on vient de définir à notre composant
export default connect(mapStateToProps, mapDispatchToProps)(ToDoComponent)

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer';
import someMiddleware from './someOMiddleware';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
    reducer,
    composeEnhancers(applyMiddleware(someMiddleware))
)

npm install --save redux-thunk
OU
yarn add redux-thunk

// src/index.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk'
import { Provider } from 'react-redux';
import rootReducer from './store/reducer';

const withMiddleware = applyMiddleware(thunkMiddleware)
const myStore = createStore(rootReducer, undefined, compose(withMiddleware));
ReactDOM.render(
  <Provider store={myStore}>
    <App />
  </Provider>,
  document.getElementById('root')
);

// src/store/actionTypes.js
export const ADD_TODO = "ADD_TODO"

// src/store/actionCreators.js
import * as actionTypes from './actionTypes'
export const addToDo = (text) => {
  return {
	type: actionTypes.ADD_TODO,
	text: text
  }
}

export const asyncAddToDo = (text) => {
  return dispatch => {
    // Exécuter de l'asynchrone ici...
    await response = fetch("URL")
    dispatch(addToDo(text))
  }
}

// src/pages/ToDoComponent.js
import { asyncAddToDo } from "../store/actionCreators.js"

const mapDispatchToProps = dispatch => {
  return {
    onAddToDo: (text) => dispatch(asyncAddToDo(text))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ToDoComponent)

import React from 'react'

class MyComponent extends React.Component {
  constructor(props) {
      super(props);
      // ...
  }

  someCustomMethod(){
    // Code
  }    

  render() {
    return (<div>
      // Some Content
    </div>)
  }
}

import React, { Component } from 'react'

class MyComponent extends Component {
  // ...
}

const MyComponent = (props) => {
    return (
      <div>
        { (...) }
      </div>
    );
}

class TogglableImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {displayImage: true};
  }

  toggleImage() {
    this.setState({
      displayImage : !this.state.displayImage
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleImage.bind(this)}>Show/hide the image</button>
        {this.state.displayImage && <img src={logo}/>}
      </div>
    );
  }
}

// Peut se tromper
this.setState({
  counter: this.state.counter + 1
})


// Syntaxe toujours correcte !
// Reçoit le state courant et les props courantes au moment
// où l'update sera appliqué
this.setState((prevState, props) => ({
  counter: prevState.counter + 1
}))

class SayHello extends React.Component {

  handleClick() {
    // KO : "this" ici n'est pas la classe !
    this.setState({})
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

class SayHello extends React.Component {

  handleClick() {
    // Ok
    this.setState({})
  }

  render() {
    // .bind(this) force à transmettre le this
    return (
      <button onClick={this.handleClick.bind(this)}>
        Say hello
      </button>
    );
  }
}

class SayHello extends React.Component {

  constructor(props){
    super(props);
    // on bind à this et on écrase
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // OK
    this.setState(...)
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

class SayHello extends React.Component {

  constructor(props){
    super(props);
  }

  handleClick = () => {
    // OK
    this.setState({});
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

constructor(props) {
    super(props);
    this.myRef = React.createRef();
}

componentDidMount(){
    // création d'une chart avec ChartJS
    new Chart(this.myRef.current, {
        (...)
    });
}


render() {
    // On utilise le `ref` callback pour stocker la référence vers
    // le noeud DOM dans un champ custom du this
    return (
      <div ref={this.myRef} />
    );
}