O documento resume as etapas para desenvolver um jogo da velha (tic tac toe) usando ReactJS. As principais etapas incluem: 1) Criar as classes Square, Board e Game para representar os componentes do jogo; 2) Adicionar dinâmica ao jogo armazenando o estado dos botões clicados usando this.state; 3) Melhorar o controle do jogo armazenando o estado geral no componente Board.
React is a JavaScript library for building user interfaces that allows developers to create reusable UI components. It uses a virtual DOM for efficient re-rendering when data changes, and can render components on both the client-side and server-side. Key aspects of React include JSX syntax that resembles HTML, the component model for building encapsulated components, and tools like NPM, Webpack and Babel that help support React projects.
React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces. The key principles of React include breaking UI into components, unidirectional data flow, identifying UI state, and dispatching actions to change state. React uses JSX syntax which resembles HTML but integrates JavaScript. Components can be "smart" or "dumb", with smart components providing data and dumb components displaying it. Redux is often used with React to manage state in a centralized store using actions and reducers. Debugging tools like React Developer Tools and Redux DevTools help develop React applications.
This document provides an introduction to Redux, including what it is, its core principles and building blocks. Redux is a predictable state container for JavaScript apps that can be used with frameworks like React, Angular and Vue. It follows the Flux architecture pattern and is based on three principles - state is immutable, state can only be changed through actions, and changes are made with pure functions called reducers. The main building blocks are actions, reducers and the store.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
This document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or function based. Props and state allow passing data to components and re-rendering components on state changes.
React is a JavaScript library for building user interfaces that allows developers to create reusable UI components. It uses a virtual DOM for efficient re-rendering when data changes, and can render components on both the client-side and server-side. Key aspects of React include JSX syntax that resembles HTML, the component model for building encapsulated components, and tools like NPM, Webpack and Babel that help support React projects.
React is a JavaScript library for building user interfaces. It uses a component-based approach where UI is broken into independent, reusable pieces. The key principles of React include breaking UI into components, unidirectional data flow, identifying UI state, and dispatching actions to change state. React uses JSX syntax which resembles HTML but integrates JavaScript. Components can be "smart" or "dumb", with smart components providing data and dumb components displaying it. Redux is often used with React to manage state in a centralized store using actions and reducers. Debugging tools like React Developer Tools and Redux DevTools help develop React applications.
This document provides an introduction to Redux, including what it is, its core principles and building blocks. Redux is a predictable state container for JavaScript apps that can be used with frameworks like React, Angular and Vue. It follows the Flux architecture pattern and is based on three principles - state is immutable, state can only be changed through actions, and changes are made with pure functions called reducers. The main building blocks are actions, reducers and the store.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
This document provides an introduction to React.js, including:
- React.js uses a virtual DOM for improved performance over directly manipulating the real DOM. Components are used to build up the UI and can contain state that updates the view on change.
- The Flux architecture is described using React with unidirectional data flow from Actions to Stores to Views via a Dispatcher. This ensures state changes in a predictable way.
- Setting up React with tools like Browserify/Webpack for module bundling is discussed, along with additional topics like PropTypes, mixins, server-side rendering and React Native.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or function based. Props and state allow passing data to components and re-rendering components on state changes.
This document provides an introduction to React for developers. It explains that React is a JavaScript library for building user interfaces developed by Facebook. It then covers key React concepts like components, props, state, rendering, and the virtual DOM. It also discusses tools and patterns for architecting React apps like Flux, Redux, routing, internationalization, and async logic. Finally, it recommends designing state carefully, using standards like Flux Standard Action, avoiding side effects in reducers, and leveraging tools like React DevTools.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
An Introduction to ReactJS, A JS Library for building user interfaces developed by Facebook Team, also this presentation introduce what is the ReduxJS Library and how we can use it with ReactJS.
This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.
React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.
The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.
React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.
This document provides an introduction to React.js, including:
- React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture.
- Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React.
- Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
State is managed within the component in which variables declared in function body. State can be changed. State can be accessed using “useState” Hook in functional components and “this.state” in class components. Hook is a new feature in react. To use this expression it’s essential to have good understanding of class components. State hold information that used for UI by browser.
https://www.ducatindia.com/javatraining/
- REST (Representational State Transfer) uses HTTP requests to transfer representations of resources between clients and servers. The format of the representation is determined by the content-type header and the interaction with the resource is determined by the HTTP verb used.
- The four main HTTP verbs are GET, PUT, DELETE, and POST. GET retrieves a representation of the resource and is safe, while PUT, DELETE, and POST can modify the resource's state in atomic operations.
- Resources are abstract concepts acted upon by HTTP requests, while representations are the actual data transmitted in responses. The representation may or may not accurately reflect the resource's current state.
Luiz Paulo tem 20 anos de experiência em desenvolvimento web. Ele é desenvolvedor e líder de equipe na Contabilone Tecnologia, com graduação em TI e pós-graduação em engenharia de software. O documento discute o que é React, por que foi desenvolvido e conceitos-chave como arquitetura, Virtual DOM, componentização e controle de estado.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Este documento fornece uma introdução completa sobre React JS, incluindo: (1) O que é React JS e suas principais características e vantagens; (2) Como começar a desenvolver projetos usando React, incluindo a instalação e criação de um primeiro projeto; (3) Uma explicação sobre React Native e como pode ser usado para desenvolver aplicativos móveis.
O documento descreve como criar interfaces gráficas básicas com Android usando o Eclipse. Ele introduz os conceitos de View e ViewGroup e discute vários gerenciadores de layout como LinearLayout, AbsoluteLayout, TableLayout e RelativeLayout. Exemplos de código XML são fornecidos para ilustrar cada gerenciador de layout.
This document provides an introduction to React for developers. It explains that React is a JavaScript library for building user interfaces developed by Facebook. It then covers key React concepts like components, props, state, rendering, and the virtual DOM. It also discusses tools and patterns for architecting React apps like Flux, Redux, routing, internationalization, and async logic. Finally, it recommends designing state carefully, using standards like Flux Standard Action, avoiding side effects in reducers, and leveraging tools like React DevTools.
ReactJS is arguably the most popular Javascript framework around for web development today. With more and more teams exploring and adopting React, here is TechTalks presentation elaborating fundamentals of React, in a code along session
An Introduction to ReactJS, A JS Library for building user interfaces developed by Facebook Team, also this presentation introduce what is the ReduxJS Library and how we can use it with ReactJS.
This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.
React is a library for building user interfaces using components. It uses a virtual DOM for rendering components, which are pieces of UI defined as classes or functions. Components receive data via props and local state, and can be nested to build complex UIs. The component lifecycle includes mounting, updating, and unmounting phases. Data flows unidirectionally down the component tree. React has a vibrant ecosystem and community for continued learning.
The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
React JS is a JavaScript library for building user interfaces. It uses virtual DOM and one-way data binding to render components efficiently. Everything in React is a component - they accept custom inputs called props and control the output display through rendering. Components can manage private state and update due to props or state changes. The lifecycle of a React component involves initialization, updating due to state/prop changes, and unmounting from the DOM. React promotes unidirectional data flow and single source of truth to make views more predictable and easier to debug.
React is a JavaScript library created by Facebook and Instagram to build user interfaces. It allows developers to create fast user interfaces easily through components. React uses a virtual DOM to update the real DOM efficiently. Some major companies that use React include Facebook, Yahoo!, Airbnb, and Instagram. React is not a complete framework but rather just handles the view layer. It uses a one-way data binding model and components to build user interfaces.
This document provides an introduction to React.js, including:
- React is a JavaScript library for building user interfaces and was developed by Facebook. It is the VIEW component in MVC architecture.
- Key features and benefits of React include being fast, modular, scalable, flexible, and popular due to its employability. Large companies like Facebook use React.
- Core concepts of React include JSX, components, unidirectional data flow, and the virtual DOM which improves performance compared to traditional frameworks. Components are reusable pieces that make up the entire application.
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
State is managed within the component in which variables declared in function body. State can be changed. State can be accessed using “useState” Hook in functional components and “this.state” in class components. Hook is a new feature in react. To use this expression it’s essential to have good understanding of class components. State hold information that used for UI by browser.
https://www.ducatindia.com/javatraining/
- REST (Representational State Transfer) uses HTTP requests to transfer representations of resources between clients and servers. The format of the representation is determined by the content-type header and the interaction with the resource is determined by the HTTP verb used.
- The four main HTTP verbs are GET, PUT, DELETE, and POST. GET retrieves a representation of the resource and is safe, while PUT, DELETE, and POST can modify the resource's state in atomic operations.
- Resources are abstract concepts acted upon by HTTP requests, while representations are the actual data transmitted in responses. The representation may or may not accurately reflect the resource's current state.
Luiz Paulo tem 20 anos de experiência em desenvolvimento web. Ele é desenvolvedor e líder de equipe na Contabilone Tecnologia, com graduação em TI e pós-graduação em engenharia de software. O documento discute o que é React, por que foi desenvolvido e conceitos-chave como arquitetura, Virtual DOM, componentização e controle de estado.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Este documento fornece uma introdução completa sobre React JS, incluindo: (1) O que é React JS e suas principais características e vantagens; (2) Como começar a desenvolver projetos usando React, incluindo a instalação e criação de um primeiro projeto; (3) Uma explicação sobre React Native e como pode ser usado para desenvolver aplicativos móveis.
O documento descreve como criar interfaces gráficas básicas com Android usando o Eclipse. Ele introduz os conceitos de View e ViewGroup e discute vários gerenciadores de layout como LinearLayout, AbsoluteLayout, TableLayout e RelativeLayout. Exemplos de código XML são fornecidos para ilustrar cada gerenciador de layout.
Introdução a técnicas de compartilhamento de estado entre componentes React utilizando a arquitetura flux, além de comparativo entre as implementações bom as libs Redux, Mobx e sem usar libs.
1. O documento apresenta um resumo sobre JavaScript, incluindo sua definição, frameworks e bibliotecas, instalação no VSCode e introdução a elementos, eventos e métodos como getElementById, getElementByTagName e querySelector.
2. É apresentado o conceito de DOM e como manipular elementos da página através de JavaScript.
3. Há explicações e exemplos sobre como criar, inserir e alterar elementos utilizando métodos como createElement, insertBefore e appendChild.
O documento fornece uma introdução ao framework React, discutindo seus principais conceitos e vantagens, como: (1) facilitar a criação de componentes reutilizáveis; (2) uso do Virtual DOM para renderização eficiente; (3) suporte a testes automatizados. O documento também explica conceitos-chave como JSX, props e CSS in JS.
Este documento apresenta uma introdução à programação para a plataforma Android. Explica conceitos de Java como packages e APIs, e detalha o desenvolvimento de aplicações Android no Eclipse, incluindo a estrutura de projetos e o ciclo de vida de atividades. Apresenta também exemplos como uma calculadora de fracções e um aplicativo para enviar SMS.
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
Apache Wicket é um framework web Java open source orientado a componentes que permite o desenvolvimento de aplicações web utilizando apenas Java e HTML, sem a necessidade de XML. O framework possui conceitos como Application, Session, RequestCycle, Components, Behaviors e Models que facilitam a construção de interfaces ricas e interativas de forma declarativa e reutilizável.
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
O documento apresenta informações sobre:
1) A estrutura e componentes principais de um navegador da web, incluindo a interface do usuário, engine do navegador, engine de renderização e componentes de rede.
2) O fluxo de renderização de páginas web, incluindo a construção da DOM a partir do HTML, CSSOM a partir do CSS e árvore de renderização.
3) Técnicas para otimizar o critical rendering path como priorizar recursos, async/defer scripts e code splitting.
Desenvolvimento de Apps e Games para Android - Parte 5Erisvaldo Junior
O documento discute vários tópicos sobre desenvolvimento para Android, incluindo:
1) Armazenamento de logs e internacionalização de aplicativos
2) Diferentes opções para armazenamento de dados em dispositivos Android
3) Uso de Intents para navegação entre activities e acesso a outros aplicativos
O documento resume o que é a biblioteca JavaScript React, como surgiu no Facebook para construir interfaces de usuário, e seu amplo uso por empresas como Netflix, IMBM, Airbnb e outras. Apresenta os principais conceitos como JSX, fluxo de dados unidirecional e Virtual DOM.
Android Core Aula 6 - Desenvolvimento de aplicações AndroidFelipe Silveira
Este documento resume os principais conceitos para desenvolvimento de aplicações Android, incluindo:
1) Android SDK, layouts XML, atividades e ciclo de vida, content providers, emulador;
2) Desenvolvimento de uma aplicação de anotações rápidas chamada Quick Notes utilizando estas ferramentas.
3) Integração da aplicação com banco de dados SQLite através de um content provider próprio.
Programação Web com Zend Framework e Ajax com Dojofabioginzel
O documento resume conceitos básicos da programação web, incluindo:
1) A mudança da Web 1.0 estática para a Web 2.0 dinâmica e participativa;
2) Tecnologias como JavaScript, Ajax e CSS que permitem a interatividade;
3) Ferramentas como Firebug e Zend Studio para desenvolvimento web.
O documento descreve como codificar um servlet em Java usando as classes HttpServlet e HttpServletRequest/Response. Explica que um servlet deve estender HttpServlet e implementar os métodos doGet() ou doPost() dependendo do tipo de requisição. Também mostra como criar um servlet simples que retorna a data atual e mapeá-lo em um arquivo web.xml.
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
O documento discute arquitetura de front-end em aplicações de larga escala. É destacado que tais aplicações requerem organização, modularização e otimização de código. O HTML, CSS e JavaScript devem ser estruturados em módulos independentes para facilitar a manutenção.
Este documento apresenta as principais novidades do PHP e do framework Zend Framework 2, incluindo namespaces, traits, servidor embutido, PSRs, Composer, funções anônimas, módulos, eventos, injeção de dependências e arquitetura MVC."
2. Parte 1
Por dentro do React - Uma breve introdução sobre
esse excelente framework
3. ReactJS é uma biblioteca Javascript que foi
criada pelo time do Facebook com o objetivo
de facilitar a criação e o desenvolvimento de
componentes para interfaces web;
4. Simples: ReactJS é simples e ele
automaticamente administra todas as
atualizações da sua interface, atualizando-a
quando seus dados mudam;
Baseado
em componentes: desenvolvimento baseado
em componentes, que facilitam a construção
de UIs (User Interfaces)
Multiplataforma: Uma vez escrito o seu
código você poderá rodá-lo em plataformas
mobile (React-Native) ou mesmo em um
servidor NodeJS.
8. Entendo o React - Função
Render
O método render é um dos métodos mais importantes do
React e que será responsável por renderizar os elementos.
Ele recebe 3 parâmetros, que são:
1. O elemento a ser criado. Veja o <h1> Hello, World!</
h1>
2. O local onde será inserido o DOM e uma função de
callback (retorno), que será chamada logo após a
renderização.
9. Entendo o React - JSX
O JSX (JavaScript XML) é um poderoso, porém as vezes
controverso recurso do React. Com ele, podemos misturar
tags HTML com código JavaScript
ReactDOM.render(
React.createElement('h1', null, "Hello World!"),
document.getElementById(“root")
);
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById(“root")
);
Agora veja o mesmo exemplo sem JSX
10. Entendo o React -
React.createClass
ReactClass creatClass(object specification)
var Hello = React.createClass({
render: function() {
return (
<h1>Hello World!</h1>
);
}
});
ReactDOM.render(
<Hello />,
document.getElementById("content")
);
Serve para criar um componente dada
uma especificação. A vantagem do
método é que nos permite criar
componentes para serem
reaproveitados.
Como podemos notar, com a utilização do React.createClass, habilitamos um
componente com o nome da variável determinada, no nosso caso Hello e então
podemos chamá-lo em diversos lugares como <Hello />
11. Entendo o React -
React.componente
No ES6 (versão moderna do JavaScript), nós ganhamos
vários recursos importantes e um deles são as Classes.
Com ele é possível extender métodos para outros objetos,
facilitando na modelagem e reutilização dos componentes.
Nós iremos adotar essa abordagem em nossos exemplos.
class Hello extends React.Component {
render(){
return (
<h1>Hello World!</h1>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById("content")
)
12. Entendo o React - Usando
Javascript e HTML
Abaixo definimos um dicionário de dados que vai chamar o
Javascript dentro do método Render.
var carros = ['astra', 'civic', 'fusion'];
ReactDOM.render(
<div>
{
carros.map(function (carro) {
return <li>{carro}</li>
})
}
</div>,
document.getElementById('carros')
);
13. Entendo o React - Props
Quando utilizamos nossos componentes no React, nós
podemos adicionar atributos a eles, dos quais chamamos
de props. Esses atributos ficam disponíveis para o nosso
componente através do this.props e podem ser usados no
método render.
class Hello extends React.Component{
render(){
return (
<h1> Hello {this.props.nome} !</h1>
);
}
}
ReactDOM.render(<Hello nome='alexandre' />,
document.getElementById('root')
);
Se observamos o
exemplo, vamos ver
que o nosso código
recebe uma variável
do tipo nome.
15. Criando o nosso primeiro
exemplo simples
1. Baixe o React Starter Kit da seguinte URL: https://
react-cn.github.io/react/downloads.html
2. Descompacte o arquivo na pasta que deseja iniciar o
seu projeto;
3. Este arquivo contém as bibliotecas básicas do React
e também muitos exemplos.
A sua pats deverá conter esses arquivos
16. Criando o nosso primeiro
exemplo simples
1.Reproduza o código abaixo no seu computador
alexandre.rosa@unigranrio.edu.br alexrosa@gmail.com
17. Criando o nosso primeiro exemplo
simples
1.Declaração das bibliotecas
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/
babel-core/5.8.23/browser.min.js"></script>
</head>
2. A lib babel-core é usada para compilar o nosso
código JavaScript com modo de compatibilidade para
as versões (ES2015 e ES2016);
18. Criando o nosso primeiro
exemplo simples
1.Dentro da tag <body> podemos ver como ficará o
nosso código em React.
2. Na tag script deixamos claro que iremos usar
abordagem (text/babel).
3. O método ReactDOM.render(…) será o responsável
por renderizar o nosso componente no navegador.
Repare que ele será renderizando na <div
id=“example”>.
19. Criando o nosso primeiro
exemplo simples
1.Agora crie o seu próprio Hello World;
2.Vamos aumentar o desafio, faça com que o React
imprima - Hello World. Hoje é (data de hoje);
22. Vamos começar…
1. Primeiro crie o seu arquivo .html;
2. Inclua as referências do React no arquivo, usando a
tag <script></script>, conforme abaixo:
3. Crie uma div com o id = “root”, conforme exemplo:
<script src="react/react.js"></script>
<script src=“react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/
browser.min.js"></script>
<div id=“root”></div>
23. Vamos começar…
1. Primeiro crie o seu arquivo .html;
2. Inclua as referências do React no arquivo, usando a
tag <script></script>, conforme abaixo:
3. Crie uma div com o id = “root”, conforme exemplo:
<script src="react/react.js"></script>
<script src=“react/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/
browser.min.js"></script>
<div id=“root”></div>
4.Após crie uma tag <script type=“text/babel”> e insira
o seu código dentro desta tag.
Lembre-se de fechá-la no final usando </script>
24. Criando o tabuleiro
1. Vamos criar um classe que irá representar o nosso
tabuleiro, que será composto por 3 componentes:
1. Square (quadrados); - responsável pela
renderização e ação do jogador (botões);
2. Board (tabuleiro) - responsável por renderizar a
área do jogo (squares);
3. Game (Jogo) - responsável por renderizar o
tabuleiro e gerenciar os elementos do jogo.
25. Criando o tabuleiro
1.Vamos criar a classe Square;
2.Agora vamos criar a Classe Board;
3. Vamos criar a classe Game que deverá instanciar os
nosso tabuleiro.
26. Criando o tabuleiro - classe
Square
class Square extends React.Component{
render(){
return(
<button className="square" onClic={() => alert('click')}>
{this.props.value}
</button>
);
}
}
Repare que nessa classe estamos
criando uma arrow function (recurso do
ES6)
27. Criando o tabuleiro - classe
Board
class Board extends React.Component{
renderSquare(i){
return <Square value={i} />;
}
render(){
const status = 'Próximo Jogador: X';
return(
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
<!—- repita o mesmo passo da coluna anterior, incrementando os
números —>
</div>
<div className="board-row">
<!—- repita o mesmo passo da coluna anterior, incrementando os
números —>
</div>
</div>
);
}
}
className="board-row"
28. Criando o tabuleiro - classe
Game
class Game extends React.Component{
render(){
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
29. Criando o tabuleiro -
Adicionando dinâmica ao jogo
Precisamos pegar o estado do componente, para
armazenar o estado do botão clicado (selecionado).
Para isso precisamos usar um recurso do React chamado
de this.state.
1.Para isso vamos precisar alterar a nossa classe
Square e adicionar um construtor.
class Square extends React.Component{
constructor(props){
super(props);
this.state = {
value: null,
};
}
30. Criando o tabuleiro -
Adicionando dinâmica ao jogo
2.Após vamos precisar alterar a função clique para
armazenarmos o estado do botão clicado. Veja o
exemplo abaixo:
class Square extends React.Component{
constructor(props){
super(props);
this.state = {
value: null,
};
}
render(){
return (
<button className="square" onClick= {() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
Sempre que o evento this.setState for
chamado, uma atualização do
componente será realizada, fazendo
com que o React atualize o valor do
componente renderizado.
31. Melhorando o controle do Jogo -
Board
Agora temos a construção básica do nosso jogo
funcionando. Porém, o estado está encapsulado em
cada quadrado (Square). Para realmente fazermos um
jogo real, vamos precisar verificar se o jogador
ganhou o jogo e alternar o X e 0 em cada área
selecionada (square).
1.Vamos alterar o nosso construtor da classe Board
constructor(props){
super(props);
this.state = {
squares: Array(9).fill(null),
};
32. Melhorando o controle do Jogo -
Board
2.Vamos alterar o método renderSquare(i) que antes
era assim:
renderSquare(i){
return <Square value={i} />;
}
3.E agora ficará assim:
renderSquare(i){
return <Square value={this.state.squares[i]} />;
}
33. Melhorando o controle do Jogo -
Board
4. Agora precisamos mudar o comportamento de
quando o componente é clicado
renderSquare(i){
return (<Square
value={this.state.squares[i]}
onClick={()=> this.handleClick(i)}
/>
);
}
Repare que agora estamos passando 2 props da classe Board para a classe
Square: value e onClick
34. Melhorando o controle do Jogo -
Board
5. Implementando método handleClick();
//seta o valor de um square com X
handleClick(i){
//foi usado o método slice para copiar o array
const squares = this.state.squares.slice();
squares[i] = 'X';
this.setState({squares: squares});
}
35. Criando componentes funcionais
React é uma linguagem tão dinâmica que suporta
componentes como declarações de funções
function Square(props) {
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}
Como agora o objet Square se tornou uma função,
temos que tomar cuidado para não usar mais o props
fazendo referência a this.
36. Corrigindo os defeitos
Até agora apenas o jogado X está jogando. Vamos
alterar o nosso código para suportar também o jogador
0.
class Board extends React.Component{
constructor(props){
super(props);
//criar a propriedade square
this.state = {
squares: Array(9).fill(null),
xIsNext: true;
};
}
Como transformamos a classe Square em função,
vamos alterar a classe Board para incluir nela o
construtor. Conforme exemplo abaixo:
37. Corrigindo os defeitos
Agora, vamos alterar o método handleClick para
controlarmos as jogadas.
handleClick(i){
//foi usado o método slice para copiar o array
const squares = this.state.squares.slice();
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext;
});
}
Repare que agora estamos controlando quem está
jogando se é X ou O.
38. Corrigindo os defeitos
Vamos atualizar o status da jogador, informando quem
será o próximo a jogar.
Para isso, vamos alterar o método render() da classe
Board. Conforme exemplo abaixo:
render(){
const status = 'Próximo Jogador: '+ (this.state.xIsNext ? 'X' : 'O');
39. Declarando um vencedor
Adicione essa função helper que irá calcular o vencedor
do jogo. Essa função poderá ser incluída no início ou
final do seu script, conforme a imagem abaixo:
<script type="text/babel">
//função para calcular o vencedor do jogo
function calculaVencedor(squares){
const linhas = [
[0,1,2],
[3,4,5],
[6,7,8],
[1,4,7],
[2,5,8],
[0,4,8],
[2,4,6]
];
for (let i=0; i < linhas.length; i++){
const [a,b,c] = linhas[i];
console.log(' valor da cel: '+linhas[i] );
if (squares[a] && squares[a] === squares[b] && squares[a] ===
squares[c]){
return squares[a];
}
}
return null;
}
// DEMAIS CLASSES VIRÃO ABAIXO.
40. Declarando um vencedor
Agora precisamos alterar o status do nosso jogo e
também bloquear o próximo jogador, caso tenhamos um
vencedor. Então, vamos lá!
1. Na classe Board altere a função render() incluíndo
esse código no lugar do anterior: const status =
‘Próximo jogador…’.
render(){
const vencedor = calculaVencedor(this.state.squares);
let status;
if (vencedor){
console.log('encontrou o vencedor');
status = 'Vencedor: '+ vencedor;
} else {
status = 'Próximo jogador: '+ (this.state.xIsNext ? 'X' : 'O');
}
// abaixo deverá ficar a implementação do método return
41. Declarando um vencedor
2. Agora precisamos alterar a função handleClick(i), para
evitar que um próximo jogador jogue, caso tenhamos
um vencedor.
A solução será fácil, basta inserir um controle (if)
fazendo uma chamada a função
calculaVencedor(squares) passando o nosso array
como parâmetro. Veja o exemplo abaixo:
//caso tenha um vencedor a função abaixo irá impedir do próximo jogador jogar.
if (calculaVencedor(squares) || squares[i]){
return;
}
OBS: O comando return fará com que a os demais comandos abaixo não sejam
executados. Agora observe o resultado final do nosso método.
42. Declarando um vencedor
3. Como ficou o nosso método handleClick(i) após
inserirmos um controle condicional (if).
//seta o valor de um square com X
handleClick(i){
//foi usado o método slice para copiar o array
const squares = this.state.squares.slice();
//caso tenha um vencedor a função abaixo irá impedir do próximo jogador jogar.
if (calculaVencedor(squares) || squares[i]){
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
45. Criando novos controles
Você deve ter percebido que o nosso jogo já consegue
definir um vencedor, porém não temos um controle
(botão) para reiniciar a partida ou mesmo limpar o
nosso tabuleiro. Para fazermos isto, precisamos fazer
um refresh na página, ou seja reiniciar o estado da tela.
46. Criando novos controles
1.Primeiro vamos re-organizar o nosso jogo. Vamos
transferir algumas responsabilidades que deveriam
estar na classe Game e que estão na classe
(componente) Board.
2. Sendo assim, primeiro passo a ser feito remover o
construtor da classe Board e colocá-lo na classe
Game.
class Game extends React.Component {
constructor(props){
super(props);
//criar a propriedade square
this.state = {
squares: Array(9).fill(null),
xIsNext: true,
};
}
Agora o escopo da nossa classe deverá ficar desse jeito
47. Criando novos controles
3. Agora vamos copiar o método handleClick(i) da classe
Board para a classe Game, conforme o exemplo abaixo.
class Game extends React.Component {
constructor(props){
super(props);
//criar a propriedade square
this.state = {
squares: Array(9).fill(null),
xIsNext: true,
};
}
//seta o valor de um square com X
handleClick(i){
//foi usado o método slice para copiar o array
const squares = this.state.squares.slice();
//caso tenha um vencedor a função abaixo irá impedir do próximo jogador jogar.
if (calculaVencedor(squares) || squares[i]){
return;
}
squares[i] = this.state.xIsNext ? 'X' : 'O';
this.setState({
squares: squares,
xIsNext: !this.state.xIsNext,
});
}
48. Criando novos controles
4. Agora vamos copiar o controle do status que estava
sendo feito no método render() na nossa classe Board
para a classe Game. Siga o exemplo abaixo.
Copie o código que estava inserido no método Board.render() para a classe
Game.render(), conforme o exemplo abaixo. Observe que agora o método render() da
classe Game ficou parecido com o da classe Board.
class Game extends React.Component {
render(){
const current = this.state.squares;
const vencedor = calculaVencedor(this.state.squares);
let status;
if (vencedor){
console.log('encontrou o vencedor');
status = 'Vencedor: '+ vencedor;
} else {
status = 'Próximo jogador: '+ (this.state.xIsNext ? 'X' : 'O');
}
//abaixo deverá conter a chamada a return()
49. Criando novos controles
5. Agora a nossa classe Board deverá ficar apenas com
dois métodos, são eles:
• renderSquare(i);
• render();
class Board extends React.Component{
renderSquare(i){
return (<Square
value={this.props.squares[i]}
onClick={()=> this.props.onClick(i)} />
);
}
render(){
return(
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
Visão geral da classe Board
50. Criando novos controles
5.1 Ainda na classe Board precisamos ainda fazer algumas
alterações sutis, porém importantes.
• No método renderSquare precisamos alterar a renderização de Square,
mudando a chamada anterior que estava value={this.state.squares[i]} para
value={this.props.squares[i]}
• No método render() precisaremos remover a declaração e controle do status e
mover ele para a classe Game, que passará agora ser responsável por
controlar o status do jogo.
• Ainda no método render(), nós também iremos remover a tag <div
className=“status”>{status}</div>. Como dissemos, esse controle passará a
ser feito pela classe Game.
52. Criando novos controles
6. Classe Game, agora faremos os ajustes necessários.
1. Vamos criar um novo método chamado reset() dentro
da classe Game. Siga o exemplo abaixo:
//limpa os dados da janela.
reset() {
this.setState({
squares: Array(9).fill(null),
xIsNext: true,
})
console.log('resetando a tela');
}
Vamos explicar: O React trabalha com o controle de estado dos seus
componentes, logo para limparmos a nossa tela, precisamos limpar o nosso array
ou seja, resetar os valores informados pelo usuário. Para isso, foi criada uma nova
variável e usado o comando: this.setState(). Esse comando irá resetar o estado do
nosso componente Game.
53. Criando novos controles
6. Classe Game, agora faremos os ajustes necessários.
2.Vamos alterar o método render() da classe Game, pois
agora precisamos mudar a chamada do componente
<Board>. Siga o exemplo apresentado.
return(
<div className="game">
<div className="game-board">
<Board
squares={current}
onClick={(i)=> this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status} </div>
<div><button onClick={()=> this.reset()}>Jogar</button></div>
</div>
</div>
);
Observe que agora
precisamos passar a nossa
lista (squares) e também o
handle da chamada onClick()
para o componente (classe)
Board.
Incluímos também um botão e uma chamada para a
nossa função reset()
54. Referências
Sites:
• Website oficial - https://reactjs.org/;
• Tutorial oficial - https://reactjs.org/tutorial/tutorial.html
O material utilizado nesta aula foi extraído do site oficial do ReactJS. Lá você
poderá encontrar bastante conteúdo sobre, inclusive o tutorial do jogo da velha (tic
tac toe).
React Native:
• http://facebook.github.io/react-native/
Github:
• https://github.com/alexrosa - Aqui você poderá fazer o download dos exemplos.
NPM (pacote que facilita a criação das apps):
• https://www.npmjs.com/package/create-react-app