Skip to content

Commit 32b0976

Browse files
thetaPCthetaPC
committed
docs(react): update your first app page
1 parent 26ed242 commit 32b0976

File tree

1 file changed

+77
-57
lines changed

1 file changed

+77
-57
lines changed

‎docs/react/your-first-app.md‎

Lines changed: 77 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ 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: React Development Tutorial</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="Ionic's single codebase builds for any platform using just HTML, CSS, & JavaScript. Develop your first mobile app with our step-by-step React tutorial."
1111
/>
1212
</head>
1313

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

5049
## Install Ionic Tooling
5150

@@ -97,8 +96,6 @@ It's a separate dependency, so install it next:
9796
npm install @ionic/pwa-elements
9897
```
9998

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

104101
```tsx
@@ -108,7 +105,7 @@ import App from './App';
108105
// CHANGE: Add the following import.
109106
import { defineCustomElements } from '@ionic/pwa-elements/loader';
110107

111-
// CHANGE: Call the element loader before the render call
108+
// CHANGE: Call the element loader before the render call.
112109
defineCustomElements(window);
113110

114111
const container = document.getElementById('root');
@@ -124,7 +121,7 @@ That’s it! Now for the fun part - let’s see the app in action.
124121

125122
## Run the App
126123

127-
Run this command in your shell:
124+
Run this command next:
128125

129126
```shell
130127
ionic serve
@@ -141,30 +138,45 @@ There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perf
141138
Open `/src/pages/Tab2.tsx`. We see:
142139

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

156-
`IonHeader` represents the top navigation and toolbar, with "Tab 2" as the title. Let’s rename it:
168+
`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#collapsible-large-titles) support). Let’s rename both `IonTitle` elements to:
157169

158170
```tsx
159171
<IonTitle>Photo Gallery</IonTitle>
160172
```
161173

162-
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) to the bottom of the page and set the camera image as the icon.
174+
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) (FAB) to the bottom of the page and set the camera image as the icon.
163175

164176
```tsx
165177
// CHANGE: Add the following import.
166178
import { camera, trash, close } from 'ionicons/icons';
167-
// CHANGE: Add the following import.
179+
// CHANGE: Update the following import.
168180
import {
169181
IonContent,
170182
IonHeader,
@@ -180,34 +192,41 @@ import {
180192
IonImg,
181193
IonActionSheet,
182194
} from '@ionic/react';
183-
import ExploreContainer from '../components/ExploreContainer';
195+
// CHANGE: Remove or comment out `ExploreContainer`.
196+
// import ExploreContainer from '../components/ExploreContainer';
184197
import './Tab2.css';
185198

186199
const Tab2: React.FC = () => {
187200
return (
188201
<IonPage>
189202
<IonHeader>
190203
<IonToolbar>
191-
<IonTitle>Tab 2</IonTitle>
204+
<IonTitle>Photo Gallery</IonTitle>
192205
</IonToolbar>
193206
</IonHeader>
194-
<!-- CHANGE: Add the floating action button. -->
195207
<IonContent>
208+
<IonHeader collapse="condense">
209+
<IonToolbar>
210+
<IonTitle size="large">Photo Gallery</IonTitle>
211+
</IonToolbar>
212+
</IonHeader>
213+
{/* CHANGE: Add the floating action button. */}
196214
<IonFab vertical="bottom" horizontal="center" slot="fixed">
197-
<IonFabButton onClick={() => takePhoto()}>
215+
<IonFabButton>
198216
<IonIcon icon={camera}></IonIcon>
199217
</IonFabButton>
200218
</IonFab>
201219
</IonContent>
202-
<!-- END OF CODE BLOCK -->
220+
{/* CHANGE: Remove or comment out `ExploreContainer`. */}
221+
{/* <ExploreContainer name="Tab 2 page" /> */}
203222
</IonPage>
204223
);
205224
};
206225

207226
export default Tab2;
208227
```
209228

210-
Next, open `src/App.tsx`, remove the `ellipse` icon from the import and import the `images` icon instead:
229+
Next, open `src/App.tsx` and replace the imported `ellipse` icon with the `images` icon.
211230

212231
```tsx
213232
import { images, square, triangle } from 'ionicons/icons';
@@ -217,42 +236,43 @@ Within the tab bar (`<IonTabBar>`), change the label to “Photos” and the `el
217236

218237
```tsx
219238
// Keep other imports
220-
// CHANGE: Add the following import.
239+
// CHANGE: Update the following import.
221240
import { images, square, triangle } from 'ionicons/icons';
222241

223242
const App: React.FC = () => (
224243
<IonApp>
225244
<IonReactRouter>
226245
<IonTabs>
227-
<IonRouterOutlet>
228-
<Route exact path="/tab1">
229-
<Tab1 />
230-
</Route>
231-
<Route exact path="/tab2">
232-
<Tab2 />
233-
</Route>
234-
<Route path="/tab3">
235-
<Tab3 />
236-
</Route>
237-
<Route exact path="/">
238-
<Redirect to="/tab1" />
239-
</Route>
240-
</IonRouterOutlet>
241-
<IonTabBar slot="bottom">
242-
<IonTabButton tab="tab1" href="/tab1">
243-
<IonIcon aria-hidden="true" icon={triangle} />
244-
<IonLabel>Tab 1</IonLabel>
245-
</IonTabButton>
246-
<!-- CHANGE: The label to `Photos` and the `ellipse` icon to `images` -->
247-
<IonTabButton tab="tab2" href="/tab2">
248-
<IonIcon icon={images} />
246+
<IonRouterOutlet>
247+
<Route exact path="/tab1">
248+
<Tab1 />
249+
</Route>
250+
<Route exact path="/tab2">
251+
<Tab2 />
252+
</Route>
253+
<Route path="/tab3">
254+
<Tab3 />
255+
</Route>
256+
<Route exact path="/">
257+
<Redirect to="/tab1" />
258+
</Route>
259+
</IonRouterOutlet>
260+
<IonTabBar slot="bottom">
261+
<IonTabButton tab="tab1" href="/tab1">
262+
<IonIcon aria-hidden="true" icon={triangle} />
263+
<IonLabel>Tab 1</IonLabel>
264+
</IonTabButton>
265+
<IonTabButton tab="tab2" href="/tab2">
266+
{/* CHANGE: Update icon. */}
267+
<IonIcon aria-hidden="true" icon={images} />
268+
{/* CHANGE: Update label. */}
249269
<IonLabel>Photos</IonLabel>
250-
</IonTabButton>
251-
<IonTabButton tab="tab3" href="/tab3">
252-
<IonIcon aria-hidden="true" icon={square} />
253-
<IonLabel>Tab 3</IonLabel>
254-
</IonTabButton>
255-
</IonTabBar>
270+
</IonTabButton>
271+
<IonTabButton tab="tab3" href="/tab3">
272+
<IonIcon aria-hidden="true" icon={square} />
273+
<IonLabel>Tab 3</IonLabel>
274+
</IonTabButton>
275+
</IonTabBar>
256276
</IonTabs>
257277
</IonReactRouter>
258278
</IonApp>

0 commit comments

Comments
 (0)