Recentemente comecei a trabalhar com o Onsen UI. UM framework agnóstico, onde você pode trabalhar com diversos frameworks Javascript (Angular, Angular 2, React, Vue.js) ou com Javascript puro. O Onsen UI é um excelente framework para quem trabalha com desenvolvimento de aplicativos híbridos, baseados no phonegap ou cordova.
Nesta postagem, vamos fazer um tutorial rápido de configuração do Onsen UI + Webpack + React + React-hot-loader.
Inicialmente crie a pasta para seu projeto:
mkdir react-hot-reload-test
cd react-hot-reload-test
Inicie um projeto em branco do NodeJS
npm init -f
Para este tutorial vamos precisar dos seguintes pacotes:
- React – Biblioteca que vamos utilizar para escrever o javascript das aplicações
- Babel – Transforma ES2015 e JSX para Javascript, de uma forma que pode ser facilmente interpretado pelos navegadores mais modernos
- Webpack – É um “empacotador”. Junta todos os Javascripts em um arquivo único.
- React Hot Reloader Plugin – Plugin para o Babel e Webpack que permite recarregar componentes do React e manter seu estado.
- OnsenUI – Já falamos sobre ele 😉
O comando a seguir vai instalar todos estes pacotes:
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 react-hot-loader@3.0.0-beta.1 webpack webpack-dev-server onsenui react react-dom react-onsenui
Configurando o Webpack
Depois de instalar todas as dependências é necessário configurar o Webpack. Não vou extender sobre explicações acerca de cada entrada na configuração.
Salve como webpack.config.js na raiz do seu projeto. Após isto vamos configurar o webpack no package.json que foi criado quando iniciamos o projeto NodeJs.
Substitua o que está dentro de script pelo código acima. Agora com webpack configura, vamos testar nossa aplicação.
Vendo a mágica acontecer (ou quase)
Crie na raiz do projeto um arquivos index.html:
Este arquivo provê o estilo CSS do Onsen UI e o elemento root para nossos componentes.
Feito isto, crie um pasta src. Esta pasta vai armazenar nossos arquivos Javascript. O primeiro arquivos que vamos colocar nela é o src/index.js
A estrutura desse código pode parecer um pouco rebuscada caso você não tenha muita experiência com o React, porém é um código que pode se repetir para praticamente todas as aplicações. Os elementos são agrupados no AppContainer e abaixo escrevemos o que deve ocorrer para que o Hot Realoading funcione.
O src/App.js deve ter a seguinte estrutura:
Usando npm start para que a aplicação se inicie no http://localhost:3000. E note, que o hot reloading ainda não está funcionando. Altere o arquivo e salve. Note que nada acontece.
Agora vai
Para demostrar o poder do Hot Reloader vamos fazer algumas mudanças. No src/App.js vamos fazer alguns imports adicionais:
A segunda:
E adicionalmente esta classe:
Perceba que, As alterações que você realiza nos textos, ou componentes são recarregadas na aplicação sem que o estado se perca.
Lembrando que está é somente a configuração inicial.
Você pode conferir este código no github.
Fonte: Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI