DEV Community: Sid Ali BENTIFRAOUINE

💎 🚀🦈 Deployer Rails 7 sur un Droplet Digital Ocean

Sid Ali BENTIFRAOUINE — Mon, 29 May 2023 15:38:22 +0000

Création d'un Droplet

Se rendre ici: https://cloud.digitalocean.com/droplets/new?i=c8faa3&region=fra1&size=s-4vcpu-8gb-amd

Ne rien toucher sauf qu'il faut config le SSh de preference

Se connecter en SSH au Droplet

ssh root@1.2.3.4

Installation des dépendances qu'il faut

apt install build-essential curl g++ gcc autoconf automake bison libc6-dev libffi-dev libgdbm-dev libncurses5-dev libsqlite3-dev libtool libyaml-dev make pkg-config sqlite3 zlib1g-dev libgmp-dev libreadline-dev libssl-dev


asdf install ruby 3.2.2
asdf global ruby 3.2.2

$SHELL

gem update --system

gem intsall rails

Hotwire Cheatsheet

Sid Ali BENTIFRAOUINE — Sun, 23 Apr 2023 17:39:56 +0000

Développer une API Rest avec NodeJS, Express et MongoDB: #5 MongoDB et Mongoose

Sid Ali BENTIFRAOUINE — Tue, 08 Nov 2022 13:25:22 +0000

Introduciton to MongoDB and Mongoose

We will use MongoDB as the backend database for our app. You can of course use other solutions to persist your application data e.g. in files, in a relational SQL database, or in another kind of storage mechanism. In this chapter, we will cover the popular MongoDB for database storage.

MongoDB is a NoSQL database. Before we talk about what is a NoSQL database, let ’ s first tall about relational databases so that we can provide a meaningful contrast. If you have not heard of a relational database before, you can think of relational databases like spreadsheets where data is structured and each entry is generally a row in a table. Relational databases are generally controlled with SQL or Structured Query Language. Examples of popular relational databases are MySQL, SQL Server and PostgreSQL.

NoSQL databases are often called non-relational databases, where NoSQL means anything that isn ’ t an SQL (see how it infers the popularity of SQL?). It might seem like NoSQL is a protest over SQL but it actually refers to a database not structured like a spreadsheet, i.e. less rigid than SQL databases.
So, why use Mongo? Firstly, it is popular and that means there is plenty of help online, Secondly, it is mature being around since 2007 and used by companies like eBay, Craigslist and Orange.

Architecture of MongoDB

As mentioned, the architecture of MongoDB is a NoSQL database which stores information in the form of collections and documents. MongoDB stores one or more collections. A collection represents a single entity in our app, for example in an e-commerce app, we need entities like categories, users, products. Each of these entity will be a single collection in our database.

A collection then contain documents. A document is an instance of the entity containing the various relevant fields to represent the document. For example, a product document will contain name, image and price fields. Each field is a key-value pair. Documents look a lot like JSON objects with various properties (though they are technically Binary JSON or BSON). An example of a collection-document tree is shown below:

Database
    → Products collection
        → Product document {
        price: 26,
        title: "Learning Node",
        description: "Top Notch Development book", expiry date: 27-3-2020
        }
        → Product document
        ...

    → Users collection
        → User document {
        username: "123xyz", contact:
        {
        phone: "123-456-7890", email: "xyz@example.com"
        } }
        → User document ...

Machine preparation

In order to connect to a our Database, we need to have one running in our machine. So, follow instruction here: Install MongoDB Community Edition — MongoDB Manual

For visualization

I use Table Plus on my Mac, but the is a good multi-platform GUI for visualizing your Mongo Database: Compass

Mongoose

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

npm install mongoose

Then import Mongoose

const mongoose = require("mongoose")

Do not forget to enable JSON parsing, this lets you access the .body of req:

In your code editor:

app.use(express.json())

bodyParser will let Express parse JSON body of a request.

Connect to our database

In your code editor:

mongoose.connect("mongodb://localhost:27017/test")

