Ionic React and Capacitor Start Tutorial

 

GitHub Checkout

Check the GIT branch and branch switching to the old steps for the upcoming.

$git clone https://github.com/srinivastamada/react-ionic-app
$cd react-ionic-app
$git checkout chapter-1
$npm install
$npm run start

Required software

You need the following software to start the project.

• High Node.js version
• NPM
• NPX (actuator node packet)
• Yarn

Creating Ionic React project
execute this command to create a project based on the reaction of ions.

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

Ionic dependent routing and installation 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
now introduced Ionic components coated with CSS. App.css clear the existing code.

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

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

import { IonApp } from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

class App extends Component {

render () {

   return (

     < IonApp > </ IonApp >

   ) ;

}

}

exportdefaultApp;

Run the project
implementation projects using the following command. I recommend using yarn , this applies to React . Project in 3000 to run the port.

npm RUN Start
or

yarn start

Compiled successfully!

You can now view react-ionic-app in the browser.

Local: http://localhost:3000/
On Your Network: http://192.168.0.17:3000/

Construction of the project in the project src directory
create pages , components and services folder.

React generating component
React not provide any command line automatically generating component. The generact third-party plug-ins that will help you quickly generate documents.

Installation Generact

npm install -g generact

(Here are map images, large capacity, see download)

Linux resources can go to commune Station Downloads:

------------------------------------------Dividing line------ ------------------------------------ 

Specific download directory / 2019 data / August 19 / / Ionic React and Capacitor Start Tutorial / 

------------------------------------------Dividing line------ ------------------------------------

Use generact generate React components 
to the project level and perform generact command. This will prompt what components you want to copy.

react-ionic-app$ generact
? Which component do you want to replicate? App
? How do you want to name App component? Header
? In which folder do you want to put Header component? src/components/Header

So that all component files are automatically generated. 

Header.js in the components folder
is created Header component. Delete CSS import, because we have been introduced onto the App.js

 

import {

IonHeader ,

IonTitle ,

IonToolbar

} from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

class Header extends Component {

render () {

  return (

   < IonHeader >

     < IonToolbar color = " danger " >

     < IonTitle >My Navigation Bar </ IonTitle >

   </ IonToolbar >

  </ IonHeader >

) ;

}

}

exportdefaultHeader;

Based on the title of the  copy footer components

react-ionic-app$ generact
? Which component do you want to replicate? Header
? How do you want to name Header component? Footer
? In which folder do you want to put Footer component? src/components

Footer.js
Its design IonFooter assembly.

import{IonFooter,IonTitle,IonToolbar}from'@ionic/react';

import React , { Component } from ' react ' ;

class Footer extends Component {

render () {

   return (

    < IonFooter >

     < IonToolbar color = " primary " >

     < IonTitle >Footer </ IonTitle >

     </ IonToolbar >

   </ IonFooter >

  ) ;

}

}

exportdefaultFooter;

Home is generated
using generact Header component duplication homepage.

react-ionic-app$ generact
? Which component do you want to replicate? Header
? How do you want to name Header component? Home
? In which folder do you want to put Home component? src/pages

Home.js
包含页面内容。

import{

IonCard ,

IonCardHeader ,

IonCardTitle ,

IonContent

} from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

class Home extends Component {

render () {

   return (

     < IonContent >

       < IonCard >

       < IonCardHeader >

       < IonCardTitle >Welcome to Home Page </ IonCardTitle >

       </ IonCardHeader >

      </ IonCard >

     </ IonContent >

   ) ;

}

}

export default Home ;

 

其他页面也是如此。 

react-ionic-app$ generact
? Which component do you want to replicate? Home
? How do you want to name Home component? Settings
? In which folder do you want to put Settings component? src/pages

react-ionic-app$ generact
? Which component do you want to replicate? Home
? How do you want to name Home component? About
? In which folder do you want to put About component? src/pages

使用Ionic Components构建

App.js
现在导入所有组件，而 不是IonApp 。

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

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

import { IonApp } from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

import Footer from ' ./components/Footer/Footer ' ;

import Header from ' ./components/Header/Header ' ;

import Home from ' ./pages/Home/Home ' ;

class App extends Component {

render () {

     return (

       < IonApp >

         < Header />

         < Home />

         < Footer />

      </ IonApp >

    ) ;

}

}

exportdefaultApp;

您将找到Home组件的输出。


使用路由
现在我们需要使用路由连接所有页面。

在项目 src 目录下创建routes.js配置文件。

routes.js
使用React路由连接组件。这里路径*指的是404页面。

importReactfrom'react';

import { BrowserRouter , Switch , Route } from ' react-router-dom ' ;

import Home from ' ./pages/Home/Home ' ;

import About from ' ./pages/About/About ' ;

import Settings from ' ./pages/Settings/Settings ' ;
import NoPage from './pages/NoPage/NoPage';

const Routes = () => (

< BrowserRouter >

   < Switch >

      < Route exact path = " / " component ={Home } />

      < Route exact path = " /about " component ={About } />
      <Route exact path="/settings" component={Settings} />

      < Route exact path = " * " component ={NoPage } />

</ Switch >

</ BrowserRouter >

) ;

exportdefaultRoutes;

App.js
现在在主App页面中包含Routes。默认route加载主页。

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

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

import { IonApp } from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

import Footer from ' ./components/Footer/Footer ' ;

import Header from ' ./components/Header/Header ' ;

import Routes from ' ./routes ' ;

