README.md

# React JS App Vite

React JS App created by Vite

### Online at http://nathalie.rousse.pages.mia.inra.fr/react-js-app-vite

# Creation

- See :
  "ReactJS pour debutants #1 Introduction - Tuto français"
  https://www.youtube.com/watch?v=-WT3641nb9k

- Required : **nodeJS**, **npm**
```
node -v
v18.20.5
npm -v
10.8.2
```

- Using VSCodium https://vscodium.com ,
  https://github.com/VSCodium/vscodium/releases

  *Note : Visual Studio Code for the Web https://vscode.dev provides a free,
  zero-install Microsoft Visual Studio Code experience running entirely in
  your browser.*

- Creation using 'Vite' (*instead of command ```create react app```*)

```
npm create vite@latest

> npx
> create-vite

✔ Project name: … jsapp
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in react-js-app-vite/jsapp...

Done. Now run:

  cd jsapp
  npm install
  npm run dev
```

- Dev Run :
```
cd jsapp
npm install
npm run dev
```

- More detailed install :
```
npm install react@^18.0.0 react-dom@^18.0.0

# React Router for multiple pages
npm install react-router-dom

# leaflet for 'World' App :
npm install react-leaflet@^4.0.0
npm install leaflet
npm install react-leaflet-cluster
```

- CI/CD :

  - See https://vite.dev/guide/static-deploy.html

  - See .gitlab-ci.yml

  - App online at
    **http://nathalie.rousse.pages.mia.inra.fr/react-js-app-vite**

- Multiple pages with React Router :

  - See https://www.digitalocean.com/community/questions/how-to-build-multple-pages-website-using-react-js-i-have-not-idea

  - **Required** : react-router-dom

# Content

## Some examples

- AppBasics.jsx
- AppOriginal.jsx
- TicTacToe.jsx
- World.jsx
  - See : Tutoriel sur l'utilisation de Leaflet avec React
    https://www.linkedin.com/pulse/tutoriel-sur-lutilisation-de-leaflet-avec-react-christian-humbert-qoyhe
  - Leaflet : bib pour creer des cartes interactives
  - **Required** : react-leaflet leaflet react-leaflet-cluster

## Siwaa

- ***SiwaaBrowsing_0.jsx*** :

  HTTP GET requests as "a href=..." tags.

  Authentication by firstly connecting to Siwaa
  (https://siwaa.toulouse.inrae.fr) from the Web Browser.

- **SiwaaBrowsing.jsx** :

  HTTP requests : React + Fetch

  Required : Domain must have been declared into Siwaa Configuration (See
  'allowed_origin_hostnames' into config/galaxy.yml).

  See
  - https://builtin.com/software-engineering-perspectives/react-api
  - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
  - https://medium.com/@olivier.trinh/how-to-use-fetch-in-react-js-b142f372dfb5
  - https://jasonwatmore.com/post/2020/02/01/react-fetch-http-post-request-examples