React JS: Desenvolva com o Framework do Facebook

Primeiros passos para Desenvolver com React.

[{"selector":"#anim-a267b916-2b21-4027-b3a0-497a8957e352 [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-8bcdbb7c-0ced-4ab2-8926-03c3bcd40469","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e61e2509-3375-43d4-8a20-8a80d367c4a3","keyframes":{"transform":["translate3d(0px, -162.47563%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d9d4cf94-f9df-48cb-abcd-63e0e4460724","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e4e65463-a27c-4a7b-9b74-28fc342361aa","keyframes":{"transform":["translate3d(115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f690fbd7-23ed-4b98-a666-0b6151bdef6b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1c2b7c49-db2f-443f-99ad-5061e453b4d8","keyframes":{"transform":["translate3d(0px, 130.69926%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Lined Circle É importante ter saber o básico de JavaScript e HTML antes de começar a trabalhar com React. Além disso, é recomendável ter uma compreensão básica de como funcionam os componentes em uma aplicação web.

Configurando o ambiente de desenvolvimento React JS

[{"selector":"#anim-e98dc906-322a-4fa2-a92e-6c10746fc571 [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-c0b30bb2-6bec-462a-9e0a-4cf915922a16","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d99a53df-6213-4822-a3b8-1b3944d4148e","keyframes":{"transform":["translate3d(0px, -147.91327%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fd97fa57-e9ac-4c3e-a53a-ab40ef8f06a0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5f458f56-cd4e-4f39-8668-e36737d2ff72","keyframes":{"transform":["translate3d(0px, 201.27314%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b7e276ee-eb3f-4e7e-9e7e-7c8a433fcb7a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dadb49a3-0af3-4b17-9f46-f0969c38aacc","keyframes":{"transform":["translate3d(-114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map É necessário configurar o ambiente de desenvolvimento. Isto inclui instalar o Node.js e o npm no seu computador.

Criando um novo projeto React JS

[{"selector":"#anim-a6750361-5369-48a2-a5f3-7596703693ca","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-416cc238-a78e-4a49-9d9b-644526a871f2","keyframes":{"transform":["translate3d(0px, -217.07599%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-487824c7-126e-4730-8c91-fd5b9e7edcd8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9f26b87-8c1a-4ac0-a473-805c6ce61098","keyframes":{"transform":["translate3d(0px, 165.01322%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d9d52cf2-85e5-4bd5-9cb9-bcfd39855b88","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f7ab4041-b94c-4f8e-be46-180e2b24b38c","keyframes":{"transform":["translate3d(115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b0d2a63e-df00-4a13-83d0-f8d719bba6d0","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-36c6868d-70bc-444d-aa97-8c0144604764","keyframes":{"transform":["translate3d(-77.3672%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map

Desenvolvendo sua aplicação React JS

[{"selector":"#anim-7a4de849-4a9d-4272-95d2-1ffaa2765f58","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e9b64b6e-fa8b-4dd7-a542-bba12f63bf4e","keyframes":{"transform":["translate3d(-114.8265%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-59136645-cd74-4525-95f0-2b49304234a9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0108012f-a2b7-463d-bcdd-31133ee86237","keyframes":{"transform":["translate3d(114.87342%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7742df1-d224-4ebe-80a2-c16315d204c1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fd417ffe-5412-4a93-89fb-62185dbd85fb","keyframes":{"transform":["translate3d(0px, 244.24956%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d764889b-ecfb-4454-b8d5-400605210e7b [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-e0fa35ec-a7b5-4958-985a-73df61867eab","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6f904a66-cff8-48c4-9ca5-b8ec53202c96","keyframes":{"transform":["translate3d(0px, -121.7575%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map

Onde Estudar o React JS?

[{"selector":"#anim-9013169b-c40f-4437-8ed4-d660b304f200","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-97fcd6f5-15e0-4269-9dd7-8586534447d7","keyframes":{"transform":["translate3d(0px, -196.18407%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-76819c52-f900-46d4-897a-115593c631f1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-45cd6a95-862e-41a3-a63e-febd847fae8c","keyframes":{"transform":["translate3d(-114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-127d5f9b-63e6-4813-90dd-6e4a95b8a612 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(4.6627773795640906%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-d6481fcd-2360-4e20-bde0-a5171985e6ae","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-91aafc4f-5b56-4b7e-aed5-8a899c68708b","keyframes":{"transform":["translate3d(0px, 153.79784%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map

React JS também para mobile.

[{"selector":"#anim-efe24a40-2f21-413f-be83-527d5253610c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a21bb99a-0664-46cb-875c-2a76044a3c23","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b363f008-a957-443f-96d1-1b3db268ded3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3a806a3d-4003-4868-b890-45d9aa277161","keyframes":{"transform":["translate3d(0px, 235.28265%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3d386712-1c17-44ed-98bd-9f934bcbca65 [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-f258bba9-5b40-4a1c-b9db-e70272a7739e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-53b1bfc2-021f-4b7e-b919-e58391f04967","keyframes":{"transform":["translate3d(0px, -187.05809%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map

Mais Stories para Você!

[{"selector":"#anim-b4e2485a-53d0-44e5-8223-88e541491910 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(3.942840724386997%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-8e9c181b-c47f-43d5-a3b9-322cbd484f15","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9419668-77ff-467d-acfd-95861050c39e","keyframes":{"transform":["translate3d(0px, -274.97194%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dbcb9a97-f5b4-492f-9f2d-a8115d131011","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d2facb47-77c8-4b7e-b68b-79e8348a8a9b","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-fa29846d-b4e2-4e10-b20b-0a83e29db93c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1d1a0636-00ab-4d81-a81a-e64624f76690","keyframes":{"transform":["translate3d(104.10095%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-029cd26d-caf4-45cd-9a00-a81e3deb0993","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d7f143fe-474b-4c7d-9abe-48be7a9236bd","keyframes":{"transform":["translate3d(104.10095%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1ba1a5df-fea0-4219-9915-4904a8d04e91","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a676eaae-e357-4315-bd98-7bd264a6881b","keyframes":{"transform":["translate3d(-241.17648%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3a2e943b-7bd7-49c5-b643-67b8f6a81a5e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d54478ca-40c7-49d8-a73a-1e2716aa0350","keyframes":{"transform":["translate3d(-241.17648%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Terrain Map Leia mais

React JS: Desenvolva com o Framework do Facebook

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

Passe para o lado!

Primeiros passos para Desenvolver com React.

Configurando o ambiente de desenvolvimento React JS

Criando um novo projeto React JS

Você pode usar o comando "create-react-app" no terminal. Este comando cria uma estrutura básica de arquivos e pastas.

Desenvolvendo sua aplicação React JS

Para isso, você vai trabalhar principalmente com dois arquivos: o arquivo "index.js" e o arquivo "index.html".

Index.js = Arquivo JavaScript Index.html = Arquivo HTML

Onde Estudar o React JS?

Você pode estudar o framework pesquisando por aplicações no Google ou Youtube. Quando as dúvidas surgirem, pesquise-as no StackOverflow.

React JS também para mobile.

O React possui uma variação que pode ser usado para desenvolver aplicativos para celular ele é o React Native.

Mais Stories para Você!

Confira logo abaixo outros Stories que você pode gostar!

1

Angular JS: O Framework do Google.

2

Flutter: O melhor Framework para Mobile.