Ionic React和Capacitor入门

Ionic是Angular移动应用程序开发最流行的框架。现在，Ionic宣布推出React beta和Vue Js。这篇文章是关于Ionic React with Capacitor（Ionic Product）的开始。电容器是Cross-Platform的原生新娘，用于构建通用应用程序。这篇博文将解释如何使用Ionic移动组件设置react项目并生成iOS，Android和桌面（Electron框架构建）应用程序。

创建Ionic React项目
执行此命令以创建基于反应的离子项目。

$ npx create-react-app react-ionic-app --typescript
$ cd react-ionic-app

安装Ionic和React路由依赖。 

$ npm install @ ionic / react 
$ npm  install react-router 
$ npm  install react-router-dom 
$ npm  install @ types / react-router 
$ npm  install @ types / react-router-dom

App.js
现在用CSS导入Ionic组件包。清除现有的App.css代码。

import ' @ ionic / core / css / core.css ' ; 

import ' @ ionic / core / css / ionic.bundle.css ' ;

从' @ ionic / react ' 导入{ IonApp } ;

从' react ' 导入React ， { Component } ;

 

class App 扩展 Component {

render （） {

   回来（

     < IonApp > </ IonApp >

   ）;

}

}

出口默认App ;

运行项目
使用以下命令执行项目。我建议使用纱线，这适用于React。项目在3000港口运行。

npm run start 
或
yarn start 

编译成功！

您现在可以在浏览器中查看react-ionic-app。

本地：http：// localhost：3000 /
在您的网络上：http：//192.168.0.17 ：3000 /

构建项目在项目src目录下
创建页面，组件和服务文件夹。

生成React组件
React不提供任何命令行来自动生成组件。该generact是第三方插件，这将帮助你快速生成文件。

安装Generact

npm install -g generact

 

使用generact生成React组件 
转到项目级别并执行generact命令。这将提示您需要复制哪些组件。

react-ionic-app $ generact
？您想要复制哪个组件？应用
？您想如何命名App组件？标题
？你想在哪个文件夹中放置Header组件？SRC /部件/插头

这样所有组件文件都会自动生成。 

Header.js在components文件夹下
创建Header组件。删除CSS导入，因为我们已经在App.js上导入了

import {

IonHeader ，

IonTitle ，

IonToolbar

} 从 ' @离子/反应' ;

从' react ' 导入React ， { Component } ;

 

class Header 扩展 Component {

render （） {

  回来（

   < IonHeader >

     < IonToolbar color = “ danger ” >

     < IonTitle >我的导航栏</ IonTitle >

   </ IonToolbar >

  </ IonHeader >

）;

}

}