ROBOT eyes

Table of contents

• General info
• Technologies
• Setup
• Status
• Html
• React

General info

Project done during training to learn about some basic React.js concepts such as fetching data in componentDidMount(),state management, components focused programming...

Technologies

• React.js - version 16.13.1

Setup

Clone the repository then install the dependencies using yarn.

Make sure nothing is running on your port 3000.

Use yarn startto launch the website.

Status

Project is finished.

HTML

Ceci est la structure HTML pour nos yeux, nous aurons besoin d'un calque extérieur (la partie extérieure blanche) la pupille des yeux (couche noire) et nous utiliserons une pseudo classe pour lui donner la couleur (vert).

<div className="head">
  <div className="eye">
    <div className="eye-inner"></div>
  </div>
  <div className="eye">
    <div className="eye-inner"></div>
  </div>
</div>

React

import React, { useEffect } from "react";

const eyesRef = useRef(null);

useEffect(() => {
  const container = document.querySelector(".container");

  container.addEventListener("mousemove", (e) => {
    // Pour écouter les mouvements de la souris !
  });
}, [eyesRef]);