https://github.com/greeeg/hetic-p2023-react

⚡️Introduction to React.js & modern front-end development for HETIC H2 students
https://github.com/greeeg/hetic-p2023-react

frontend reactjs tutorial

Last synced: about 1 month ago
JSON representation

⚡️Introduction to React.js & modern front-end development for HETIC H2 students

• Host: GitHub
• URL: https://github.com/greeeg/hetic-p2023-react
• Owner: greeeg
• License: agpl-3.0
• Created: 2020-02-18T08:07:13.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T02:59:34.000Z (about 1 year ago)
• Last Synced: 2023-12-15T03:57:37.727Z (about 1 year ago)
• Topics: frontend, reactjs, tutorial
• Language: JavaScript
• Homepage: https://hetic-p2023-react.netlify.app/
• Size: 14.6 MB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# hetic-p2023-react · [![GitHub license](https://img.shields.io/badge/license-AGPLv3-blue)](https://github.com/greeeg/hetic-p2023-react/blob/master/LICENSE) [![Pull requests](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/greeeg/hetic-p2023-react/pulls)

> Introduction à [React.js](http://reactjs.org/) et au développement front-end avancé à [HETIC](https://www.hetic.net/)

## 🎯 Objectif

L'objectif de ce cours est d'introduire la librarie React.js et son rôle dans le développement d'applications web front-end modernes. Plus largement, il a également pour but de comprendre le panorama front-end, ses enjeux, son histoire et ses acteurs.

Très concrètement, être capable de développer une application React.js fonctionnelle et être en mesure de développer ses compétences par soi-même par la suite.

## 🗺 Ressources

- 👨‍🏫 **La présentation**: [`Site web`](https://hetic-p2023-react.netlify.com/) [`PDF`](https://github.com/greeeg/hetic-p2023-react/raw/master/hetic-p2023-react.pdf)

- 🗺 **La CheatSheet**: [`GitHub`](https://github.com/greeeg/hetic-p2023-react/blob/master/CHEATSHEET.md)

- 👩‍🔧 **Sandbox**: [`Codesandbox.io`](https://codesandbox.io/s/hetic-p2023-wikily-etdso?file=/src/App.js)

## 🏁 Le plan

### 👀 Le contexte

- Comment s'affiche une page web ?

- Évolution du développement front-end

### ⚛️ React

- Qu'est-ce que React.js

- Les concepts derrière React

  - Declaratif vs Imperatif

  - Everything is a component

  - Learn once, write everywhere

### 🐣 Les bases de React.js

- Le JSX

- Les composants

- Les Props

- Le style

- Gestion des évènments

- Le state

- Le cycle de vie

- Le rendu conditionnel

- Les listes

- Les formulaires

### 🤔 Mise en perspective de React.js

- Avantages/Inconvénients

- Alternatives

### 👵 Aller plus loin avec React.js

- Utiliser `create-react-app`

- React Dev Tools

- Déployer une application React.js

- L'AJAX avec React.js

- Le CSS-in-JS

- Le routing

- Les performances

### ✨ L'écosystème React

- The React community

- React.js developer roadmap