Discover and read the best of Twitter Threads about #react

Most recents (24)

🚨 React developers: 🚨

You don’t have to fetch data via useEffect.

Here are 7 compelling alternatives to fetching data via useEffect:

1. react-query
2. swr
3. XState
4. React Router 6.4
5. @remix_run loader
6. @nextjs getServerSideProps/getStaticProps
7. rtk query

And yes, many of these use useEffect behind the scenes. But that’s the point - instead of calling useEffect directly, you should probably use a mature abstraction at this point.

Here’s why.
My decision tree:

Using @remix_run? Fetch in loader.

Using @nextjs? Fetch in getServerSideProps/getStaticProps and via swr on client.

Using React Router 6.4? Fetch in the route’s loader prop.

Using Redux? Fetch via rtk query.

Nothing above applies? Use react-query.
Read 4 tweets
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
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 !…
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 :

Tu as une surprise avec 0 et la méthode 2
La valeur est affichée !! Image
Read 11 tweets
📚 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… 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… 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
Read 8 tweets
💻¿Dónde y cómo subir tu NIVEL de programación?

🚀 Te enseño como y lo mejor de forma GRATUITA

Super Hilo 👇🧵
Primero debes tener en cuenta
¿Qué quieres mejorar y por qué? 💻

Aqui te dejo lo necesario sea cual sea tu respuesta 👇
📌Estas empezando con HTML y CSS y quieres retos básicos de maquetado para practicar?

Frontedmentor es la mejor opción por su variedad de challenges y de distinta dificultad 👨‍💻
Read 14 tweets
We often forget that being a web developer is not only about #html, #css or #javascript! #react or #angular! #python or #php!
Sure these helps you build wonderful looking websites but database and data structure is vital! Security is a must! Scalability is key!
Sure if you claim you are a #Frontend developer, you can easily say that you don’t have to worry about all the ‘backend’ stuff I just mentioned! And here is where I completely disagree! To be successful you have to understand the back end and how it works!
Understanding the database you are building a front page for helps you have a bigger picture of the wealth of data you have! How to present it and how to make it available!

Securing a database is the #dba job! Network system engineer secure the network where your site is!
Read 5 tweets
There was a lot going on in April in terms of meetups all over the world. You can find out more about accessibility, how to learn React Native as a junior, AR apps, using SVG, libraries, debugging and much more!…
React Native Accessibility Basics via
Nivedita shares what she has learned about #accessibility and its implication in the past few months. Why should we even care about accessibility?…
Learning React Native as a Junior Engineer via
Learn how you can master #ReactNative as a beginner. What exactly is it? How does it work for #iOS AND #Android?…
Read 10 tweets
🧑‍💻 Many people reach out to understand #interview process at @Atlassian , sharing it here for easy reference later:

🔁 Please retweet for karma.

#️⃣ #jobhunt #fullstack #backend #frontend #jobs #referrals #springboot #react #sre

The Candidate Resources Hub is a great place to understand what to expect.…
Here is the guidebook specifically for Frontend Applications:
Read 12 tweets
Following attempts to 'move past' the pandemic, healthcare in the UK is compromised - again (even if with lower vaccination rates it could easily be so much worse)…
you don't need to be a zerocovid hawk to think that stopping funding for the genuinely world beating #REACT study at the point when the highest prevalence has been recorded is shortsighted
To be clear it is looking like cases have peaked, so things will hopefully turn around soon. But because more older folks are infected in this - and they've not all gotten boosters yet - the severe consequences remain to be seen and could easily be more serious than for BA.1
Read 4 tweets
Before getting overwhelmed with Javascript, Python, Web3 & so on let me help you understand the various types of job roles on offer in tech industry.

Time for a 🧵

#100Devs #100DaysOfCode #Web3 #javascript #FullStackDeveloper #backend #FrontEnd #Python #React
1. Application Developers

✅ Responsible for converting requirements into working software
💰Highly Paid
👩‍💻 Frontend, Backend, Databse, Full stack developers are specific development roles
2. Software Testing

✅ Responsible for verifying if the developed software satisfies the requirements & has required performance levels
💰 Slightly lower paid than Devs
👩‍💻 Automation & Manual testing are specific roles
Read 10 tweets
Hey you! Don’t use #React useCallback (or useMemo) for all your callback props, thinking it will improve performance, because it won’t. Here's why - 1/n
For every #React `useCallback` call you make, the browser does some work. For a a simple callback, with a fast component, adding the `useCallback` has little or no benefit, and even has a little performance cost. 2/n
@kentcdodds explains this in “When to useMemo and useCallback” - (…) and yet I still run into people saying “We should be wrapping <misc callback> in `useCallback`” arbitrarily, with the mistaken notion it will improve performance. 3/n
Read 11 tweets
Top Amazing #React Project Ideas ⚛️🔥⁠

Thread 🧵
Fully Responsive Modern UI/UX Website

Modern Full Stack Social Media App

Read 11 tweets
The latest results from the #REACT study by @imperialcollege and @IpsosMORI are out, and whilst overall prevalence is lower, there's evidence that in the 55 and over age groups it is on an upward trend, consistent with a recent increase in admissions.

A summary 🧵
Overall prevalence is down from Round 17 (4.4%) to 2.9%, and within the Round (8th Feb to 1st Mar) R is estimated at 0.94, although as noted above for 55+ it is put at 1.04.

Although falling, it's still the 2nd highest ever level recorded by REACT by some margin.

Regionally, most regions clearly fell from Round 17, but in contrast the South West and South East showed small, although not statistically significant increases, and along with London were the highest.

Read 9 tweets
Are you a #JavaScript #developer looking for ways to improve from day to day? You’ve come to the right place! Bury yourself in encryption, testing, closures and many more talks from #JS experts all over the world.…

The Art of Writing Secrets - Encryption for JavaScript Developers via @WomenWhoCode @jischr
Jen Schreiber is a Senior #SoftwareEngineer . In this talk, she introduces you to encryption in JavaScript- all you need to know.…
#JavaScript Tests in #Node, the Browser, and CI via @rob_rich
Watch as Rob live-codes sync tests, async with callbacks, promise-based tests, and async/await tests. He crafts tests in Node, tests in the Browser, and unit tests that run from CI.…
Read 9 tweets
😁 Web3 devs rejoice, you can always look around open source and learn from the best.

Get started with your smart contract development journey with these outstanding coding repos to get you started - both full-stack and backend.

All you need to do, is git clone, and go 🧵👇

The @HardhatHQ javascript solidity starter kit…

The @BrownieEth python solidity vyper starter kit…

The @dapptools raw solidity bash starter kit (foundry in progress)…
@HardhatHQ @BrownieEth @dapptools Backend Continued

The @solana @ProjectSerum anchor rust starter kit…

The @trufflesuite javascript solidity starter kit…

The @wighawag hardhat-deply template:…
Read 6 tweets
#AboutRSS 电报频道上的 “与 RSS 有关的 Coding 向 #教程 分享” 已发布 6 期,同样开个 #Thread

「基于 Liuli 构建纯净的 RSS #公众号 信息流 」…

「Add RSS Feeds to Your Website to Keep Your Core Readers Engaged」

「给 #hexo #博客 新增 RSS 功能支持」
Read 51 tweets
#React was indeed in the spotlight last month, so we spared your time and collected the champions of #meetup videos in January. Which one is your favorite? 🥳…

#programming #devtools #application
🔥1st: #Debugging a Non Reproducible Crash by @almouro

Hear the story of an epic struggle to vanquish a non reproducible #bug and learn what to do (and what not).

😎2nd: #React Performance with React Dev Tools by @yanaiEdri
All of us are familiar with the react #devtool - how to select a component and observe the state and the props - but this tool also has the profiler tab.…
Read 7 tweets
The latest #REACT study (Round 17) confirms the rapid growth seen in other studies, tripling between R16 and 17 to 4.4%, the highest seen to date, with Omicron being 98% of samples.

Within R17, there's a clear sign of a fall though, with R put at 0.95, but varying by age.

1/ Image
That age variation can be seen here, with U17s still increasing through the round, whereas adults are showing clear declines.

2/ Image
Here's the history of these surveys, showing how R17 (5/1 to 20/1) is also around 3 times the rate at the peak of Alpha a year ago (R8). You can see the sample sizes too here if you're interested.

