React WorkShop: Ressources

Les branches

Code de base : Télécharger
Code partie 2 : Télécharger
Code Serveur : Télécharger

Les Diagrammes :

Inspiré de Stephen Grider React Js course

Les schémas utilisées dans ce workshop sont disponible sous forme zip forme de fichier zip. Télécharger ici
Téléchargez le fichier et décompressez-le quelque part sur votre ordinateur.
Visitez diagrams.net (anciennement draw.io). Vous pouvez travailler directement en ligne ou ajoutez l'extension a votre navigateur chrome .

En ligne

Sélectionnez Ouvrir un diagramme existant et utilisez l'explorateur de fichiers pour sélectionner le fichier de diagramme sur votre ordinateur.

Hors ligne

Installez l'extension diagrams.net sur votre navigateur chrome Cliquez ici
Ouvrir l'application diagrams sur votre ordinateur
utilisez l'explorateur de fichiers pour sélectionner le fichier de diagramme sur votre ordinateur.

Environnement :

Systeme d'exploitation linux ubuntu 20.04
Editeur de code: VS code

Dans workshop, vous verrez fréquemment mon code "s'effacer", ou se reformater chaque fois que j'enregistre un fichier. Cela se fait automatiquement a l'aide de . Prettier.io

Terminal :

J'utilise TERMINATOR comme terminal - Terminator

Installer terminator(si vous etes sur linux)

sudo add-apt-repository ppa:gnome-terminator

sudo apt-get update

sudo apt-get install terminator

Installation de NodeJS

Installer Nodejs : nodejs
Vérifier que Node est bien installé :

atemengue:~$ node --version
v16.13.0
atemengue:~$ npm --version
8.1.0

Code Snippets

Vous pouverez ici tout les petits bout de code de l'application

1. Appercu code react

function App() {

  const [term, setTerm] = useState();

  return (
    <div className='ui container'>
      <Field onChange={setTerm} value={term} label='Tapez votre clavier' />
      <div className='ui divider' />
      <Speakers data={data} />
    </div>
  );
}

export default App;

2. Header Composant

export default function Header() {
  return (
    <div>
      <div>
        <img
          className='ui image'
          alt='logo speakers 237'
          src='/images/banner.png'
        />
      </div>
      <div className='ui huge menu'>
        <a href='#' className='item'>
          Acceuil
        </a>
        <a href='#' className='item'>
          Laisser un message
        </a>
        <a href='#' className='item'>
          A propos
        </a>
        <div class='right menu'>
          <a href='#' className='item'>
            Faire un don
          </a>
        </div>
      </div>
    </div>
  );
}

3. Footer Composant

