Cordova com React

Se você já tem um projeto em cordova e deseja usar React mas não quer começar tudo do zero, é possível usar React dentro de um projeto Cordova ou qualquer outro projeto web.

Vou mostrar de uma maneira muito simples como importar React para dentro de um projeto cordova. Mas isso vale para qualquer tipo de projeto: Angular, JQuery e etc...

Vou usar como base o projeto em cordova criado Nesse post 

Agora basta baixar os arquivos babel-core e react-with-addons para dentro da pasta js do projeto.

E depois importá-los no arquivo index.html. Vale lembrar que os nomes dos arquivo devem corresponder aos nomes de arquivos nas importações javascipt do arquivo html babel-core.min.js e react-with-addons.min.js:

 <!DOCTYPE html>
 
 <html>
     <head>
         
         <meta name="format-detection" content="telephone=no">
         <meta name="msapplication-tap-highlight" content="no">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
         <link rel="stylesheet" type="text/css" href="css/index.css">
         <title>Hello World</title>
     </head>
     <body>
         
         <div id="meu-app">
 
         </div>
         <script type="text/javascript" src="cordova.js"></script>
         <script type="text/javascript" src="js/babel-core.min.js"></script>
         <script type="text/javascript" src="js/react-with-addons.min.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
         <script type="text/babel">
             class App extends React.Component{
                 
                 constructor(){
                     super();
                     this.state = {
                         contador:0
                     };
                 }
                 _somar(valor){
                     let resultado = this.state.contador + valor;
                     this.setState({...this.state,
                                    contador:resultado
                                });
                 };
                 render(){
                     return (
                      <div>
                         <h1>React</h1>
                         <button onClick={()=>this._somar(1)}>Somar</button>
                         <span>{this.state.contador}</span>
                      </div>       
                     );
                 }
             };
             React.render(<App/>,document.getElementById("meu-app"));
         </script>
     </body>
 </html>
 

O arquivo babel serve para que possamos escrever em JSX.

Se estiver tudo ok, basta rodar o projeto e clicar no botão soma para que o valor ao lado seja incrementado:

Imagem

Essa é a maneira mais simples e primitiva de adicionar React em um projeto já existente. Dessa forma não é possível usar require para importar componentes React de outros arquivos. 

Para isso, devemos utilizar webpack. Nesse post mostramos detalhadamente como fazer isso.

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente