Discover and read the best of Twitter Threads about #reactjs

Most recents (24)

Para crear una librería de components en #reactjs siempre te recomiendan:

1. Empezar de cero 🤢
2. Usar una librería y cambiar los estilos 😢

Hay una tercera y MEJOR opción:

✨ Componentes primitivos ✨

❤️ ¿Me ayudas con un RT?

🧵 HILO
Los components primitivos son accesibles y sin estilo para construir #DesignSystems y #webapps de alta calidad.

Proporcionan todas las bases necesarias para que desarrolles tus propios components con el diseño que quieras rápidamente.

Empieza lista...
Reach UI busca convertirse en la base accesible de tu #DesignSystem basado en React.

reach.tech
Read 8 tweets
the React Summit MEGATHREAD

For people who missed what happened in the #ReactJS world last week, from a #reactnative developer perspective
Welcome aboard, grab your badge
Read 16 tweets
useState hook in React JS

#reactJS #100DaysOfCode Introduction to react hooks. React useState Hook
In this series, you will understand what React hooks are and how to write them for your React applications.

What are hooks in react ?
A Hook is a special function that lets you “hook into ⚓” React features.
As for state management, we have useState hook and for side effects we have useEffect.

But why hooks ?

React functional components are plain JS functions. It is not possible to persist state in local variables as these are initialized every time the function is evaluated.
Read 11 tweets
Let's talk about creating our own Custom Hook in React!🪝🪝

#100DaysOfCode #html #ReactJS
Hooks were introduced in React 16. Hooks allow us to manipulate state in Functional components. "useState()", "useEffect()", "useMemo()" are some of the hooks in React.
But above this React allows us to create our own custom hook. You can create your own hook and use it across your application.
Read 4 tweets
Cursos gratis y cortos de los programadores más cracks que yo conozco:

- #JavaScript (de todo) y Flexbox de @wesbos
- #CSS grids de @jensimmons
- #ReactJS y NextJS de @leeerob

❤️ RT comparte el amor!

🧵 HILO Image
El #javascript30 de @wesbos es un clásico javascript30.com son 30 videos de vainilla #JavaScript code challenges. Aprendes de todo, #arrays, #canva, sonido, etc.
También de @wesbos tenemos cssgrid.io para aprender #cssgrids en 25 videos y flexbox.io para aprender #flexbox en 20 videos.
Read 7 tweets
Planning to learn React.js ?🔥

Here is a mega thread containing Resources, Road maps, Important concepts and more for React.

#100daysofcodechallenge #ReactJS #HTML Image
What is React ?

React is a JavaScript library by Facebook for creating interactive Front end applications.
React is the most popular Front end framework and is used by large companies like Facebook, Instagram, Netflix, Airbnb and Uber.
Prerequisites

- HTML
- CSS and at least one CSS framework.
- JavaScript
- ES6 features
- Map / Filter / Reduce in JS
- Arrow functions
- Imports / Exports
- var / let / const
- npm commands
Read 14 tweets
[THREAD] 7 RÉALITÉS du métier de développeur ! 🖥

Attention ! Je vais te livrer beaucoup de valeurs d'un coup.

Ce que toi en tant que débutant tu ignores ou imagines à tord sur cette activité !

#web3 #developer

Voilà ce que j'ai appris :

1/11
// 1 - On apprend que par la pratique ET au besoin ponctuel. //

J'ai appris #reactjs parce que je devais l'utiliser pour un projet.

J'avais besoin d'une interface.

La leçon c'est qu'il faut juste savoir à peu près en avance quoi sert à quoi.

2/11
Pour ça je te conseille de faire de la veille technologique quotidienne.

J'utilise une chouette extension pour me tenir informé de ce qui peut exister pour tel ou tel besoin: daily.dev

3/11
Read 11 tweets
I applied to more than 300 jobs before I landed my first junior software engineer role.

Here are 7 tips to get your first job as a software engineer.
1/ We can tell if you only spent an hour on your resume.

Whether you apply online or via a referral, your resume is the first thing you'll be asked for.

Compare your resume against the job you want. Do they match?

If not @austinbelcak has a free tool: cultivatedculture.com/resume-scanner/
2/ Find the 3rd door.

The 'software engineering club' has big bouncers that love to keep junior engineers from getting in.

Find a unique way to get in front the hiring manager.

Volunteer at #ReactJS conferences. Help the sponsors & meet the hiring manager.
Read 9 tweets
O que você precisa saber de #JavaScript para aprender #ReactJS de forma feliz

Thread 🧵
➡️ Base do #JavaScript

↩️O que é JavaScript?
↩️Atribuição de valores
↩️Diferença entre: var, let e const
↩️Operadores: +, -, /, *, % e **
↩️Incremento: ++x e x++
↩️Decremento: --x e x--
↩️Comparadores: ===, !==, <, >, >= e <=
↩️Condicionais: if, else e switch-case
↩️Console.log
↩️import/export

↩️Loops
⬇️
↪️While
↪️For
↪️For...in
↪️For...of
↪️Controles de fluxo: break, continue, return
Read 12 tweets
The development of our #web3 #eLearning app has been going on for a day.

Progress so far: we decided on the stack.

