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