Aprenda a Programar com React

React JS é uma biblioteca JavaScript popular para criar interfaces de usuário.

[{"selector":"#anim-454b5b5a-ec90-4fbe-a58d-bc5a251a97dc [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-58e96691-75f2-40cc-9888-1efb2e31dd2e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-69b9b0e4-79f1-4a22-98da-f93be0cdb82c","keyframes":{"transform":["translate3d(0px, -177.42935%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Se você está interessado em aprender a desenvolver com React, este guia é para você.

[{"selector":"#anim-9bcb4036-4c54-4041-a732-e3a82ca88bfe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3046cdff-73ef-4500-8ff7-c64f366fbf81","keyframes":{"transform":["translate3d(-115.65495%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-60cb5464-3e95-43c1-a1ea-1633366dfba2 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(0%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

É importante ter conhecimentos básicos de JavaScript e HTML antes de começar a trabalhar com React.

[{"selector":"#anim-1df895fd-1e67-4694-80b8-e25d52de02cd [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-c15611dd-d392-4862-82ff-98c4f3825353","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b2fe2a8c-5e2f-45ef-81e5-f6181bd503ca","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Além disso, é recomendável ter uma compreensão básica de como funcionam os componentes em uma aplicação web.

[{"selector":"#anim-1b7ed5a5-d919-45ac-911a-b0386b2cf4a9 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-8.947368527208333%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-539d08ec-abb5-4b09-ac39-772e93387683","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f6789722-ad71-4654-a7ea-1747bf003f24","keyframes":{"transform":["translate3d(115.97445%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Antes de começar a codificar, é necessário configurar o ambiente de desenvolvimento.

[{"selector":"#anim-9a438e25-9892-4ecf-9e75-a694b6b77623 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-9.871505412776571%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-cd5ebf75-c2c1-4f2c-9fae-5cd929c569ad","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d07074eb-8201-4060-aeab-c63cdfb25aaa","keyframes":{"transform":["translate3d(0px, 174.60313%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Isto inclui instalar o Node.js e o npm no seu computador.

[{"selector":"#anim-2a03e7d7-93f7-44df-bea3-22402db10df0 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-db5a6b5b-9d1f-429a-a632-3e27a9ca95fb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fb3ca390-56d7-4b6e-b0bb-dd8a53d36dcb","keyframes":{"transform":["translate3d(0px, 174.77233%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Estes dois programas são necessários para gerenciar as dependências da sua aplicação React.

[{"selector":"#anim-4806f98a-133d-4b79-9107-6dc3f531ae26 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(2.302631227119076%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-9e39750e-596b-437d-b938-37f7544adfd6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53dd136a-0c89-4be9-96e6-a9234caee080","keyframes":{"transform":["translate3d(-116.29393%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Clique abaixo para ver o artigo completo!