Mongoose Model

Lets create a model
- Called: Kitten
- Has these properties:
- name

const Kitten = mongoose.model("Kitten", { name: String })

Just for sake of testing, lets instantly create a new kitten called Le chat

const kittenToSave = new Kitten({ name: "Le chat" })
kittenToSave.save().then((kitten) => res.json(kitten))

The whole file should look like this

const express = require("express")
const bodyParser = require("body-parser")
const mongoose = require("mongoose")

const app = express()

app.use(bodyParser.json())

mongoose.connect("mongodb://localhost:27017/test")

const Kitten = mongoose.model("Kitten", { name: String })
kittenToSave.save().then((kitten) => res.json(kitten))

// TO BE COMPLETED...
app.listen(3000)

The file completed

const express = require("express")
const bodyParser = require("body-parser")
const mongoose = require("mongoose")

const app = express()

app.use(bodyParser.json())

mongoose.connect("mongodb://localhost:27017/test")

const Kitten = mongoose.model("Kitten", { name: String })

// Create
app.post("/kittens", (req, res) => {
  const kittenToSave = new Kitten(req.body)
  kittenToSave.save().then((kitten) => res.json(kitten))
})

// Read All
app.get("/kittens", async (req, res) => {
  Kitten.find()
    .then((kittens) => res.json(kittens))
    .catch(() => res.status(404).end())
})

// Read one by ID
app.get("/kittens/:id", async (req, res) => {
  Kitten.findById(req.params.id)
    .then((kitten) => res.json(kitten))
    .catch(() => res.status(404).end())
})

// Update one by ID
app.put("/kittens/:id", async (req, res) => {
  Kitten.findByIdAndUpdate(req.params.id, req.body)
    .then((kitten) => res.json(kitten))
    .catch(() => res.status(404).end())
})

// Delete one by ID
app.delete("/kittens/:id", async (req, res) => {
  Kitten.findOneAndDelete(req.params.id)
    .then((kitten) => res.json(kitten))
    .catch(() => res.status(404).end())
})

app.get("*", (req, res) => {
  res.status(404).end()
})

app.listen(3000)

Authentification avec Express et PrismaDB

Sid Ali BENTIFRAOUINE — Fri, 28 Oct 2022 20:35:33 +0000

Ce qu'on va utiliser

Express

C'est une librairie NodeJS qui rend le fait de créer un serveur REST super facile. Très léger, il nous permet de faire les choix que l'on veut, c'est un très bon point de depart pour celles et ceux qui veulent apprendre Node.

Un ORM

Au lieu d'écrire une requete SQL qui casse les couilles, je me contente tout simplement d'ordonner des choses à mon ORM et lui va traduire ce que je peux en une requete SQL qui va bien.

Plus jamais tu écriras ce genre de trucs:

SELECT *
FROM table
WHERE condition
GROUP BY expression
HAVING condition
{ UNION | INTERSECT | EXCEPT }
ORDER BY expression
LIMIT count
OFFSET start

Prisma

En parlant d'ORM justement, Prisma fait partie des plus modernes et plus simples à utiliser. Il propose une définition de schema (la gueule que va avoir mon User, ma Voiture...etc...) intuitive.
Il gére les migrations, qui est le fait de claquer mon schema en base sans écrire moi-meme les requetes SQL qu'il faut.

JSON Web Token