class App extends Component {

render () {

     return (

       < IonApp >

       < Header />

       < Routes />

       < Footer />

       </ IonApp >

    ) ;

}

}

export default App ;

Home.js
要导航到其他页面，请使用 链接 组件进行重定向。

import{

IonCard ,

IonCardHeader ,

IonCardTitle ,

IonContent

} from ' @ionic/react ' ;

import React , { Component } from ' react ' ;

import { Link } from ' react-router-dom ' ;

class Home extends Component {

render () {

      return (

        < IonContent >

        < IonCard >

        < IonCardHeader >

        < IonCardTitle >Welcome to Home Page </ IonCardTitle >

          < Link to = " /about " >About </ Link >

         < Link to = " /settings " >Settings </ Link >

       </ IonCardHeader >

        </ IonCard >

       </ IonContent >

     ) ;

}

}

export default Home ;

 

使用Capacitor - 构建移动应用程序
您需要使用以下插件将Web项目转换为移动应用程序。

npm install --save @capacitor/core @capacitor/cli

构建Web项目
您必须构建用于创建移动应用程序的Web项目。

npm run build
或者
yarn build

初始化Capacitor
命令 npx cap init 创建配置文件。修改webDir来 构建 ，而不是 www  

iOS项目
以下命令为Xcode生成iOS支持文件。

react-ionic-app$ npx cap add ios
✔ Installing iOS dependencies in 20.32s
✔ Adding native xcode project in: /react-ionic-app/ios in 37.37ms
✔ add in 20.36s
✔ Copying web assets from build to ios/App/public in 712.87ms
✔ Copying native bridge in 4.76ms
✔ Copying capacitor.config.json in 2.28ms
✔ copy in 731.23ms
✔ Updating iOS plugins in 2.25ms
Found 0 Capacitor plugins for ios:
✖ Updating iOS native dependencies:
✖ update ios:
[error] Error running update: [!] Unknown installation options: disable_input_output_paths.

更新Cocoapods

如果您收到“Updating iOS native dependencies”问题。

$pod repo update

CocoaPods 1.7.0.rc.1 is available.
To update use: `sudo gem install cocoapods --pre`
[!] This is a test version we'd love you to try.

sudo gem install cocoapods --pre

react-ionic-app$ npx cap update ios
✔ Updating iOS plugins in 12.39ms
Found 0 Capacitor plugins for ios:
✔ Updating iOS native dependencies in 9.81s
✔ update ios in 9.84s
Update finished in 9.871s

Android项目
以下命令生成Android SDK文件。

react-ionic-app$ npx cap add android

✔ Installing android dependencies in 28.66s
✔ Adding native android project in: /react-ionic-app/android in 75.12ms
✔ Syncing Gradle in 51.01s
✔ add in 79.75s
✔ Copying web assets from build to android/app/src/main/assets/public in 677.46ms
✔ Copying native bridge in 2.39ms
✔ Copying capacitor.config.json in 1.53ms
✔ copy in 701.45ms
✔ Updating Android plugins in 2.77ms
Found 0 Capacitor plugins for android:
✔ update android in 27.06ms

Elector Desktop Project
这将生成桌面SDK文件。

react-ionic-app$ npx cap add electron
✔ Adding Electron project in: /react-ionic-app/electron in 17.66ms
⠋ Installing NPM DependenciesInstalling NPM Dependencies...
⠴ addyarn install v1.16.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 36.18s.

warning electron > electron-download > nugget > progress-stream > through2 > xtend > [email protected]:

NPM Dependencies installed!
✔ Installing NPM Dependencies in 36.58s
✔ add in 36.60s
⠋ Copying web assets from build to electron/appCleaning /Users/SrinivasTamada/Desktop/projects/react-ionic-app/electron/app...
Copying web assets...
✔ Copying web assets from build to electron/app in 1.07s
✔ Copying capacitor.config.json in 2.23ms
✔ copy in 1.08s
✔ update electron in 682.89μp

更新移动包
使用以下sync命令更新具有最新Web构建更新的移动包。

react-ionic-app$ npx cap sync
✔ Copying web assets from build to android/app/src/main/assets/public in 609.50ms
✔ Copying native bridge in 2.68ms
✔ Copying capacitor.config.json in 1.54ms
✔ copy in 634.23ms
✔ Updating Android plugins in 2.04ms
Found 0 Capacitor plugins for android:
✔ update android in 19.84ms
✔ Copying web assets from build to ios/App/public in 491.27ms
✔ Copying native bridge in 1.29ms
✔ Copying capacitor.config.json in 2.72ms
✔ copy in 502.19ms
✔ Updating iOS plugins in 1.94ms
Found 0 Capacitor plugins for ios:
✔ Updating iOS native dependencies in 15.03s
✔ update ios in 15.04s
⠋ Copying web assets from build to electron/appCleaning /react-ionic-app/electron/app...
⠙ Copying web assets from build to electron/appCopying web assets...
✔ Copying web assets from build to electron/app in 610.96ms
✔ Copying capacitor.config.json in 5.15ms
✔ copy in 619.52ms
✔ update electron in 19.43μp
✔ copy in 336.19μp
✔ update web in 17.34μp
Sync finished in 16.839s

Build iOS applications
command built in accordance with the implementation of Xcode.

$ npx cap open ios

Build Android applications
using the Android SDK Android open building>

$npx cap open android

Electron build desktop applications
Open Electron build.

 

$npx cap open android