<h2 id="introdução"><a href="#introdu%C3%A7%C3%A3o" class="anchor">Introdução</a></h2>
<p>Olá pessoal, esse vai ser meu primeiro post com vídeo, olha que legal &#x3C;3</p>
<p>A ideia é trazer esse novo modelo com vídeos bem curtinhos para galera que, assim como eu, não está com muito tempo para ler posts imensos e pode até ouvir enquanto faz outras coisas.</p>
<p>Como foi um vídeo, infelizmente não teve trilha sonora enquanto gravei, maaaas, para não deixar você triste sem música, depois de assistir o vídeo, dá um play em <a href="https://open.spotify.com/artist/6iDKe5bQr1XkmNsouyK5Pm">Gudrid Hansdottir</a>, tem um som bem bacana e suave, indicação do meu amigo <a href="https://nipher.io/">Jonas Mendes</a>.</p>
<h2 id="video"><a href="#video" class="anchor">Video</a></h2>
<div class='embed-container'><iframe style="width: 100% !important; height: 400px" src='https://www.youtube.com/embed/PxLJg6v-u2k' frameborder='0' allowfullscreen></iframe></div>
<h2 id="detalhes"><a href="#detalhes" class="anchor">Detalhes</a></h2>
<p>É importantante que você tenha o <strong>Node >= 4</strong> para que possa funcionar. Aconselho o Node >=6 para uma melhor performance.</p>
<p>Quem curtiu e já está doido para começar uma aplicação React, segue o <a href="https://github.com/facebookincubator/create-react-app">link do create-react-app</a>. E para quem viu no vídeo, os passos são:</p>
<pre><code class="language-bash"># instalar globalmente o gerador
npm install -g create-react-app

# criar nossa aplicação
create-react-app nome-da-aplicacao

# para rodar
npm start
</code></pre>
<h2 id="info"><a href="#info" class="anchor">Info</a></h2>
<p>Se você não quiser perder nenhum vídeo ou post meu, segue <a href="https://twitter.com/Willian_justen">meu twitter</a> ou então segue meu <a href="https://willianjusten.com.br/feed.xml">RSS</a> no seu leitor favorito =)</p>


Iniciar um projeto React não precisa e nem deve ser muito trabalhoso.

Vídeo: Iniciando um app React em 3 minutos


## Introdução

Faaaaala pessoal, estou muiiito feliz com tudo que passei lá em Porto Alegre e então resolvi fazer um post sobre todas essas coisas. Já aviso que esse não será um post review sobre as coisas do evento, acho que já terão vários desses posts e inclusive que poderão ser até mais detalhados, visto que fiquei nervoso antes da minha palestra e posso ter perdido vários detalhes.

Eu vou separar o post entre antes, durante e depois da BrazilJS no meu ponto de vista e meus acontecimentos, acho que vai ser legal.