We are running with #rubyonrails version 7.

And some other nifty things:
👇
We already said we'll use @_rareblocks . But even if not, we would use @tailwindcss . Advantages:

- It's very easy to make stuff that looks good.
- Just add CSS classes to divs. and there you go (at least that's what the #frontenddeveloper told me ;))
- just in time compilation
This frontend framework is truly simple and easy to learn: #stimulusjs.

We try to go with it and try not to add #ReactJS - but given the abundance of #web3 packages we might add react later.
Read 7 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

👇🏽 HILO
🥷🏽 ¿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
(1) Hoy empiezo una nueva serie de videos, para aprender todo lo necesario y trabajar en cualquier ámbito relacionado con el lenguaje de #python en su versión 3.
Si todavía no me sigues y te interesa saber + de ello, sígueme aquí y en Youtube.
Empiezo hilo🧵🧵🧵🧵👇👇👇👇
(2) Semanalmente 4-7 videos para aprender paso a paso, desde 0 completamente todo desde la teoría con la combinación de la práctica, ya que considero que los dos puntos son FUNDAMENTALES.

Aplicarás buenas prácticas, siguiendo el manual de PEP8 (python.org/dev/peps/pep-0…)
(3) Todo el contenido irá con apoyo de diapositivas, que iré publicando a medida que empecemos nuevas secciones.
Read 26 tweets
Under-the-hood working of the streaming SSR server with the new React 14's suspense.

A thread. 🧵👇

#reactjs #webperf #perfmatters
1/10, at 0ms.
The browser sends an HTTP GET request to the server and the request reaches the handler responsible for SSR and that invokes `react-dom/server`'s `renderToPipeableStream`.
2/10, at 50ms.
The react-dom/server then preps the app for rendering and does an initial rendering of the component tree.

At this point, react-dom/server would have identified the list of suspenses in the tree.
Read 12 tweets
🧙‍♂️ Quer se tornar mestre em Javascript? Então se liga nesses 4 repositórios incríveis com muito conteúdo que vai te ajudar demais!
Awesome Javascript projects: github.com/Vishal-raj-1/A… Image
2️⃣ Airbnb Javascript Style guide: github.com/airbnb/javascr… Image
Read 7 tweets
ReactUI is our new rendering engine for AG Grid.

- 100% React.
- No wasted renders.
- Use normal React coding styles.
- Use React Dev Tools to debug and profile your implementation.

And...

#ReactJS #React
Customising AG Grid with React has never been easier.

Write React Components to use as:

- Cell Renderers
- Cell Editors
- Custom Headers
- Tool Panels
- Status Panels
- Loading Overlays
- Tool Tips

And...
In enterprise environments different teams will use different frameworks.

If one team has coded Cell Editors or Cell Renderers in JavaScript then you can still use them with the React UI.

The React UI uses the same Grid API as our Vue, JavaScript and Angular renderers.

And...
Read 6 tweets
Você tem uma mina de ouro em suas mãos, ou melhor no seu computador!

8 repositórios no GitHub para você se tornar um mestre Jedi em Javascript. 🧵👇
1️⃣ What the F*uck Javascript: github.com/denysdovhan/wt… Image
2️⃣ JS the right way: github.com/braziljs/js-th… Image
Read 10 tweets
💡🧵 Props drilling❓
In react when you have a tree of a components and want to pass the data to the last component, you have to pass props through every component in tree and re-render all components on change. this is problem called as props drilling.

#reactjs #100DaysOfCode
this problem is like having a box within a box within a box. when you want to change things in the inner most box you have to open all the outer boxes to reach there every time. that's the case of props drilling, that you have to pass the props and re-render components.
To avoid this problem there's a solution. 🥁
Define the data globaly and then access it within the components you want and re-render the only components consuming data.
how to do that?
1. createContext
2. Provide context
3. Consume context
Read 7 tweets
Se você está sem ideia de como fazer a construção do seu site, se liga nesse post com 11 sites de templates incríveis de HTML pra te ajudar nessa missão. 🧵👇
Read 13 tweets
The best YouTube channel to learn React Js 🔥
Thread 🧵

#DEVCommunity #reactjs #javascript #coding #programming #webdevelopment
Read 7 tweets
Você passa horas procurando ícones diferentes?

Então dá uma olhada nessa lista com 6 sites pra encontrar ícones de vários tipos para dar um up nos seus próximos projetos e economizar tempo.🧵👇
1️⃣ Icons 8: icons8.com
2️⃣ Icon - Icons: icon-icons.com
Read 8 tweets
2/100 days of learning React.
export default vs named components in react.
In react view is built with components. components are exported before importing them.
Two way we export them either as default or named.
know more 👇🧵

#reactjs #javascript #100DaysOfCode
1. default
default is used when we export single component and considered default and while importing its name doesn't matter.

Compo = () => { return <p>hello, world</p> }
export default Compo

Import with other name won't mind.
import X from './Compo'
2. Named
we export named when we hav multiple.
& they require d same name while importing within {}.

export Comp1 = () => { return <p>Hello</p> }
export Comp2 = () => { return <p>World</p> }

Importing...
import {Comp1,Comp2} from './Compo'

while rendering wrap them with div.
Read 4 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!