SlideShare uma empresa Scribd logo
Criando aplicações interativas sem
complicações com React JS
Cristiano Santos Gonçalves
Desenvolvedor Front-End
Twitter: @Gonkristiano
Blog: crisgon.github.io
A base de tudo...
JavaScript, frequentemente abreviado como JS, é uma linguagem de programação interpretada de
alto nível, caracterizada também, como dinâmica, fracamente tipada, prototype-based e multi-
paradigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da
World Wide Web
Lugares onde o Javascript pode ser encontrado
Tecnologias mais populares
Antes da solução… vamos ao grande problema.
Poucos dados e pouca interação
Muitos dados, muita interação e pouca exigência
Os smartphones trazem uma nova forma de interação
Muitos dados, muita interação e muuuita exigência
Surge a necessidade de criar aplicações
interativas e escaláveis de maneira simples e
que entreguem uma ótima UX.
O que é React JS?
O React (às vezes denominado React.js ou ReactJS) é uma biblioteca JavaScript de código aberto
para criar interfaces de usuário. É mantido pelo Facebook, Instagram e uma comunidade de
desenvolvedores individuais e outras empresas. . Ela funciona como o V do padrão MVC e é baseada
em componentes.
Quem usa React?
Interesse por React ao longo do tempo
https://trends.google.com.br
Comparação com outros frameworks
Porque usar?
Imperativo Declarativo
Virtual DOM
● Representação virtual do DOM
● Usado para uma renderização mais eficiente do DOM
● Não atualiza o componente no DOM "real", apenas computa o trecho que realmente foi
modificado
O que o usuário vê.
O que escrevemos
O que o navegador vê
Componentes
● Classe ou Função
● Reutilização de código
● Componentes se combinam para criar interfaces
Componentes
Partes independente e
reutilizável, que funciona de
forma isolada.
JSX
● Sintaxe semelhante ao XML.
● Permite colocar HTML em
JavaScript.
Ao vivo
Eventos
Ao vivo
Estudem Javascript,
HTML e CSS!!
Obrigado!!

Mais conteúdo relacionado

Semelhante a Criando aplicações interativas sem complicações com React JS

jQuery: Write less, do more
jQuery: Write less, do morejQuery: Write less, do more
jQuery: Write less, do morehfsantos
 
Web Dev Camp
Web Dev CampWeb Dev Camp
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
Patricia Mallmann
 
Mobile Marketing e o jQuery Mobile
Mobile Marketing e o jQuery MobileMobile Marketing e o jQuery Mobile
Mobile Marketing e o jQuery MobileJefferson Souza
 
Js everywhere
Js everywhereJs everywhere
Js everywhere
Lucas Brigida
 
Proposta comercial
Proposta comercialProposta comercial
Proposta comercial
Jonathan Cabral
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livrePedro Neto
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
Jaydson Gomes
 
Desenvolvimento Web com Java Script Full Stack
Desenvolvimento Web com Java Script Full StackDesenvolvimento Web com Java Script Full Stack
Desenvolvimento Web com Java Script Full Stack
Erick Petrucelli
 
JQuery Mobile
JQuery MobileJQuery Mobile
JQuery Mobile
Flavio Teixeira
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
info_cimol
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)grupouro
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)grupouro
 
Introdução a: Frameworks front end web
Introdução a: Frameworks front end webIntrodução a: Frameworks front end web
Introdução a: Frameworks front end web
Márcio Lucas R Oliveira
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - Minicurso
Cloves Moreira Junior
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
MBA em Marketing Digital e Gestão de Projetos Web
 
Workshop frontend
Workshop   frontendWorkshop   frontend
Workshop frontend
Leandro Mancini
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQuery
Julio Vedovatto
 

Semelhante a Criando aplicações interativas sem complicações com React JS (20)

jQuery: Write less, do more
jQuery: Write less, do morejQuery: Write less, do more
jQuery: Write less, do more
 
Web Dev Camp
Web Dev CampWeb Dev Camp
Web Dev Camp
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Mobile Marketing e o jQuery Mobile
Mobile Marketing e o jQuery MobileMobile Marketing e o jQuery Mobile
Mobile Marketing e o jQuery Mobile
 
Js everywhere
Js everywhereJs everywhere
Js everywhere
 
Proposta comercial
Proposta comercialProposta comercial
Proposta comercial
 
Desenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livreDesenvolvimento Web em ambiente de software livre
Desenvolvimento Web em ambiente de software livre
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Desenvolvimento Web com Java Script Full Stack
Desenvolvimento Web com Java Script Full StackDesenvolvimento Web com Java Script Full Stack
Desenvolvimento Web com Java Script Full Stack
 
JQuery Mobile
JQuery MobileJQuery Mobile
JQuery Mobile
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
 
Asoso tipos de aplicações móveis (1)
Asoso   tipos de aplicações móveis (1)Asoso   tipos de aplicações móveis (1)
Asoso tipos de aplicações móveis (1)
 
Introdução a: Frameworks front end web
Introdução a: Frameworks front end webIntrodução a: Frameworks front end web
Introdução a: Frameworks front end web
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - Minicurso
 
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
Introdução aos Padrões Web e Tecnologias para o Ambiente Digital - Aula 02 - ...
 
Workshop frontend
Workshop   frontendWorkshop   frontend
Workshop frontend
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQuery
 

Criando aplicações interativas sem complicações com React JS