Quando começamos a ouvir sobre React, a primeira impressão que normalmente temos é de que se trata de mais um framework MVC, MVVM, MVW, ainda bem que nem sempre a primeira impressão é a que fica, pois estudando um pouco mais e começando a utilizar essa library logo se torna claro de que ela se propõe a tratar apenas o V dos acrônimos acima, isto é, o React cuida da exibição dos dados, e isso ele faz muito bem. Estando ciente disso o aprendizado se torna mais simples e a implementação também ganha foco onde necessário.
[markdown]
Vou tentar como o título diz, desmistificar o uso do React e também mostrar alguns pontos importantes que descobri durante o desenvolvimento.

## JSX

Acredito que o principal motivo para causar um “bloqueio” ao uso do React é o famigerado JSX, ou até mesmo o não uso dele, por causar um código não muito agradável aos olhos quando utilizado e um código verboso ao não utilizá-lo.
[/markdown]

[markdown]

### O que é?

JSX é uma extensão da sintaxe Javascript que lembra um pouco XML, embora não seja obrigatório desenvolver utilizando JSX para o React, o seu uso é aconselhável, pois facilita muito a leitura e entendimento de componentes com HTMLs mais complexos.

Exemplo:

**JSX**
“`js
var renderNode = document.getElementById(‘render’);

var HelloM = React.createClass({
render: function() {
return

;
}
});

React.render(<Hello name=”mundo” />, renderNode);
“`

**Javscript**
“`js
var renderNode = document.getElementById(‘render’);

var Hello = React.createClass({
displayName: “HelloM”,

render: function render() {
return React.createElement(
“div”,
null,
“Olá “,
this.props.name
);
}
});

React.render(React.createElement(Hello, { name: “mundo” }), renderNode);
“`

**Coffee-React (cjsx)**
Para os amantes de [coffeescript](http://coffeescript.org) também existe o [cjsx](https://github.com/jsdf/coffee-react), que permite a escrita do JSX da mesma forma que escrevemos com coffee.

“`coffee
renderNode = document.getElementById ‘render’

Hello = React.createClass
render: ->

React.render <Hello name=”mundo” />, renderNode
“`

Existem algumas ferramentas online que ajudam a converter [jsx para javascript](https://babeljs.io/repl), e também [HTML para JSX](https://facebook.github.io/react/html-jsx.html), assim como plugins para gulp e grunt para compilar o código antes de se enviar para produção, mas não entrarei em detalhes neste post.

Os exemplos a seguir neste post serão escritos com cjsx.

## Criando um componente

Tendo em mente o que foi dito no começo do texto, de que o React cuidará apenas da visualização dos dados, vou exemplificar um simples componente para mostrar uma lista de dados.

“`html

“`

“`coffee
# component.cjsx
nodeLista = document.getElementById(‘lista’)
Lista = React.createClass
getDefaultProps : ->
data: []
render: ->

{
• {item}

for item, index in this.props.data if this.props.data.length > 0}
{

• Sem itens

if this.props.data.length is 0}

criaLista = ->
data = []
min = 1
max = Math.floor(Math.random() * (1000))
while min < max
data.push min++
return data

React.render <Lista />, nodeLista

atualiza = ->
React.render <Lista data={criaLista()} />, nodeLista

“`

Neste código vemos 4 pontos importantes de um componente criado com React

1. **nodeLista** Node html onde deve ser renderizado, deve ser um node HTML válido, e qualquer conteúdo existente nele será substituido pelo html do componente
2. **React.createClass** função que cria o componente que pode ser renderizado com o React
3. **React.render** função que renderiza o componente criado no Node definido como segundo argumento
4. **getDefaultProps** Esta função faz exatamente o que ela diz, caso não seja passado nenhuma propriedade para o componente na sua renderização, ele utilzará os valores retornados por esta função

Observações importantes:

**render**
A função render dentro do seu componente, deve retornar uma estrutura HTML com apenas um Node no primeiro nível, ou seja, não se deve retornar por exemplo um código assim:

“`coffee
render: ->

# este segundo node no mesmo nível inicial não pode existir
“`
Caso necessário ter duas divs por exemplo, as duas devem ser envolvidas por uma outra para que ela seja o node principal do render:

“`coffee
render: ->

“`

**dados**
Da mesma forma que neste exemplo eu crio uma lista genérica e apenas chamo novamente a função **render** do React, eu poderia fazer uma chamada para um servidor devolver esses dados e renderizar novamente a lista.

## Qual o ganho real do React?

Um dos maiores ganhos do React é no fato de que ele cria um DOM Virtual, o qual ele compara com o atual antes de realmente fazer a alteração no HTML, e também alterando apenas os pontos que ele encontra alguma diferença com o DOM atual, tornando a atualização do DOM menos custosa e consequentemente mais rápida.

Outro ponto muito importante, é que como ele trata principalmente a visualização dos dados, ele acaba sendo uma ferramenta que pode ser utilizada em conjunto com qualquer outra (ou sozinha), por exemplo, posso criar uma aplicação com [angular](https://angularjs.org/), e criar services para buscar dados do servidor, controlar as rotas da aplicação, e renderizar os dados com o React, ou posso utilizar o [Ember JS](http://emberjs.com/) para tratar estes mesmos pontos e reaproveitar todo o código do React para renderizar as Views.

Em outras palavras, o React pode ser usado como uma “central” de views, onde não importa o método sendo usado para buscar/criar os dados, ele conseguirá renderizar as informações que serão passadas a ele.

## Concluindo… (ou quase)

Embora eu tenha separado a entrada de dados da renderização, um componente criado com React pode fazer muito mais do que apenas mostrar dados recebidos, existem outras funções úteis que permitem controlar o **state** do componente, como quando ele foi renderizado (**componentDidMount, componentWillMount**), incluir listeners de eventos do DOM no html gerado (**onClick, onScroll**), entre outras inumeras funções disponíveis, mas isso será abordado num futuro post.
[/markdown]