Skip to content

Commit 524ad6a

Browse files
thetaPCthetaPC
committed
docs(react): update your first app pages for v7
1 parent 9788859 commit 524ad6a

File tree

8 files changed

+1024
-306
lines changed

8 files changed

+1024
-306
lines changed

‎versioned_docs/version-v7/react/your-first-app.md‎

Lines changed: 147 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@ sidebar_label: Build Your First App
44
---
55

66
<head>
7-
<title>React Apps | Build Your First Ionic Framework React Application</title>
7+
<title>Build Your First Ionic Mobile App with React | Ionic Capacitor Camera</title>
88
<meta
99
name="description"
10-
content="Build your first Ionic React App. With one codebase, you can build an Ionic Framework application for any platform using just HTML, CSS, and JavaScript."
10+
content="This React tutorial teaches the fundamentals of Ionic app development by creating a realistic app step-by-step. Learn to run your first Ionic app with React."
1111
/>
1212
</head>
1313

14+
# Your First Ionic App: React
15+
1416
The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
1517

1618
Here’s the finished app running on all 3 platforms:
@@ -19,9 +21,9 @@ Here’s the finished app running on all 3 platforms:
1921
width="560"
2022
height="315"
2123
src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
22-
frameborder="0"
24+
frameBorder="0"
2325
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
24-
allowfullscreen
26+
allowFullScreen
2527
></iframe>
2628
2729
## What We'll Build
@@ -30,11 +32,11 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
3032

3133
Highlights include:
3234

33-
- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
35+
- One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md).
3436
- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
35-
- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
37+
- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs.
3638

37-
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-react).
39+
Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-react) referenced in this guide on GitHub.
3840

3941
## Download Required Tools
4042

@@ -43,9 +45,8 @@ Download and install these right away to ensure an optimal Ionic development exp
4345
- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
4446
- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
4547
- **Command-line interface/terminal (CLI)**:
46-
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell
47-
CLI, running in Administrator mode.
48-
- **Mac/Linux** users, virtually any terminal will work.
48+
- **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode.
49+
- **Mac/Linux** users: virtually any terminal will work.
4950

5051
## Install Ionic Tooling
5152