3/ Image
Read 12 tweets
(1) Sigo trabajando con el clon de Gamezonia (desarrollado inicialmente en #angular para #react y hoy me he metido con el carrito de compra.
He cambiado la perspectiva de cómo lo hice antes y ahora en vez de un menú lateral, tengo un componente a página👇
(2) completa y hago en principio la gestión sin comerme mucho la cabeza. Guardo todo en un localStorage y gestiono con varias acciones dentro de un custom hook (useCart) y bueno, por el momento guay, mejorable pero seguimos avanzando.
Esto lo meteré en la librería👇
(3) "react-shop-ui" que estoy desarrollando y que todavía no quiero compartirlo oficialmente, ya que quiero documentarlo todo bien. Esta librería es el clon de ng-shop-ui:… que use para agilizar el proceso en el curso de MEAN+GraphQL y así enseñar👇
Read 8 tweets
No ha sido una semana fácil. Es cierto que estoy en varios procesos de selección, pero también es cierto que en general las pruebas técnicas ya sea por tiempo, dificultad o ambas, no estoy siendo capaz de hacerlas (en líneas generales) 😅😅 Esto requiere varias cosas: humildad...
... para reconocer que he olvidado bastante #React ⚛️ tras estar un tiempo sin tocarlo, pero también trabajo 💪

⭐ Me estoy fundiendo el canal de Youtube de @midudev para recuperar nivel y aprender aún más.

⭐ Me estoy leyendo un libro de patrones de diseño de React.
⭐ Estoy trabajando (por ahora en la parte back (con Express🌿), ya que la parte front nos está haciendo una amiga diseñadora los diseños) en Mariner Valley, un proyecto #MERN de visualización de datos de tus criptomonedas favoritas. Por practicar y mejorar. #programacion
Read 4 tweets
¿Quieres saber cómo está el mercado de talento #tech en Latinoamérica? (incluyendo salarios)

@getonbrd lanzó su reporte anual con datos de:

23,000+ trabajos
900,000+ aplicaciones
250,000+ professionales

❤️ RT

🥷🏽 ¿Cuáles son los skills más solicitados por las empresas?

En programación en general:

💛 #JavaScript de primero (obvio Boby)

2️⃣ #CSS, #Git y #React peleándose el segundo lugar

🇺🇸 "English" en un sólido tercer lugar. Image
👩🏽‍🎨 En Diseño / #UX

El primer lugar es una pelea a cuchillo entre @figmadesign y @Adobe

Seguido de #UIDesign, #wireframes y @sketch

Y por supuesto Inglés. Image
Read 13 tweets
🌅 Buenos días 🌅

🌟 Aprender #frontend. El path más perfecto jamás creado (es broma ¿o no?)

1. #HTML y #CSS
2. Proyecto
3. Proyecto
4. Proyecto
5. #JavaScript y proyecto
6. Proyecto
7. #React y proyecto
8. Y más proyec...

Te dejo 4 sitios donde encontrar proyectos (THREAD)
Resuelve los desafíos de #HTML, #CSS y #JavaScript del mundo real mientras trabajas con #diseñosui profesionales.
Mejora tus conocimientos de #HTML y #CSS practicando con plantillas de diseño reales. Y ofrecen un canal de Slack para preguntas y dudas.
Read 6 tweets
#React and #ReactNative videos were definitely in the flow in 2021 and are expected to dominate 2022 as well! Better catch up on the top 10 #meetupvideos from last year so you won’t be falling behind. 😎…

#programming #developing #programmer #developer
Expert guide to React Navigation by @callstackio
Satya Sahoo and Mateusz Kosoń, #softwareengineers at Callstack, are talking about the #React Navigation library. During the conversation, they cover a wide range of topics related to it.…
Improving apps with Custom Hooks and React-Query by @_zachdtaylor
Zach Taylor will be going over two things that can greatly help you improve the quality of your React code: custom hooks and react-query.

#reactquery #customhooks #programming #react…
Read 12 tweets

JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS.
It extends the ES6 so that HTML like text can co-exist with JavaScript react code. It is not necessary to use JSX, but it is recommended to use in ReactJS.

ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects.
Read 8 tweets

Related hashtags

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.00/month or $30.00/year) and get exclusive features!

Become Premium

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

Donate via Paypal Become our Patreon

Thank you for your support!