export default function Footer() {
  return (
    <div className='ui vertical footer segment'>
      <div className='ui container'>
        <div className='ui stackable inverted divided equal height stackable grid'>
          <div className='three wide column'>
            <h4 className='ui header'>A propos de nous</h4>
            <div className='ui link list'>
              <a href='#' className='item'>
                Equipe
              </a>
              <a href='#' className='item'>
                React Workshop
              </a>
            </div>
          </div>
          <div className='three wide column'>
            <h4 className='ui header'>Laisser nous un message</h4>
            <div className='ui link list'>
              <a href='#' className='item'>
                Banana Pre-Order
              </a>
              <a href='#' className='item'>
                DNA FAQ
              </a>
              <a href='#' className='item'>
                How To Access
              </a>
              <a href='#' className='item'>
                Favorite X-Men
              </a>
            </div>
          </div>
          <div className='seven wide column'>
            <h4 className='ui header'>Helios React JS WorKShop</h4>
            <p>
              Extra space for a call to action inside the footer that could help
              re-engage users.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

4. Speaker Card UI

const SpeakerCardUI = () => {
  return (
    <div to={`/speaker/${id}`} className='ui card'>
      <img alt=''src='' />
      <div className='content'>
        <a href='#' className='header'>
          surname - name
        </a>

        <div className='description'>biographie</div>
        <div className='ui divider'></div>
        <div className='meta'>
          <span>
            <i className='user icon'></i>twitteAccount</span>
        </div>

        <div className='ui divider'></div>
        <span>
          <i className='home icon'></i>
          company
        </span>
      </div>
      <div className='extra content'>
        <a href='#'>
          <i className='bullhorn icon'></i>
          sessions
        </a>
      </div>
    </div>
  );
};

export default SpeakerCardUI;

5. Speaker detail

 const speakerDetail() {

  return (
    <div className='ui container'>
      <div className='ui vertical segment'>
        <div className='ui stackable grid'>
          <div className='six wide column'>
            <img
              src={'/images/dummy-speaker-image.jpg'}
              alt='photo de profil du speaker'
              className='ui image'
            />
          </div>
          <div className='ten wide column'>
            <h1 className='ui header'>
              <span className='sub'>
                Noms et Prenoms
              </span>
            </h1>
            <p className='ui text'>biographie du speaker</p>
            <p>
              <div className='ui list'>
                <div className='item'>
                  <i className='large home icon'></i>
                  <div className='content'>
                    <span className='header'>Entreprise</span>
                  </div>
                </div>
                <div className='item'>
                  <i class='twitter large icon'></i>
                  <div className='content'>
                    <span className='header'>
                      Compte twitter
                    </span>
                  </div>
                </div>
              </div>
              <div className='ui divider' />
              <h2 class='ui header'>Sessions</h2>
              <div  className='ui list'>
              <div className='item'>
                <i className='map marker icon'></i>
                <div className='content'>
                  <span className='header'>Titre de la session</span>
                  <div className='ui list'>
                    <div className='item'>
                      <i class='calendar icon'></i>
                      <div class='content'>date la session</div>
                    </div>
                    <div className='item'>
                      <i class='location arrow icon'></i>
                      <div class='content'>Nom de la salle</div>
                    </div>
                    <div className='item'>
                      <i class='users icon'></i>
                      <div class='content'>
                        Nombre de place
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

6. Class Component

import React from 'react';

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

  Increment() {
    this.setState({
      counter: this.state.counter + 1,
    });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.Increment()}>Incrementer</button>
        {this.state.counter}
      </div>
    );
  }
}

7. Functionnal Composant

import React, { useState } from 'react';

const App = () => {

  let [counter, setCounter] = useState(0);

  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>Ajouter I</button>
      {counter}
    </div>
  );
};

8. Field Component

const Field = () => {
  return (
    <div>
      <div className='ui icon input'>
        <i className='search icon'></i>
        <input
          type='text'
          placeholder=""
          value=""
        />
      </div>
      <br />
      {value}
    </div>
  );
};

export default Field;

9. ImageSpeaker

export default function ImageSpeaker({ primaryImage, secondaryImage }) {
  const imageRef = useRef(null);
  return (
    <img
      ref={imageRef}
      alt=''
      onMouseOver={() => {
        imageRef.current.src = secondaryImage;
      }}
      onMouseOut={() => {
        imageRef.current.src = primaryImage;
      }}
      src={primaryImage}
    />
  );
}

10. UserPlaceHolder

/** @format */

export default function UserPlaceHolder() {
  return (
    <div class='ui three doubling stackable cards'>
      <div class='ui card'>
        <div class='image'>
          <div class='ui placeholder'>
            <div class='square image'></div>
          </div>
        </div>
        <div class='content'>
          <div class='ui placeholder'>
            <div class='header'>
              <div class='very short line'></div>
              <div class='medium line'></div>
            </div>
            <div class='paragraph'>
              <div class='short line'></div>
            </div>
          </div>
        </div>
        <div class='extra content'>
          <div class='ui disabled primary button'>Voir le profil</div>
        </div>
      </div>
    </div>
  );
}

11. FilterSpeaker

  const filterSpeakers = (items) => {
    let spearkers = items;

    if (term) {
      spearkers = pickBy(spearkers, (value, key) => {
        return (
          value.first.match(term) ||
          value.last.match(term) ||
          value.company.match(term) ||
          value.bio.match(term)
        );
      });
    }
    return spearkers;
  }

12 . App Routes

<Routes>
  {/* Home */}
  <Route path='/' element={<Home />} />
  {/* Message   */}
  <Route path='/messages' element={<Message />} />
  {/* A propos*/}
  <Route path='/about' element={<About />} />
  {/* Speaker Details */}
  <Route path='/speakers/:idSpeaker' element={<SpeakerDetail />} />
  {/*  Faire un don*/}
  <Route path='/donate' element={<Donate />} />
  {/* 404 Page d'erreur */}
  <Route path='/donate' eleSment={<ErrorPage />} />
</Routes>