@@ -67,7 +68,7 @@ Consider setting up npm to operate globally without elevated permissions. See [R
6768

6869
## Create an App
6970

70-
Next, create an Ionic React app that uses the “Tabs” starter template and adds Capacitor for native functionality:
71+
Next, create an Ionic React app that uses the "Tabs" starter template and adds Capacitor for native functionality:
7172

7273
```shell
7374
ionic start photo-gallery tabs --type=react --capacitor
@@ -89,30 +90,40 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
8990

9091
### PWA Elements
9192

92-
Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
93+
Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements).
9394

9495
It's a separate dependency, so install it next:
9596

9697
```shell
9798
npm install @ionic/pwa-elements
9899
```
99100

100-
After installation, open up the project in your code editor of choice.
101-
102101
Next, import `@ionic/pwa-elements` by editing `src/main.tsx`.
103102

104103
```tsx
104+
import React from 'react';
105+
import { createRoot } from 'react-dom/client';
106+
import App from './App';
107+
// CHANGE: Add the following import.
105108
import { defineCustomElements } from '@ionic/pwa-elements/loader';
106109

107-
// Call the element loader before the render call
110+
// CHANGE: Call the element loader before the render call.
108111
defineCustomElements(window);
112+
113+
const container = document.getElementById('root');
114+
const root = createRoot(container!);
115+
root.render(
116+
<React.StrictMode>
117+
<App />
118+
</React.StrictMode>
119+
);
109120
```
110121

111122
That’s it! Now for the fun part - let’s see the app in action.
112123

113124
## Run the App
114125

115-
Run this command in your shell:
126+
Run this command next:
116127

117128
```shell
118129
ionic serve
@@ -122,35 +133,52 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
122133

123134
## Photo Gallery!!!
124135

125-
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
136+
There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
126137

127138
![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/react/first-app/live-reload.gif 'Live Reload Feature in Ionic App')
128139

129140
Open `/src/pages/Tab2.tsx`. We see:
130141

131142
```tsx
132-
<IonPage>
133-
<IonHeader>
134-
<IonToolbar>
135-
<IonTitle>Tab 2</IonTitle>
136-
</IonToolbar>
137-
</IonHeader>
138-
<IonContent>
139-
<!-- some filler -->
140-
</IonContent>
141-
</IonPage>
143+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
144+
import ExploreContainer from '../components/ExploreContainer';
145+
import './Tab2.css';
146+
147+
const Tab2: React.FC = () => {
148+
return (
149+
<IonPage>
150+
<IonHeader>
151+
<IonToolbar>
152+
<IonTitle>Tab 2</IonTitle>
153+
</IonToolbar>
154+
</IonHeader>
155+
<IonContent fullscreen>
156+
<IonHeader collapse="condense">
157+
<IonToolbar>
158+
<IonTitle size="large">Tab 2</IonTitle>
159+
</IonToolbar>
160+
</IonHeader>
161+
<ExploreContainer name="Tab 2 page" />
162+
</IonContent>
163+
</IonPage>
164+
);
165+
};
166+
167+
export default Tab2;
142168
```
143169

144-
`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
170+
`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
145171

146172
```tsx
147173
<IonTitle>Photo Gallery</IonTitle>
148174
```
149175

150-
We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports at the top of the page to include the Camera icon as well as some of the Ionic components we'll use shortly:
176+
We put the visual aspects of our app into `<IonContent>`. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon.
151177

152178
```tsx
179+
// CHANGE: Add the following import.
153180
import { camera, trash, close } from 'ionicons/icons';
181+
// CHANGE: Update the following import.
154182
import {
155183
IonContent,
156184
IonHeader,
@@ -166,39 +194,101 @@ import {
166194
IonImg,
167195
IonActionSheet,
168196
} from '@ionic/react';
197+
// CHANGE: Remove or comment out `ExploreContainer`.
198+
// import ExploreContainer from '../components/ExploreContainer';
199+
import './Tab2.css';
200+
201+
const Tab2: React.FC = () => {
202+
return (
203+
<IonPage>
204+
<IonHeader>
205+
<IonToolbar>
206+
<IonTitle>Photo Gallery</IonTitle>
207+
</IonToolbar>
208+
</IonHeader>
209+
<IonContent>
210+
<IonHeader collapse="condense">
211+
<IonToolbar>
212+
<IonTitle size="large">Photo Gallery</IonTitle>
213+
</IonToolbar>
214+
</IonHeader>
215+
{/* CHANGE: Add the floating action button. */}
216+
<IonFab vertical="bottom" horizontal="center" slot="fixed">
217+
<IonFabButton>
218+
<IonIcon icon={camera}></IonIcon>
219+
</IonFabButton>
220+
</IonFab>
221+
</IonContent>
222+
{/* CHANGE: Remove or comment out `ExploreContainer`. */}
223+
{/* <ExploreContainer name="Tab 2 page" /> */}
224+
</IonPage>
225+
);
226+
};
227+
228+
export default Tab2;
169229
```
170230

171-
Then, add the FAB to the bottom of the page. Use the camera image as the icon, and call the `takePhoto()` function when this button is clicked (to be implemented soon):
172-
173-
```tsx
174-
<IonContent>
175-
<IonFab vertical="bottom" horizontal="center" slot="fixed">
176-
<IonFabButton onClick={() => takePhoto()}>
177-
<IonIcon icon={camera}></IonIcon>
178-
</IonFabButton>
179-
</IonFab>
180-
</IonContent>
181-
```
182-
183-
We’ll be creating the `takePhoto` method and the logic to use the Camera and other native features in a moment.
184-
185-
Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
231+
Next, open `src/views/TabsPage.vue`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button.
186232

187233
```tsx
234+
import { Redirect, Route } from 'react-router-dom';
235+
import {
236+
IonApp,
237+
IonIcon,
238+
IonLabel,
239+
IonRouterOutlet,
240+
IonTabBar,
241+
IonTabButton,
242+
IonTabs,
243+
setupIonicReact,
244+
} from '@ionic/react';
245+
import { IonReactRouter } from '@ionic/react-router';
246+
// CHANGE: Update the following import.
188247
import { images, square, triangle } from 'ionicons/icons';
248+
import Tab1 from './pages/Tab1';
249+
import Tab2 from './pages/Tab2';
250+
import Tab3 from './pages/Tab3';
251+
252+
/* Ionic styles are not shown in this example to keep it brief but will be included in the Ionic package downloaded for your app. Do not remove them. */
253+
254+
const App: React.FC = () => (
255+
<IonApp>
256+
<IonReactRouter>
257+
<IonTabs>
258+
<IonRouterOutlet>
259+
<Route exact path="/tab1">
260+
<Tab1 />
261+
</Route>
262+
<Route exact path="/tab2">
263+
<Tab2 />
264+
</Route>
265+
<Route path="/tab3">
266+
<Tab3 />
267+
</Route>
268+
<Route exact path="/">
269+
<Redirect to="/tab1" />
270+
</Route>
271+
</IonRouterOutlet>
272+
<IonTabBar slot="bottom">
273+
<IonTabButton tab="tab1" href="/tab1">
274+
<IonIcon aria-hidden="true" icon={triangle} />
275+
<IonLabel>Tab 1</IonLabel>
276+
</IonTabButton>
277+
<IonTabButton tab="tab2" href="/tab2">
278+
{/* CHANGE: Update icon. */}
279+
<IonIcon aria-hidden="true" icon={images} />
280+
{/* CHANGE: Update label. */}
281+
<IonLabel>Photos</IonLabel>
282+
</IonTabButton>
283+
<IonTabButton tab="tab3" href="/tab3">
284+
<IonIcon aria-hidden="true" icon={square} />
285+
<IonLabel>Tab 3</IonLabel>
286+
</IonTabButton>
287+
</IonTabBar>
288+
</IonTabs>
289+
</IonReactRouter>
290+
</IonApp>
291+
);
189292
```
190293

191-
Within the tab bar (`<IonTabBar>`), change the label to “Photos” and the `ellipse` icon to `images` for the middle tab button:
192-
193-
```tsx
194-
<IonTabButton tab="tab2" href="/tab2">
195-
<IonIcon icon={images} />
196-
<IonLabel>Photos</IonLabel>
197-
</IonTabButton>
198-
```
199-
200-
:::note
201-
In Ionic React, icons are imported individually from `ionicons/icons` and set to the icon prop.
202-
:::
203-
204294
That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android.

0 commit comments

Comments
 (0)