Para não perder o costume, vou ouvindo [Madeon](https://open.spotify.com/track/4PTPZeJlK1rYlYr6bf11hk), música eletrônica bem maneira =)

## Antes

### Envio do Call for Papers e Resposta

Eu acompanho sempre as coisas da BrazilJS, principalmente a [Weekly](https://github.com/braziljs/weekly/issues), onde já tiveram vários posts meus lá indicados até por outros. Em um dia, eu vi que tinham aberto o Call for Papers para a BrazilJS e eu fiquei pensando bastante se mandava ou não. Já tive a felicidade de palestrar em vários eventos, mas como todo mundo sabe, a BrazilJS é bem grande e com muitas palestrantes bons lá de fora. Mas depois de ficar pensando bastante, eu me perguntei, por que não? Eu já tinha comprado as passagens e o ingresso, então eu já ia de qualquer maneira mesmo xD

Eu já estava brincando com algumas coisas de Audio Visualization e imaginei que seria um assunto legal para ser falado, já que nunca tinha visto nada parecido no Brasil. Já tinha visto uma palestra do [Shiota criando música com o RetroJS](https://www.youtube.com/watch?v=DMy3P6BF7Iw), mas nada muito visual, então quis experimentar. Para a felicidade do meu amigo [Márcio Ribeiro](http://shiz.co/), que é vidrado no assunto.

Bom, eu enviei sei lá quando, mas fiquei meses sem receber resposta. Como toda pessoa ansiosa, logo que eu enviei, fiquei umas semaninhas pensando e esperando, como não veio nada, já tinha aceitado que não tinha rolado. Quando o Jaydson me mandou um email falando que tinham gostado do meu tema e perguntando se eu queria me juntar, nossa, eu pulei de alegria!

![Imagem dos emails trocados com o Jaydson](/assets/img/brazil-js-16/email.png)

### Montagem dos slides e vôo

Eu confesso que estou num momento super embolado, estou prestes a me mudar, também terminando um projeto com um amigo, além de ter palestrado direto em Julho e Agosto. Então, como todo brasileiro, eu fui deixando os slides para a última hora. Como eu sou muiiiito chato com conteúdo, fiz e refiz meus slides várias vezes. É um tema que eu gosto bastante, então tinha tantos exemplos para colocar, mas que ao mesmo tempo eu achava que ficaria massivo...

Enfim chegou um dia antes de eu embarcar e como eu sou de Petrópolis, combinei com um amigo que iria ficar na casa dele, porque meu vôo ia ser 6:30 da manhã. Mas, é claro que não foi bem assim, meus amigos que iam voar junto comigo resolveram sair para comer, e acabamos encontrando outros 2 amigos devs também, resultado? Ficamos jogando sinuca e conversando até super tarde e praticamente fomos virados para o aeroporto. Lá tivemos uma pequena parada para capturar um Sandslash (faz parte né xD) e então embarcamos! Segue foto minha e dos meus amigos, [Jonas Mendes](https://nipher.io/) e [Gabriel Godoy](http://gabrielgodoy.com/).

![Eu e meus 2 amigos no avião](/assets/img/brazil-js-16/aviao.jpg)

### Chegada e Teste dos slides

Cheguei na quinta bem cedinho e fui recepcionado pelo Jaydson com um micro-ônibus para me levar ao hotel junto com meus amigos, foi ali que começou a cair a ficha que eu ia palestrar no maior evento de Javascript do mundo! Ficamos um pouco no hotel e fomos almoçar numa churrascaria SUPER BARATA e que recomendo chamada Giovanaz (dicas do will para turistar =p).

A tarde teve uma coletiva lá no shopping e também deu para testar o projetor e o som, para saber como iria ficar. E...deu TUDO errado! O contraste estava muito ruim nos slides, não dava para ver praticamente nada, o tamanho também tinha dado erro e cortado algumas coisas, confesso que fiquei bastante nervoso e triste. Eu só fiquei um pouco mais feliz, pois quando eu comecei a passar pelos exemplos com música, o Jake Archibald saiu correndo de um ponta até perto do palco para ver o que estava rolando, isso foi super legal <3

Mas, como nem tudo são flores, eu precisava voltar para o Hotel e refazer todos os slides que estavam ruins (90%), só que o pessoal todo tinha combinado de sair e conhecer um pouquinho da cidade, mas eu sabia que se eu não ficasse refazendo, o dia seguinte ia ser um desastre. Falei para os meus amigos que não ia dar para sair, aí que o [Jonas Mendes](https://nipher.io/) e o [Márcio Ribeiro](http://shiz.co/) ficaram comigo no hotel ajudando a refazer e ainda dando opiniões do que podia mudar, ficamos até muito tarde fazendo isso, mas no final de tudo, já estávamos rindo e eu estava bem aliviado que aparentemente estava tudo bom.

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Indo dormir 3h da manhã, mas tendo a certeza que tenho amigos dispostos a me ajudar sempre, isso já valeu o evento para mim <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a></p>&mdash; Willian Justen (@Willian_justen) <a href="https://twitter.com/Willian_justen/status/769051603043282945">August 26, 2016</a></blockquote>

## Durante

O evento estava um pouco atrasado e eu já estava bem nervoso/ansioso, já tinham tido palestras muito legais pela manhã, em particular a palestra do Jake Archibald, que para mim, foi uma das melhores do evento. Também teve a palestra da Ruth, que falou sobre o tema música também, mas que infelizmente uma das Demos tinha dado um probleminha, o que só me deixou mais nervoso, pensando se tudo iria funcionar mesmo.

De repente, o Jaydson sobe no palco e me chama, nossa, ver a galera toda lá, tava beeem cheinho, galera lado a lado nas arquibancadas e no chão também, bateu um baita de um nervosismo. Mas eu pensei, tá tudo certo e você vai falar de algo que ama, a galera vai curtir. E foi isso, foram 30 minutos que ao mesmo tempo que pareceram uma eternidade, quando acabou, eu pensei que tinha sido curto demais!

Ter visto a galera rindo dos meus exemplos e das minhas piadas bobas foi só me dando mais confiança e o barulho que geral fez no final, foi INCRÍVEL! Para quem não estava lá, segue um amostra de como foi, mas multiplica o som e eco por umas 10x.

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">final da palestra do <a href="https://twitter.com/Willian_justen">@Willian_justen</a> foi excelente 😁 <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a> <a href="https://t.co/aDLggwbhUd">pic.twitter.com/aDLggwbhUd</a></p>&mdash; yuri (@ybrntt) <a href="https://twitter.com/ybrntt/status/769259830305550340">August 26, 2016</a></blockquote>

E para assistir a apresentação inteira, só seguir [nesse link](https://youtu.be/tJ0XV9W4nHw?t=23396), já no tempo marcado. Os slides também [estão aqui](https://willianjusten.com.br/braziljs-16).

## Depois

### Tweets e carinho

Sabe quando você sente que saiu um peso enorme das costas? Foi exatamente isso, não que era um peso ruim, mas era uma ansiedade muito grande de apresentar, depois de ter falado e principalmente por ter sido bem recebido, nossa, aliviei muito e fiquei super feliz!

Eu saí do palco com 10% de bateria no celular e com tantas notificações, que eu sabia que seria impossível ler tudo antes de acabar a bateria, consegui conectar rapidinho no Mac e fui lendo várias mensagens de carinho, tanto de amigos, como de pessoas que eu não conhecia, mas que gostaram da palestra. Tiveram fotos lindas e até tweet em espanhol! Separei alguns que curti <3

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">música e JavaScript na <a href="https://twitter.com/hashtag/braziljs?src=hash">#braziljs</a> com o <a href="https://twitter.com/Willian_justen">@Willian_justen</a>. tá lindo demais! <a href="https://t.co/NKakPXcdIm">pic.twitter.com/NKakPXcdIm</a></p>&mdash; diéssica (@diessicode) <a href="https://twitter.com/diessicode/status/769244358231126017">August 26, 2016</a></blockquote>

<blockquote class="twitter-tweet" data-lang="en"><p lang="es" dir="ltr">Entre lo que más me gustó hoy en <a href="https://twitter.com/hashtag/BrazilJS?src=hash">#BrazilJS</a> está la charla de música con JS de <a href="https://twitter.com/Willian_justen">@Willian_justen</a> , estuvo muy interesante!</p>&mdash; Werik (@erikfloresq) <a href="https://twitter.com/erikfloresq/status/769344861812195329">August 27, 2016</a></blockquote>

<blockquote class="twitter-tweet" data-lang="en"><p lang="pt" dir="ltr">Amei a palestra do <a href="https://twitter.com/Willian_justen">@Willian_justen</a>!!!<br>Vontade de largar tudo e começar a mexer com trem de audioviz NOW! *_*</p>&mdash; Camila Carrera (@cscarrera) <a href="https://twitter.com/cscarrera/status/769246121633976320">August 26, 2016</a></blockquote>

Além dos tweets, tiveram várias pessoas que me pararam para conversar e até mostrar seus projetos, uma coisa mais fantástica que a outra!

### Lançamento do Curso

![Banner curso](https://dien0bhzxjun5.cloudfront.net/ea2d1627-1750-4142-b8de-e806adbcb798/cursowill.crop_1438x532_0,0.resize_1440x532.png)

Durante o evento, eu também lancei a pré-venda do meu mais novo curso, que será sobre Javascript com TDD na prática, ainda estou fechando a ementa e preparando bastante coisa legal, mas já queria lançar no evento e por isso eu botei um desconto de 50% para as pessoas que já me conhecem e vem me apoiando aí =)

Para quem quiser já aproveitar a oportunidade, a [pré-venda está disponível nesse link](https://www.eventick.com.br/javascript-com-tdd-na-pratica).

### Agradecimento no Aeroporto

E para finalizar, eu gravei um vídeo rapidinho agradecendo todos vocês, diretamente do aeroporto de Porto Alegre, assiste aí =D

<iframe width="560" height="450" src="https://www.youtube.com/embed/cPocZosKxQg" frameborder="0" allowfullscreen></iframe>


Tudo que me aconteceu antes, durante e depois desse que foi meu maior evento de desenvolvimento.

Achievement concluído - BrazilJS


## Introdução

Fala pessoal, vou ouvindo uma banda chamada [Balmorhea](https://open.spotify.com/artist/1U0FaHAc4fcwQcYEJFgkm9), que é uma banda de post-rock instrumental, tem um som ótimo para estudar/codar, pois é calma e tem várias sonoridades.

São 3:20 da manhã e a insônia não me deixa dormir, eu deveria estar fazendo mil outras coisas, mas sei lá, quando vem a vontade de escrever, melhor obedecer né. Só não sei quando vou postar, quem sabe se eu terminar antes de dormir =)

Esse é um post bem legal, especialmente para quem está começando, pois vou mostrar para vocês como seria um código em ES5 e depois em ES6. Então, para quem olhar tutoriais na internet escritos de diferentes formas, pelo menos vai conseguir se guiar e entender o que se está passando ali. Vou separar em vários trechinhos bem pequeninos, assim vai facilitar o entendimento de cada sintaxe.

### Importando o React

Em ES5 seria o modelo normal do CommonJS:

```js
var React = require('react');
var PropTypes = require('prop-types');
```

Já em ES6 usando o sistema de [import de módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import):

```js
import React, { PropTypes } from 'react';
```

Se você reparar, no `PropTypes` eu utilizo as chaves em volta, isso significa que eu estou pegando só uma parte do módulo `react`, que é o `PropTypes`, evitando ter que digitar `React.PropTypes` toda vez que precisar. Isso se chama [Object destructuring](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).

### Criando um componente e exportando

Em ES5 nós criamos componentes utilizando o método `createReactClass` e depois nós os exportamos usando o `module.exports`.

```js
var MeuComponente = createReactClass({
    ...
});

module.exports = MeuComponente;
```

Em ES6, você pode criar uma classe e extender de `React.Component` para ter as funcionalidades do React.

```js
export default class MeuComponente extends React.Component {
    ...
}
```

Repare que eu estou também exportando diretamente o `MeuComponent` passando o `export default` no início. Quando eu passo o `default`, estou dizendo que não me importo em qual nome ele vai receber quando for importado. Se eu tivesse colocado só `export`, eu obrigatoriamente teria que importar com o mesmo nome. Outra forma de escrever exportando seria removendo o `export default` no início e colocando `export default MeuComponente;` ao final do código, que é minha opção favorita.

```js
class MeuComponente extends React.Component {
    ...
}

export default MeuComponente;
```

### PropTypes e getDefaultProps

~~Em ES5, meu objeto de propTypes fica **dentro** da minha classe, assim como tenho um método para definir minhas propriedades default.~~
**update 17/05/2018** - após a versão 15.5 PropTypes foi colocado em uma biblioteca separada do React

```js
var React = require('react');
var PropTypes = require('prop-types');

var MeuComponente = createReactClass({
    propTypes: {
        title: PropTypes.string.isRequired
    },
    getDefaultProps: function() {
        return {
            title: 'Heey',
        };
    }
});
```

~~Já em ES6, tanto a definição de `PropTypes` quanto o `defaultProps` vão para o lado de **fora**.~~

```js
import React from 'react';
import PropTypes from 'prop-types;

export default class MeuComponente extends Component {
    ...
}

MeuComponente.propTypes = {
    title: PropTypes.string.isRequired,
}

MeuComponente.defaultProps = {
    title: 'Heey',
};
```

### getInitialState

Para definir estados iniciais ao meu componente, em ES5 eu preciso usar o método `getInitialState`.

```js
var MeuComponente = createReactClass({
    getInitialState: function() {
        return {
            title: this.props.title,
        };
    },
});
```

Como em ES6 estamos criando classes, nós temos o `constructor`, que como o nome já diz, irá construir nossa instância base, então é lá que vamos definir nossos estados iniciais.

```js
export default class MeuComponente extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: props.title,
        };
    }
}
```

### Fazendo Bind dos métodos

Esse talvez seja o ponto de maior incidência de erros da história do React! Muita gente já deve ter ido dormir pensando "Por que meu método tá dando undefined? Tá tudo certinho..."

O que acontece é que quando se utilizava o `createReactClass`, ele já fazia o [autobinding](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding), fazendo a ligação do `this` a todos os métodos.

Em ES5 temos:

```js
var MeuComponente = createReactClass({
    handleClick: function(event) {
        this.setState({
            liked: !this.state.liked,
        });
    }
});
```

Em ES6, precisaremos fazer o bind manual então:

```js
export default class MeuComponente extends Component {
    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({
            liked: !this.state.liked,
        });
    }
}
```

Reparem que eu faço o bind no `contructor`, que é a forma correta de se fazer. Se você já viu um bind direto na função, **corrija**, é uma má prática.

### Shorthand Syntax

Se você reparar no exemplo acima, em ES5 eu uso `handleClick: function()...` e já no ES6 eu escrevo só `handleClick()` direto. Isso acontece pois todos os métodos são propriedades do objeto. Em ES5, eu preciso definir o nome da propriedade e então chamar uma função, que é o método que eu quero em si.

```js
var MeuComponente = createReactClass({
    componentWillMount: function() {
        ...
    }
});

module.exports = MeuComponente;
```

Em ES6, como temos a [Shorthand Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions), podemos simplesmente escrever como método direto:

```js
export default class Mycomponent extends React.Component {
    componentWillMount() {
        ...
    }
}
```

## Conclusão

Bom pessoal, essas são as principais mudanças de escrita para o React. Espero que você tenha entendido tudo que está ocorrendo e se encontrar mais posts por aí, consiga se virar, não importando em qual sintaxe esteja escrito =)

Lembrem-se sempre de utilizar boas práticas de escrita, não importando se está em ES5 ou em ES6, um ótimo styleguide, que tem bastante dica mastigadinha e explicada é o [Airbnb Styleguide](https://github.com/airbnb/javascript/tree/master/react), aconselho darem uma olhadinha.


Aproveite a nova sintaxe e entenda a diferença entre os códigos.

Willian JustenSoftware Engineer

Introdução

Video

Detalhes

Info