JWT est une facon de gérer l'authentification, c'est un peu la plus utilisée aujourd'hui car graces au devs fronts chiants comme moi, nous avons une séparation entre le Front et le Back (deux repos, serveurs differents) du coup plus question d'uiliser les cookie. En gros on fait passer un Token qui est une sorte de code (une succession de clin d'oeils que reconnaitra mon serveur).
C'est une phrase cryptés que le back saura décrypter et que le client sauvegardera en faisant gaffe à ne jamais la reveler à qui que ce soit, du moins tant qu'elle est valable.

Initialisation du projet

Dans mon terminal:

mkdir levideur # Parce que je vais ce que je veux
cd levideur

On initialise un projet TypeScript (parce que TypeScript c'est bien)

npm init -y
npm install typescript ts-node @types/node --save-dev

Faut ajouter ce fichier aussi tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Maintenant, je peux installer prisma:

npm install prisma --save-dev

On peut intialiser Prisma:

npx prisma init --datasource-provider sqlite

Je prends une BD SQLite car c'est plus rapide à Setup pas besoin d'installer quoi que ce soit mais ca reste du SQL.

Mon premier Schema

Un Schema est une maniere de décrire la gueule d'une donnée.

Dans le fichier prisma/schema.prisma, j'ajoute:

model User {
  id       Int    @id @default(autoincrement())
  email    String @unique
  password String
}

Maintenant que j'ai décris les tables de ma base, je suis pret à claquer ces infos dans ma abse de donnée:

npx prisma migrate dev --name init

C'est good! nous sommes prets à utiliser notre base.

Je crée un fichier main.ts:

// main.ts
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
  const user = await prisma.user.create({
    data: {
      email: 'me@sidali.dev',
      password: '123456'
    },
  })
  console.log(user)
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

Est-ce que tout marche, dans mon terminal:

npx ts-node main.ts

Nickel! 🔥

Le code est ici: Repo du videur

Place au serveur

Dans mon terminal:

npm i express jsonwebtoken cors
npm i -D morgan

cors: permettre des appels en dehors du domaine où est hébérgé le serveur.
morgan: pour les logs

import express from "express"
import morgan from "morgan"
import cors from "cors"
import { PrismaClient } from "@prisma/client"

const PORT = 1234

// Initialisation de Express 4
const app = express()

// Activation de CORS pour les CORS...
app.use(cors())
// Activation de Morgan pour les logs
app.use(morgan("tiny"))
// Activation du raw (json)
app.use(express.json())
// Activation de x-wwww-form-urlencoded

app.use(express.urlencoded({ extended: true }))

// Initialisation du client Prisma
const prisma = new PrismaClient()

// Requete GET /
app.get("/", async (req, res) => {
  const users = await prisma.user.findMany()
  res.send(users)
})

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`)
})

Je lance mon serveur du coup;

npx ts-node main.ts

Je visite (http://localhost:1234/) et c'est good:

Inscription

On va créer la route /signup qui va prendre en dans sa requete l'email et le mot de passe. Si c'est ta premiere API REST, grosso modo une application Mobile ou une appli Web (moderne) va envoyer des requetes vers le serveur et le serverur réponds, ex: j'envois l'email et le mdp, le serveur me répond avec un OK ou KO.

À ne pas oublier! Pour tester les appels vers notre API l'idéal est d'installer [Insomnia]

(https://insomnia.rest/download) ou Postman

//...
app.post("/signup", async (req, res) => {
  // Création d'un user à partir des attributs du Body
  const user = await prisma.user.create({
    data: {
      email: req.body.email,
      password: req.body.password,
    },
  })
  res.send(user)
})

C'est pas ouf car j'ai plusieurs soucis:

J'enregistre le mot de passe sans le crypter
Je ne permets pas au user de se connecter car je ne lui donne pas de JWT

On va rectifier ca, dans mon terminal:

npm i bcrypt

Il ne faut pas oublier de l'importer dans main.ts

// ...
import bcrypt from 'bcrypt'
// ...

app.post("/signup", async (req, res) => {
  // Plus y a de sel plus le mdp sera dur à brute force
  const salt = await bcrypt.genSalt(10)
  // Je gen un mdp crypté
  const crypted_password = await bcrypt.hash(req.body.password, salt)

  const user = await prisma.user.create({
    data: {
      email: req.body.email,
      password: crypted_password,
    },
  })
  res.send(user)
})

Resultat, nickel:

Il ne me manque plus qu'un truc c'est de donner un générer et renvoyer un JWT pour que celle ou celui qui s'est loggé puisse requeter d'autres routes (qui necessitent d'etre loggé) sans soucis.

//...
import jwt from "jsonwebtoken"
// Servira pour coder/decoder le token
const SECRET = "secret"
//...

app.post("/signup", async (req, res) => {
  // Plus y a de sel plus le mdp sera dur à brute force
  const salt = await bcrypt.genSalt(10)
  // Je gen un mdp crypté
  const crypted_password = await bcrypt.hash(req.body.password, salt)

  const { id, email } = await prisma.user.create({
    data: {
      email: req.body.email,
      password: crypted_password,
    },
  })
  // Gérener un token
  const access_token = jwt.sign({ id }, SECRET, { expiresIn: "3 hours" })
  // Envoyer le token avec d'autres infos en bonus
  res.send({ id, email, token: access_token })
})

Connexion

PS : Si vous êtes intéressé par la secu et le time management, go check @boutvalentin et ses articles / formations faits avec ❤️ (et passion) sur tous ses sujets.
PSS : Si vous êtes intéressé par la Cybersécurité, go check @emiliebout et ses articles / formations faits avec passion (et ❤️) sur tous ses sujets.

Comment connecter mon appli Expo (React Native) à mon projet Supabase

Sid Ali BENTIFRAOUINE — Wed, 26 Oct 2022 11:52:33 +0000

Mon premier projet Supabase

Je me rends sur le site de Supabase

Le reste est easy, y'a qu'à créer un compte...etc... avec Github ca va vite en plus.

Une fois le compte créé, je peux créer un nouveau projet grace au bouton "New project" (quelle surprise! 🫢)

Moi je l'ai remplis comme ca vu que j'habite en France, si t'habite en Inde tu peux essayer de prendre une région plus proche sinon.

Une fois que le projet est setup, je peux revenir vers mon application Expo (React Native) pour me connecter à Supabase.

Installation de ce qu'il faut coté Expo (React Native)

Dans mon terminal:

npm i @supabase/supabase-js react-native-url-polyfill @react-native-async-storage/async-storage

Dans mon projet Expo(React Native), je créer un fichier supabase.ts:

// supabase.ts
import "react-native-url-polyfill/auto"
import AsyncStorage from "@react-native-async-storage/async-storage"

import { createClient } from "@supabase/supabase-js"

const supabaseUrl = "MON_URL_SUPABASE"
const supabaseKey = "MA_KEY_SUPABASE"
const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})

export default supabase

Pas de panique, je vais te montrer où se trouvent l'URL et la KEY:

Juste pour etre sur que tout fonctionne, on va se créer une table factice dans la BDD (base de donnée):

J'y ajoute un plat (j'ai faim)

Voyons voir si ton fonctionne, direct dans TabOneScreen.tsx:


export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
  }

  useEffect(() => {
    load_plats()
  }, [])
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h1">Connexion</Text>
      <Button
        accessoryLeft={FacebookIcon}
        onPress={() => alert("Mais qui utilise encore Fessebook!")}
      >
        Me connecter avec Fessebook
      </Button>
    </Layout>
  )
}

Puis lorsque je refresh, j'ai...

Que dalle, eh oui, lorsque j'ai créé ma table, j'ai oublié (quel accident!) un petit truc:

Et normalement c'est good:

Voici le code du composant, rien de fifou:

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  const [dishes, setDishes] = useState<any>([])
  async function load_plats() {
    let { data: plats, error } = await supabase.from("plats").select("*")
    console.log(plats, error)
    setDishes(plats)
  }

  useEffect(() => {
    load_plats()
  }, [])

  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h3">{JSON.stringify(dishes)}</Text>
    </Layout>
  )
}

Expo (React Native) et UI Kitten: Stylé avec plein de chatons 😽

Sid Ali BENTIFRAOUINE — Tue, 25 Oct 2022 10:44:53 +0000

Dans cette partie je vais créer mon app Expo (React Native) et je vais y ajouter la librairie de composants UI Kitten.

Expo (React Native)

Expo te permets de faire des applications React Native sans effort!

Je mesure bien mes mots, car entre les composants déjà a notre disposition offerts par Expo ainsi que les guides pour mettre en place une Map, du Paiement avec Stripe et j'en passe... La vie devient simple et agréable.
Rappellons-nous que l'idée de cette série de tutos est de créer quelque chose de viable sans branlette intellectuelle 🍆

UI Kitten

Une librarie très chatonisée et super stylée. Sauf si tu as un designer ou designeuse qui t'a fait des maquettes quali, tu peux aujourd'hui faire une appli tout à fait stylée grace à cette lib.

Prérequis (les classiques

NodeJS LTS
VS Code
Un terminal (ou l'outils de commande si tu veux)

Intialisation de mon projet

npx create-expo-app MaPetitePrise --template tabs

Ca va nous donner de la navigations et TypeScript, on se mettra bien bien!

Tu peux à présent ouvrir VS Code et lancer:

# Mac a.k.a les riches 💸
npm run ios

# Windows a.k.a les gamers
npm run android

On fera un tour des lieux un peu plus tard.

Je vais mettre en place UI Kitten à present

npm i @ui-kitten/components @eva-design/eva # entrée
npx expo install react-native-svg@9.13.6 # entrée

Pour que ca fonctionne aussi en mode Web, si jamais j'ai l'envie de générer une app web aussi (eh oui c'est possible! 😇)

J'ajoute ceci à mon app.json:

  "expo": {
  ...
    "web": {
    ...
    "build": { "babel": { "include": [ "@ui-kitten/components" ] }
    }
  ...
  }

Une derniere chose et on est bons, dans mon fichier App.tsx j'ajoute un wrapper ApplicationProvider autours de mes composants:

//...
import * as eva from '@eva-design/eva';
import { ApplicationProvider } from '@ui-kitten/components';


export default function App() {
  const isLoadingComplete = useCachedResources();
  const colorScheme = useColorScheme();

  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <ApplicationProvider {...eva} theme={eva.light}>
        <SafeAreaProvider>
          <Navigation colorScheme={colorScheme} />
          <StatusBar />
        </SafeAreaProvider>
      </ApplicationProvider>
    );
  }
}

Je si tout marche bien:

npm run ios

Je prends le composants TabOneScreen pour voir:
Je vais surement avoir des composants en collisions avec ma lib UI Kitten, du coup je supprime toute ligne qui les concerne genre celle là:

import { Text, View } from '../components/Themed';

// TabOneScreen.tsx
import { Text, Button, Layout } from "@ui-kitten/components"

export default function TabOneScreen({
  navigation,
}: RootTabScreenProps<"TabOne">) {
  return (
    <Layout style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text category="h1">HOME</Text>
      <Button onPress={() => alert("Hey!")}>Clique!</Button>
    </Layout>
  )
}

Ca va marcher mais... si j'essaye ca:

//...
const FacebookIcon = (props) => (
  <Icon name='facebook' {...props} />
);

// Dans le composant
//...
  <Button accessoryLeft={FacebookIcon} onPress={() => alert("Hey!")}>Clique!</Button>
//...

Dans mon terminal:

npm i @ui-kitten/eva-icons

Retour dans mon App.tsx

import { StatusBar } from "expo-status-bar"
import { SafeAreaProvider } from "react-native-safe-area-context"
import * as eva from "@eva-design/eva"
// J'importe le IconRegistry
import { ApplicationProvider, IconRegistry } from "@ui-kitten/components"
// J'importe aussi le pack d'icones
import { EvaIconsPack } from "@ui-kitten/eva-icons"

import useCachedResources from "./hooks/useCachedResources"
import useColorScheme from "./hooks/useColorScheme"
import Navigation from "./navigation"

export default function App() {
  const isLoadingComplete = useCachedResources()
  const colorScheme = useColorScheme()

  if (!isLoadingComplete) {
    return null
  } else {
    return (
      <>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider {...eva} theme={eva.light}>
          <SafeAreaProvider>
            <Navigation colorScheme={colorScheme} />
            <StatusBar />
          </SafeAreaProvider>
        </ApplicationProvider>
      </>
    )
  }
}

Normalement on est good

Débuter avec Angular 14: #7 Les composants: comment les pimper

Sid Ali BENTIFRAOUINE — Sun, 09 Oct 2022 16:40:09 +0000

C'est cool de créer des composants mais s'ils affichent tout le temps la meme chose, on est d'accords qu'ils seront ennuyeux à mourir

Les props a.k.a @Input()

C'est un terme qui n'est pas lié à Angular mais qu'on entend plus souvent chez des frameworks comme React, Vue, Svelte (enfin presque tous les frameworks appellent ca comme ca)

En Angular, on les app.

Les props permettent tout commes les parametres d'une fonction, d'injecter des variables qui pouront ensuite etre utilisés pour calculer par exemple (dans le cadre d'une fonction) et plus encore (afficher, dans le cadre d'une composant)

Pour permettre au composant DishCard d'afficher un nom de plat par exemple

// dish-card.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dish-card',
  templateUrl: './dish-card.component.html',
  styleUrls: ['./dish-card.component.css'],
})
export class DishCardComponent implements OnInit {
  @Input() name: string = '';

  constructor() {}

  ngOnInit(): void {}
}

<!-- app.component.html -->
<app-dish-card name="hey"></app-dish-card>

Débuter avec Angular 14: #6 Les composants

Sid Ali BENTIFRAOUINE — Sun, 09 Oct 2022 10:07:40 +0000

L'une des choses les plus importantes quand il s'agit de framework frontend est cette magie de pouvoir utiliser et réutiliser des elements visuels.

Prenons cet exemple

On voit clairement un element qui se repete, on va l'appeler: "DishCard" (anglais de ouf 🇬🇧🫖)

Nous allons en faire un composant et par la suite, nous pourrons afficher une liste de card.

La syntaxe pour créer un composant

La maniere la plus rapide (avec mon terminal)

npx ng generate component DishCard

Idéalement il faudrait essayer de le faire avec le terminal mais pour apprendre, je prefere que tu le faire à la mano.

À la mano

// dish-card.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-dish-card',
    template: '<h1>Dish Card</h1>',
})
export class DishCardComponent {}

En un seul fichier ? oui oui, avec Angular tu as le choix de faire comme bon te semble. Tu peux avoir ton template, style en fichier séparés ou pas, les gouts et les couleurs...

Il ne faut juste par oublier de le declarer dans ton app.module.ts sinon Angular ne l'enregistrera pas dans la liste des composants

// app.module.ts

  declarations: [
    //...
    AppComponent,
    DishCardComponent
  ],

Utilisation

Maintenant tu peux faire ceci dans n'importe quel composant, je prends app.component comme exemple.

Dans le template

<app-dish-card></app-dish-card>

JavaScript: Manipulation des tableaux

Sid Ali BENTIFRAOUINE — Tue, 04 Oct 2022 13:46:53 +0000

Le `filter` (ne fait pas le cafè)

let USERS = [
  { id: 1, name: "Paul" },
  { id: 2, name: "Jean-Karim" },
  { id: 3, name: "Jean-Babibel" },
]

// 1. Supprimer "Jean-Karim"
// id: 2
const id_du_user_a_supprimer = 2
USERS = USERS.filter(u => u.id != id_du_user_a_supprimer)

Le `map` (ce n'est pas une carte)

// 2. Modifier "Jean-Karim"
// id: 2
const id_du_user_a_editer = 2
USERS = USERS.map((u) => {
  if (u.id != id_du_user_a_editer) {
    return u
  } else {
    return {
      ...u,
      name: "Jean-Baptiste",
    }
  }
})

Introduction à React: #2 - Mon premier composant

Sid Ali BENTIFRAOUINE — Tue, 27 Sep 2022 21:38:46 +0000

Avant l'existance des Framework modernes...

Lorsque je voulais repliquer ce type de composant:

<h1>Je suis sensé dire une phrase customisé comme: "Bonjour!"</h1>
```



Je devais reecrire pratiquement la meme chose ailleurs, en gros c'est comme si je codais en un langage sans fonctions ou méthodes:



`````html
<h1>Je suis sensé dire une phrase customisé comme: "Bonsoir!"</h1>
```





`````html
<h1>Je suis sensé dire une phrase customisé comme: "Bon-joir!"</h1>
```



C'est pas ouf...

Les frameworks modernes, dont React proposent une conception qui va résoudre instant' ce probleme.

## Un composant



```jsx
function PhraseCustom() {
  return <h1>Ma phrase test: "Bon-joir!"</h1>
}
```



Je peux l'utiliser comme ceci;



```jsx
function App() {
  return (
    <div>
      <p>Bijour</p>
      <PhraseCustom />
    </div>
  )
}
```



C'est tout con, un composant c'est une fonction. Une fonction que l'on va instancier d'une maniere bizarre certe, mais la declaration est celle d'une fonction et puis elle remplit le meme role qu'une fonction normale: La réutilisation.

## Le JSX, un peu plus que du JS
Comme tu peux t'en douter, cette syntaxe ne fonctionnera pas si tu la mets dans la console de ton navigateur:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uys79km6t7ap2gw3gs81.png)

Le JSX, qui signifie JavaScript XML est une sorte d'écriture inventée par l'équipe qui a fait React chez Facebook à l'époque et qui permet de faire du balisage. 
En gros, la syntaxe(horrible) qui permeterait de faire la meme chose ressemblerait à ceci:

function PhraseCustom() {
  return React.createElement('h1', {}, `Ma phrase test: "Bon-joir!"`)
}

Ce qu'on écrit en XML sera remplacer par un truc qui s'inspire de ce que je viens de montrer.

## Les props, 
Bon c'est cool, je peux réutiliser mon composant, mais si je le réutilise un composant, mais j'ai bien envie d'y mettre des trucs differents en fait, sinon ca n'a pas grand interet.



```jsx
function App() {

  return (
    // Je passe une prop "message" 
    // Dont la valeure est 'Hey hey!'
    <div>
      <PhraseCustom message='Hey hey!' />
    </div>
  )
}
```





```jsx
function PhraseCustom(props) {
  // J'utilise la prop "message"
  // Elle sera contenue dans l'object "props"
  return <h1>Ma phrase test: {props.message}</h1>
}
```



Note que les moustaches `{}` en `JSX` signifie "Interprete moi ca"

La difference de rendu est que:


```jsx
return <p>1+1</p>
```


va litteralement afficher `1+1`
Et que:


```jsx
return <p>{1+1}</p>
```


Va tenter d'interpreter ce qu'il y a entre les moustaches.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rss7jk1mwpeukbby2kyh.png)

Introduction à React: #1 - Initialisation de mon premier projet

Sid Ali BENTIFRAOUINE — Tue, 27 Sep 2022 20:58:55 +0000

Avant propos

Un jour, dans ma jeune vie de developeur, j'avais lu un article d'un gars qui disait "Design for those who don't have time" un truc du genre, bref OSEF.

Le gars expliquait la difference entre le Judo et le Krav Maga

Le Judo contient une philosophie inherente à la mentalité qu'avait Jigoro Kano et puis le coté mojo du samurai et tout... C'est stylé et c'est super respectable, perso c'est la voie que j'aime.

Le Krav Maga à été créé par des juifs qui voulaient se defendre de putains de nazis qui voulait les faire cuire. Les mecs n'avaient pas le temps de philosopher: Il fallait se defendre avant tout.

C'est un aspect que je respecte et que je salue. Nous allons suivre la voie de ceux qui ont inventé le Krav Maga.

Cette voie signifie que je vais aller droit au but. Ici tu vas apprendre à faire du React proprement et vite. La philosophie et la syntaxe de JavaScript et le type de petit dej qu'a eut la personne qui a créé React etc... osef

Premier projet

Il te faut installer

NodeJS LTS
Visual Studio Code (ou Bloc note 🥲)

C'est parti, tu peux ouvrir ton terminal (cmd, gitbash...):

node -v # Entrée
# v16.17.0
npm -v # Entrée
# 8.15.0

Tu vas créer un nouveau projet:

npx create-react-app mon-appli
# J'entre dans le dossier du projet
cd mon-appli
# Je demarre l'appli
npm start

Introduction à React: #0 - Je me justifie rarement, mais pour toi je le fais (c'est beau hein)

Sid Ali BENTIFRAOUINE — Mon, 26 Sep 2022 22:33:57 +0000

Avant de demarer le cours, la question que j'anticipe de ta part est la suivante:
"Sid Ali, comment fais-tu pour etre si fort et si b...", c'était pas ca ?

Ah c'est plutot celle-ci:
"Si tu nous vends Svelte comme framework, pourquoi tu continues à donner cours sur du React etc..."

Alors la raison est assez simple:
Pour le moment, je n'ai aucun mot à dire quand une personne me dit que React permet de faire du Web et du Mobile... Et de maniere très serieuse.

Je le confirme, car se fut mon gagne pain durant des années. Au lieu d'etre le nouveau Zizou j'ai fait mieux (non ?)

React reste le patron car

Des offres d'emploi à la pelle
Possibilité de faire du mobile natif, il n'a plus à faire ses preuves
Communauté gigantesque

Donc pour toi qui veux continuer à manger en attendant que les entreprises fassent comme la mienne (Decathlon), c'est à dire pousser accepter que les gens poussent à l'innovation et à la prise de risque calculés bien évidemment. Je suis un pro: I'm fuckin sertified!

Donc, je continuerai à pousser Svelte, Flutter, toute techno qui merite d'etre explorée doit avoir sa communauté et son moment de gloire, car c'est la concurence qui pousse les techs à faire de plus en plus mieux, et ce pour notre bonheur.

Allé, bise!

DEV Community: Sid Ali BENTIFRAOUINE

💎 🚀🦈 Deployer Rails 7 sur un Droplet Digital Ocean

Création d'un Droplet

Se connecter en SSH au Droplet

Installation des dépendances qu'il faut

Hotwire Cheatsheet

Développer une API Rest avec NodeJS, Express et MongoDB: #5 MongoDB et Mongoose

Introduciton to MongoDB and Mongoose

Architecture of MongoDB

Machine preparation

For visualization

Mongoose

Connect to our database

Mongoose Model

The whole file should look like this

The file completed

Authentification avec Express et PrismaDB

Ce qu'on va utiliser

Express

Un ORM

Prisma

JSON Web Token

Initialisation du projet

Mon premier Schema

Place au serveur

Inscription

Connexion

Comment connecter mon appli Expo (React Native) à mon projet Supabase

Mon premier projet Supabase

Installation de ce qu'il faut coté Expo (React Native)

Expo (React Native) et UI Kitten: Stylé avec plein de chatons 😽

Expo (React Native)

UI Kitten

Prérequis (les classiques

Intialisation de mon projet

Débuter avec Angular 14: #7 Les composants: comment les pimper

Les props a.k.a @Input()

Débuter avec Angular 14: #6 Les composants

La syntaxe pour créer un composant

La maniere la plus rapide (avec mon terminal)

À la mano

Utilisation

JavaScript: Manipulation des tableaux

Le filter (ne fait pas le cafè)

Le map (ce n'est pas une carte)

Introduction à React: #2 - Mon premier composant

Introduction à React: #1 - Initialisation de mon premier projet

Avant propos

Premier projet

Introduction à React: #0 - Je me justifie rarement, mais pour toi je le fais (c'est beau hein)

React reste le patron car

Le `filter` (ne fait pas le cafè)

Le `map` (ce n'est pas une carte)