Aprenda a Desenvolver com React JS

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

[{"selector":"#anim-68f64a26-7c5b-4871-8ae9-0d3b2069a704 [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-bd14d76d-291c-4e2a-a85a-b22c5818d24d","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36d02467-9475-48ee-8012-137742c2c184","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-8d98ee22-4f08-49bd-b249-621773dde887","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-268add5a-32a2-4023-a119-c5fc4ffa1de0","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-44c66c85-3d1d-4c0f-ba0b-fbdba9c297d8 [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-dc480792-597d-4536-8334-532a417870fb [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-0aa1ffaa-0af2-4bf8-8237-7fea46fc2452","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e27fba4b-4ca4-4d35-b2ad-14e093b59b43","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-c9daa115-7729-4262-bdbe-4b2a8202c724 [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-98f4b8ad-fcd7-4eb5-88b1-7d2cdcefc9fc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-eca07427-9410-4ad7-8687-1b03c1941826","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-17201bd4-77eb-4d6e-ad84-437b987d6b62 [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-d8c10d10-78c3-4d37-979e-82af130dca58","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cb970c0e-cea9-450a-ab38-daccfee42ba9","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-5ae5137c-aff3-49db-9c52-b829028ee5a0 [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-b75be154-459c-4750-8fc5-10f1eb06580f","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b6bdcb8-4f02-4336-9248-31ec0f9debfe","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-3cc917ef-311d-4e91-85d3-d36887acdbfc [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-67c38e12-fd0d-4e79-b317-a34242afd7d2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b1685a4c-0a8e-494d-9807-c5fc4af1549b","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!