📚 React = Next.JS ⚛️

Beaucoup de dev apprennent à faire du React et pense que Next.JS est compliqué a appréhendé.

Ils pensent qu'ils l'apprendront plus tard etc...

Je t'explique quand l'apprendre et pourquoi tu dois l'utiliser

#rt ❤️

🧵 #thread #react #nextjs
Au départ tu dois apprendre React. Tu peux utiliser vite vitejs.dev/guide/#scaffol… en créant un projet simple React one page

Une fois que tu as compris les hooks, les components, les states etc... ➡️ Go sur Next.js

Voici le tuto simple nextjs.org/learn/basics/c… Image
Pour ton portfolio, ton premier site web avec de la navigation etc... utilise Next.js
C'est la norme dans beaucoup d'entreprises ->

Et, ça va rendre ton premier site vraiment plus cool
Voici ce que Next.JS vas t'apporter :

* Navigation facile
* Optimisation directement bonne
* Bonne pratique du WEB
* Optimisation SSR, utilise les getStaticProps etc...
* Optimisation des images
* Petite API disponible
* Facilement déployable (vercel.com/dashboard)
Encore d'autres arguments plus complexes...

Maintenant parlons de vercel.com pour deployé

Mon site web melvynx.com est deploy sur Vercel.

Mais j'ai 9 autres projets dessus.

Tu as illimité de site gratuitement et pour 1 de tes sites tu as les stats : Image
Vercel update mon projet quand je commit

De plus, il crée des preview pour chaque branche.

Par ailleurs, il s'occupe d'optimiser les images.

D'optimiser le rendu de ma page par rapport à ta connexion.
Et, surement d'autres trucs mystiques
Donc n'attends pas pour faire ton portfolio sur Next.JS et pas avec Create-React-App

Si tu es team Vue.JS ou Svelte, avec un peu de chance Next sortiras des libraires pour vous aussi.
Je te remercie pour ta lecture,

Je partage 1 thread par jours sur des sujets varié (pour l'instant) donc follow @melvynxdev pour rien manqué

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Melvyn • Développeur

Melvyn • Développeur Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @melvynxdev

Jun 9
React ⚛️ - useRef, la face cachée du hooks 🔒 !

Tu le connais déjà surement 🤔
Tu as l'habitude de l'utiliser pour récupérer la référence d'un élément du DOM en JavaScript 🚀

Mais, en vrai, il a bien plus d'utilité !

#RT ❤️

🧵 #thread #react #js #web Image
Déjà c'est quoi useRef 🤔 ?

C'est une valeur sauvegardée dans un objet, dans ton composant qui persiste lorsque le composant se rerender
Quand elle est update, le composant ne se rerender pas

Son nom vient du fait que la valeur est sauvegardée dans un objet : { current: ... }
Son usage basique est pour récupérer la référence d'un élément HTML primitif, par exemple, une div :

Cet usage permet notamment :
* changer les propriétés d'une div
* récupérer la valeur d'un input
* gérer le canvas Image
Read 12 tweets
Jun 8
Je vois beaucoup de personnes se demande : « c’est quand le moment pour chercher un emploi ? » 🤔
C’est déjà le moment d’en chercher un ✅

Arrêter de remettre à plus tard 😬 !

Passe à l’action aujourd’hui 💪

Après ce Thread tu seras motivé comme jamais 😤

#rt ❤️

🧵#thread Image
Déjà, il faut savoir que la technique c’est bien. Excellent. Mais, c'est 50% du travail de développeur, le mindset c’est l’autre partie !

Tu as bien lu. Pas besoin d’être une machine de guerre en dev si tu as le bon mindset 😶

C’est pour ça que je vais en parler sur ce compte👍 Image
Tu te demandes peut-être : « c’est quand que je suis prêt pour travailler en entreprise ? »
Ma réponse est que si tu te poses cette question, c’est que le bon moment c’est maintenant, sur le champ 🏃 !

Mais, des personnes me diront « j’ai peur », « je n'ai pas confiance en moi »
Read 14 tweets
Jun 7
Rendu conditionnel en React, le piège à éviter ⚠️

Il y a 3 méthodes pour faire du rendu conditionnel :
1. condition && "yes"
2. condition ? "yes" : null
3. if (condition) return "yes"

Je vais t'éviter des bugs avec la méthode 2 💪 !

Je t'explique ⬇️

#rt ❤️

🧵 #react #js #jsx Image
La méthode 2 est en réalité un raccourci pour :

condition ? "yes" : condition

Par conséquent, quand la condition est falsy, c'est le résultat de celle-ci qui sera rendue !
developer.mozilla.org/en-US/docs/Glo…
Voici les valeurs falsy :
- 0 / -0
- ""
- NaN
- null / undefined

Avec 0 et NaN, React affiche ses valeurs !
0 && "yes" → 0

Pour le visualiser, j'ai créé un petit site :
dzdg5y.csb.app

Tu as une surprise avec 0 et la méthode 2
La valeur est affichée !! Image
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(