Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2016/03/getting-started-with-react-es6-and-webpck.png
    Coding HTML Javascript

    Começando com React, ES6 e Webpack

    Primeiro de tudo, eu sou completamente novo sobre React, ES6 e Webpack. São assunto que ainda estou estudando e aprendendo. Estou escrevendo esse post […]


    Primeiro de tudo, eu sou completamente novo sobre React, ES6 e Webpack. São assunto que ainda estou estudando e aprendendo. Estou escrevendo esse post para compartilhar o que aprendi e alguns pensamentos meus, então sinta-se a vontade para me dar qualquer feedback para melhorar meu código.

    Iremos começar com um básico Hello World usando React, ES6 e Webpack.

    Webpack

    O que é Webpack?

    Webpack é um module bundler. O que isso significa? Webpack pega os módulos com dependências e gera um arquivo estático novo representando esses módulos.

    Antes de começar com Webpack, você tem que ter Webpack instalado em sua máquina, então execute:

    Installing Webpack via NPM

    Agora a gente pode começar configurando nosso webpack.config.js

    Configurando Webpack

    Entry: É onde você chama seu arquivo javascript principal, vamos usar o .jsx.
    Output: É um objeto onde você define onde seu arquivo final irá estar e o nome do arquivo.

    Você está pronto para começar agora, crie um index.jsx dentro da pasta client e escreva um simples console.log:

    console.log

    Rode webpack no terminal e você deverá ter dist/bundle.js após rodar o comando. Para testar, cria um index.html e chame o bundle.js e veja o console.

    index.html

    ES6 & Babel

    O que é ES6?

    ECMAScript 6, também conhecido como ECMAScript 2015 é o última versão do padrão ECMAScript. ES6 é uma atualização significante da linguagem, e a primeira atualização desde o ES5 que foi o padrão em 2009.

    Por agora, nem todos os navegadores suportam o ES6 e JSX, então precisaremos do Babel, um compilador javascript.

    Instale Babel e seu loader:

    Instalando React

    O babel-preset-2s2015 e o babel-preset-react são plugins que estão sendo usado pelo babel-loader para traduzir o ES6 e o JSX.

    Babel também precisa de algumas configurações assim como o Webpack, então vamos criar um arquivo chamado .babelrc na raiz do nosso projeto:

    babelrc

    Agora precisamos dizer para o Webpack para usar o Babel-loader.

    Webpack usando Babel

    React

    Para começarmos com o React, vamos instala-lo via NPM.

    Instalando React

    Troque o console.log no index.jsx para o código seguinte:

    React hello world

    Rode webpack e você deverá ter o seu Hello World 🙂

    Github: Repository

    Post originalmente postado http://blog.bukinoshita.com/2016/03/02/getting-started-with-react-es6-and-webpack.html

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.