Developing Mobile Apps with Ionic and React/

...

/

Guided Tour of the Ionic-React Code

Guided Tour of the Ionic-React Code

Break down the components and files of the Ionic-react project in this lesson.

We'll cover the following...

For this tour, have a look at the code we generated in the previous lesson for reference:

iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAilBMVEVHcExH
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9H
iv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9Hiv9W
kbhyAAAALXRSTlMA6fH5rdwnAiEH0+btgEEEhIdflMmPDhUatIxwnWlXMNV1
EEtIpjajv9fMK6VUL25nAAACmklEQVRYw61X6ZqqMAwFpqwFZBXZdNDRcWbk
/V/vYsvSlrL25oefHzQhPTk5TSWJb7p29kGkQtuGagT8s6ZLG+zgxtZHTdmH
FbuHle6nyqq5ZlWnFe6JJ9eTZmfHBXe9hPWcxea8/9+T3risWpYqD3A470Va
GWeBwfUPlMEZgtw1rqaum1fDzQFKLG3WXAsUT/E5uWS9t/J9YzZ7vH0rtdb4
R92alI1g3nuofG6C2rn5eQ05+ow/6F4UxjRIDxIhap3efV+9zaHskRiXvP2n
81wBVE1J/Ntn4QLlqQAhgU9bv2yJpxkZIB8AeI5CTphLgqj1j8t2/8stq6dD
gGLoH9w+arKi1wy184+ubG2+RrJwCZwwdIILKQRGm8Nr+FxiMxm1K51eFiyH
5IybAeA93v9y/LjC9KcJYDo2JQQOp3ecukJLPznM1iJWCSKNbf2GE59mXxk6
gQdHVuCDyhB3tdv8jTEm1Pe5sgSpHNKOzbo1KoH5y9ezXxKHLwzvQdJQKvBI
gTNhDqkwsGXjGb0CZP2UqQCKMeqrs+QzfTGTAJ1C3hYPB3IJBH6mA/yYbF8B
KWLV6TJ3LlyInSLwIgk1h3wcawvXAgJF1IKqhMBUzQnZY80jtoo+DSVEeYtQ
gnAuACE5mEC2eADhLQiDKFxGYSIJU1m4mYTbWVBQ9N2S9uoP6H2ielL66u2T
dVw8JOu7DpY2gWrX0fa2AodNdhyuRAn61tpyvGMHfMbLyfYBg5oyyh0jDik5
T33HkEUMWgpV17VjXpNtONaWDYOmdOqmLDbZlaPurZux7qNU1wzbRtGtAZyJ
Z3HcN/ye3XdzYY6duHDU9UKxlq48bfRg/6UL8edP5NpXw3KJKbMXT9lb03CC
V9//cPnedv3/B03WKCmdQSV1AAAAAElFTkSuQmCC
Your First Ionic App

index.tsx

Let’s start the tour by opening the file index.tsx. Note that we have shortened the file from what it is in the app just to highlight the most important parts. This is the logical top of the application.

Press + to interact
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
 
ReactDOM.render(<App />, document.getElementById('root'));

Line 1: At the top of the file, you can see an import statement for the react and react-dom libraries. Every app needs to import the React namespace in order to use React.

Line 2: The ReactDOM namespace provides methods specific to the HTML document object model that should be called from the top-most level of the application.

Line 3: The App import is pulling in the definition of the application itself.

Line 6: Calling ReactDOM.render() says to execute the App Component and place it inside the container specified by the second parameter. That container is an HTML element whose id attribute is root, which is in the index.html file, found in the public folder.

index.html

Here is the complete index.html file.

Press + to interact
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>
 
  <base href="/" />
 
  <meta name="color-scheme" content="light dark" />
  <meta name="viewport"
    content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
 
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
 
  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="Ionic App" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
 
<body>
  <div id="root"></div>
</body>
 
</html>

There are many meta tags in the <head>, which primarily control how the application will render on mobile devices. The folks at Ionic have already done the hard ...