Coding

Ionic + React – Tutorial for Beginners 2020

  • 00:00:00 hi and welcome to this course my name is
  • 00:00:02 Max and this course is about ionic and
  • 00:00:04 react to Awesome technologies which
  • 00:00:07 we're going to combine in this course to
  • 00:00:09 build cross-platform applications that
  • 00:00:11 means web apps and native mobile apps
  • 00:00:13 for Android and iOS now this course is
  • 00:00:16 packed with content and we'll dive into
  • 00:00:18 the different concepts step by step no
  • 00:00:21 prior ionic knowledge is required you
  • 00:00:23 will learn it all in this course you
  • 00:00:25 just a basic react knowledge you should
  • 00:00:26 know what react is and you should have
  • 00:00:28 heard about react hooks if you don't
  • 00:00:30 know that my react the complete guide
  • 00:00:32 course might be a great resource to take
  • 00:00:34 before this course so let's have a look
  • 00:00:36 at what will be in the course in this
  • 00:00:39 first module we're getting started I
  • 00:00:41 will introduce you to ionic why we use
  • 00:00:43 it give you a brief refresher on react
  • 00:00:47 and let you know how ionic and react
  • 00:00:49 work together so this is a super
  • 00:00:51 important module to make sure that we
  • 00:00:53 all have the right foundation right
  • 00:00:55 thereafter we'll dive into some ionic
  • 00:00:58 basics and with that I really mean just
  • 00:01:00 ionic because it turns out that ionic
  • 00:01:03 also works standalone and that something
  • 00:01:05 we'll have a closer look at in this
  • 00:01:07 second module but right after that we'll
  • 00:01:10 of course also combine ionic with react
  • 00:01:13 you will learn how these two amazing
  • 00:01:15 libraries work together and how you can
  • 00:01:17 use these two technologies to build
  • 00:01:19 amazing applications thus far will only
  • 00:01:23 have built web apps though as you will
  • 00:01:26 see by this point we only have a web app
  • 00:01:28 but we're all here because we also want
  • 00:01:30 to build mobile apps well no worries I
  • 00:01:32 got a whole module dedicated to that I
  • 00:01:35 will show you how you can turn your
  • 00:01:36 ionic and react web app into a real
  • 00:01:39 native mobile app for both iOS and
  • 00:01:42 Android so an app which really can be
  • 00:01:45 installed on real mobile devices now
  • 00:01:47 when you're writing code sometimes
  • 00:01:49 things go wrong
  • 00:01:50 so therefore we'll also have a module on
  • 00:01:53 debugging where you can learn how to
  • 00:01:54 find and fix errors and even if your app
  • 00:01:57 is error free you of course want to make
  • 00:01:59 sure it looks good and it incorporates
  • 00:02:01 your corporate identity or a common
  • 00:02:04 theme ionic gives you rich tools for
  • 00:02:06 debt and we have a whole module in this
  • 00:02:08 course where we will dive in detail into
  • 00:02:11 the different styling and theming
  • 00:02:12 options ionic
  • 00:02:14 you now since our main goal is to build
  • 00:02:17 mobile apps with web technologies we of
  • 00:02:20 course also have to find out how we can
  • 00:02:23 get native mobile navigation patterns
  • 00:02:26 into our app I'm talking about things
  • 00:02:28 like tabs a side drawer or a push and
  • 00:02:31 pop navigation there is a whole module
  • 00:02:33 on that of course where you will learn
  • 00:02:35 how you can add those navigation
  • 00:02:37 patterns easily into your ionic react
  • 00:02:39 app and you will also see that they look
  • 00:02:42 good out of the box now up to this point
  • 00:02:45 we'll have learned a lot about ionic and
  • 00:02:47 react
  • 00:02:48 therefore dad will be when we dive way
  • 00:02:50 deeper into ionic into its component
  • 00:02:52 library and explore the many components
  • 00:02:55 it offers you will see how you can use
  • 00:02:57 those components where you can learn
  • 00:02:58 more about them and how you can
  • 00:03:00 configure them of course most apps don't
  • 00:03:03 just have nice components and a nice
  • 00:03:05 look and feel but you also want to
  • 00:03:07 interact with your users now there will
  • 00:03:09 be a module where you learn how to
  • 00:03:11 handle user input how to validate it and
  • 00:03:14 how to manage your application State
  • 00:03:16 this is also where you will really see
  • 00:03:18 which parts are controlled by react and
  • 00:03:21 which parts are controlled by ionic now
  • 00:03:24 as I mentioned before we want to build
  • 00:03:26 real mobile apps right so of course you
  • 00:03:29 will all learn in this course how you
  • 00:03:30 can use native device features like the
  • 00:03:33 device camera or the file system to
  • 00:03:35 store data and best of all you will not
  • 00:03:38 just learn how to do that on Android or
  • 00:03:40 iOS devices but you will learn how you
  • 00:03:42 can easily set this up so that it works
  • 00:03:45 across all platforms including the web
  • 00:03:47 yes we will be able to use the device
  • 00:03:50 camera in a web browser now of course by
  • 00:03:54 that point you will have learned a lot
  • 00:03:55 about ionic and react and it's super
  • 00:03:58 important that you don't just know which
  • 00:04:00 features exist but that you also build
  • 00:04:02 apps that follow common patterns and
  • 00:04:04 practices and that are optimized which
  • 00:04:07 is why I added a whole module where we
  • 00:04:09 dive deeply into a app optimizations and
  • 00:04:12 explore how we can optimize our code to
  • 00:04:14 make sure we're shipping the best
  • 00:04:16 possible application to our users and
  • 00:04:18 speaking of shipping apps of course this
  • 00:04:21 course comes with a publishing module
  • 00:04:24 where you will learn how you can publish
  • 00:04:26 your app as a
  • 00:04:27 webapp onto a server or as an android
  • 00:04:29 app to the Google Play Store or as an
  • 00:04:31 iOS app to the Apple App Store so loads
  • 00:04:34 of content included and with that let's
  • 00:04:36 start and let's dive into the most
  • 00:04:38 important question first what exactly is
  • 00:04:41 ionic and why do we use it
  • 00:04:54 so what is ionic ionic is two things
  • 00:04:59 actually it's a web component library
  • 00:05:02 and it's also the name of a company the
  • 00:05:05 company behind that library now to make
  • 00:05:08 sure we're all on the same page
  • 00:05:10 I should probably clarify what web
  • 00:05:13 components are again web components are
  • 00:05:16 a custom HTML elements in the end so you
  • 00:05:20 can build your own HTML elements and you
  • 00:05:23 can do that on your own with JavaScript
  • 00:05:25 if you're interested I got a course on
  • 00:05:27 that too totally independent from this
  • 00:05:29 course totally independent from ionic
  • 00:05:31 but you can use vanilla JavaScript to
  • 00:05:34 build these custom HTML elements which
  • 00:05:37 you can then use in your page or on your
  • 00:05:39 page and ionic is just a collection of
  • 00:05:42 pre-built web components now these web
  • 00:05:45 components ionic offers you look
  • 00:05:48 gorgeous they are absolutely stunning
  • 00:05:50 they also look very professional and
  • 00:05:53 their exact look changes depending on
  • 00:05:57 which platform your web application is
  • 00:05:59 being served for so if you're visiting a
  • 00:06:02 web page let's say on your Android phone
  • 00:06:04 it would look very Android following the
  • 00:06:07 typical Android style and if you would
  • 00:06:10 visit it on an iOS device you would have
  • 00:06:13 a more I Wes ish look off that web app
  • 00:06:17 so the look and feel automatically
  • 00:06:19 adjusts and that's important the look
  • 00:06:21 and feel because we're not just talking
  • 00:06:23 about a different look but also the
  • 00:06:25 animations behave differently and look
  • 00:06:28 differently now
  • 00:06:30 with ionic with these ionic web
  • 00:06:32 components you can therefore build
  • 00:06:34 beautiful native device like web apps so
  • 00:06:38 we're still talking about web
  • 00:06:40 applications here normal web sites or
  • 00:06:43 the front end of normal web sites but
  • 00:06:45 with very little effort with very little
  • 00:06:48 custom styling rules and HTML structure
  • 00:06:51 you will get a great looking web
  • 00:06:53 application you would still write all
  • 00:06:56 the logic you want to add with regular
  • 00:06:58 JavaScript with or without any framework
  • 00:07:01 now the cool thing is ionic as a company
  • 00:07:05 has not just worked on that
  • 00:07:07 web component library but all the
  • 00:07:09 released another technology another tool
  • 00:07:12 which is called capacitor now capacitor
  • 00:07:16 works really really well together with
  • 00:07:18 the die on ik web component library
  • 00:07:21 capacitor is a tool which allows you to
  • 00:07:24 turn any web app into a mobile or
  • 00:07:28 actually into a cross-platform app which
  • 00:07:31 you can serve as a native app on iOS and
  • 00:07:33 Android as a native desktop app or also
  • 00:07:36 still as a weapon and I'm really talking
  • 00:07:39 about native apps here iOS or Android
  • 00:07:42 apps created with help of that capacitor
  • 00:07:44 tool would really be distributed in the
  • 00:07:47 respective app stores so I'm not talking
  • 00:07:50 about apps that look like native apps
  • 00:07:52 I'm talking about real native apps you
  • 00:07:55 can think of capacitor as a wrapper
  • 00:07:57 around your HTML CSS JavaScript web
  • 00:08:01 application the front-end web
  • 00:08:04 application which normally would run in
  • 00:08:05 a browser and with that capacitor tool
  • 00:08:08 with that wrapper you actually produce
  • 00:08:10 real native apps which you can upload 2d
  • 00:08:14 respective app stores so that users can
  • 00:08:17 get them from there and therefore these
  • 00:08:19 two tools developed by the same company
  • 00:08:22 ionic work together really well because
  • 00:08:25 with both combined you can build
  • 00:08:27 beautiful native device like web apps
  • 00:08:31 which you then convert into real
  • 00:08:32 cross-platform apps with capacitor and
  • 00:08:36 that's ionic now a brief word about the
  • 00:08:39 history of ionic in previous versions
  • 00:08:42 version 1 and 2 of ionic it was
  • 00:08:46 basically one tool that had these custom
  • 00:08:48 components these custom elements back
  • 00:08:51 then only for the angular fronted
  • 00:08:53 framework and it had the portability to
  • 00:08:57 build cross-platform apps also kind of
  • 00:08:59 built in since ionic 4 we have a split
  • 00:09:02 and since then we really have that web
  • 00:09:04 component library and that capacitor
  • 00:09:06 tool where both work independently but
  • 00:09:10 where we get the most out of them by
  • 00:09:11 letting them work together
  • 00:09:17 so we know what ionic is and we heard
  • 00:09:19 about capacitor why would we use that
  • 00:09:23 well if we only think about ionic the
  • 00:09:27 great benefit is that we get great
  • 00:09:29 looking apps with very little effort we
  • 00:09:32 don't have to do much because we get all
  • 00:09:35 the Styles all the HTML structure out of
  • 00:09:37 the box and we just have to compose a
  • 00:09:40 user interface with these web components
  • 00:09:42 we get by ionic so we can focus on our
  • 00:09:45 core business logic which means the
  • 00:09:48 logic that really makes up our
  • 00:09:49 application which we typically write in
  • 00:09:51 JavaScript and we don't have to focus as
  • 00:09:54 much on the styling and the HTML
  • 00:09:56 structure now you can use ionic stand
  • 00:09:59 alone without capacitor if all you want
  • 00:10:02 is a web app that looks good you can use
  • 00:10:04 ionic to achieve that you can also use
  • 00:10:07 capacitor stand alone without a onic and
  • 00:10:10 then you can wrap it around any
  • 00:10:12 JavaScript HTML CSS web app and turn
  • 00:10:15 that into a cross-platform app which
  • 00:10:17 makes it easy to distribute that app to
  • 00:10:21 all major platforms without having to
  • 00:10:24 know anything about mobile development
  • 00:10:26 and that's the big plus of capacitor you
  • 00:10:30 don't have to learn Java and the android
  • 00:10:32 framework you don't have to learn
  • 00:10:34 Objective C and Swift to build iOS apps
  • 00:10:36 you don't have to learn C++ to build
  • 00:10:39 desktop apps instead you take what you
  • 00:10:43 already know you leverage your web
  • 00:10:45 development knowledge and you build a
  • 00:10:47 web app which you then with the help of
  • 00:10:49 capacitor ship to the iOS App Store to
  • 00:10:54 the Android Play Store with the Apple
  • 00:10:56 fan installer as a desktop app and of
  • 00:10:58 course if you want still as a web app
  • 00:11:00 hosted on some server so whilst you can
  • 00:11:03 use each tool standalone combined you
  • 00:11:07 really have the best of both worlds and
  • 00:11:09 you can build native mobile apps with
  • 00:11:11 your existing web development knowledge
  • 00:11:13 and you can do that really really
  • 00:11:16 quickly as you will also see in this
  • 00:11:18 course now therefore in this course I
  • 00:11:21 focus on this combination I will also
  • 00:11:24 dive into ionic standalone and
  • 00:11:27 capacitors standalone will be
  • 00:11:29 self-explanatory by the time we
  • 00:11:31 in this course but you really are able
  • 00:11:33 to build the most amazing applications
  • 00:11:35 if you combine these technologies and
  • 00:11:38 then using ionic with capacitor is a
  • 00:11:41 great alternative to learning Java for
  • 00:11:45 Android and Swift and objective-c for
  • 00:11:47 iOS development or anything like that
  • 00:11:50 because you don't have to do that you
  • 00:11:52 take what you know and you build for all
  • 00:11:54 platforms
  • 00:11:58 so we know that ionic is great and
  • 00:12:00 capacitor is great and the combination
  • 00:12:03 is really amazing now what about react
  • 00:12:05 because that's an ionic react course why
  • 00:12:08 do we need react and all of that well we
  • 00:12:11 don't need it you don't need a front-end
  • 00:12:13 framework or library like react to build
  • 00:12:16 apps with ionic and capacitor they work
  • 00:12:18 totally independent of any framework you
  • 00:12:22 don't need react you don't need angular
  • 00:12:24 or view or anything like that you could
  • 00:12:26 build such a cross-platform app with
  • 00:12:29 just ionic and capacitor and vanilla
  • 00:12:31 JavaScript your own HTML structure and
  • 00:12:34 your own CSS Styles but using one of
  • 00:12:39 these major frameworks makes riding real
  • 00:12:43 apps much easier and with real apps I
  • 00:12:46 mean realistic apps bigger apps and if
  • 00:12:48 you think about it you don't need
  • 00:12:51 angular or react or you to build normal
  • 00:12:54 web apps either you could do that with
  • 00:12:56 just HTML CSS and JavaScript we do use
  • 00:13:00 these major frameworks and libraries to
  • 00:13:03 make that easier for us as developers so
  • 00:13:06 that we can focus on on the core logic
  • 00:13:09 that makes up our application and we
  • 00:13:11 don't have to manage all the
  • 00:13:13 nitty-gritty details about showing or
  • 00:13:15 hiding elements adding elements
  • 00:13:17 dynamically on the page showing modal's
  • 00:13:20 manually we don't want to write all that
  • 00:13:22 code on our own as a developer we want
  • 00:13:24 to focus on the real things that make up
  • 00:13:26 our application on the complex things on
  • 00:13:29 creating rich user interfaces and user
  • 00:13:32 experiences and that's why we use
  • 00:13:35 libraries or frameworks like react or
  • 00:13:38 angular or view in non ionic and non
  • 00:13:41 capacitor apps as well and for the same
  • 00:13:44 reasons we use these libraries there we
  • 00:13:46 can add them cue an ionic capacitor app
  • 00:13:48 to build even more amazing applications
  • 00:13:51 with ionic and capacitor and react or
  • 00:13:54 angular or view in no time and ionic
  • 00:13:57 does really work with any fronted
  • 00:13:59 library or no library at all as I
  • 00:14:02 mentioned you don't need one but you can
  • 00:14:04 therefore use it with react angular view
  • 00:14:06 whatever you want and I do have an ionic
  • 00:14:09 angular course as well in case you want
  • 00:14:11 to learn
  • 00:14:11 that combination besides the combination
  • 00:14:14 we have in this course which of course
  • 00:14:15 is ionic with react so long story short
  • 00:14:18 we don't need react but using it makes
  • 00:14:20 our life as a developer much easier for
  • 00:14:23 the same reasons why we use it in non
  • 00:14:25 ionic apps and as you will see the
  • 00:14:28 combination of ionic capacitor and react
  • 00:14:31 is really really amazing and makes it so
  • 00:14:34 fun to build awesome cross-platform apps
  • 00:14:41 so now that we know all these building
  • 00:14:43 blocks how do they work together how
  • 00:14:45 does a typical ionic project look like
  • 00:14:48 so we're building an app and when I say
  • 00:14:51 app I really mean a cross-platform app
  • 00:14:54 we're building a web app and an iOS app
  • 00:14:57 and an Android app and we want to do
  • 00:14:59 that all with one code base and only
  • 00:15:01 with web development technologies we
  • 00:15:04 don't want to do that with Java or
  • 00:15:06 Objective C we just want to use HTML
  • 00:15:08 Javascript and CSS so of course we can
  • 00:15:11 write that code on our own we can write
  • 00:15:13 our own HTML CSS and JavaScript code and
  • 00:15:15 we would have a fully functional web app
  • 00:15:17 we could serve that on a web server and
  • 00:15:20 we would be good to go now when it comes
  • 00:15:23 to JavaScript as I mentioned before we
  • 00:15:25 want to make our life a little bit
  • 00:15:27 easier we want to focus on the difficult
  • 00:15:29 parts and that's why we would probably
  • 00:15:31 add a framework like react or a library
  • 00:15:34 like react in this case or a framework
  • 00:15:36 like angular or view now it's totally
  • 00:15:38 optional you don't need Ted to build a
  • 00:15:40 web app but often you will add it so
  • 00:15:42 that you can build more amazing web apps
  • 00:15:44 now with that we have a regular web app
  • 00:15:47 with HTML CSS JavaScript and react now
  • 00:15:51 of course this is an ionic course and
  • 00:15:53 for all the reasons I mentioned we want
  • 00:15:54 to add this ionic component framework
  • 00:15:57 and here I'm really just talking about
  • 00:15:59 the web components not about capacitor
  • 00:16:01 we add that so that we have to write
  • 00:16:04 less HTML and CSS because we get more
  • 00:16:07 pre-styled widgets you could say more
  • 00:16:10 pre-styled
  • 00:16:11 HTML elements we can use to compose our
  • 00:16:14 user interface now with this box we
  • 00:16:17 would have everything we need to build
  • 00:16:19 an eye on a gap and we could surf this
  • 00:16:21 app as a web app or as a progressive web
  • 00:16:24 app this is what PWA stands for in case
  • 00:16:27 you don't know progressive web app is a
  • 00:16:30 web app which leverages certain native
  • 00:16:33 device features in the browser if
  • 00:16:35 possible and if not possible it will
  • 00:16:37 have fall backs which may be all the
  • 00:16:41 works offline in general you could say
  • 00:16:43 PWA is an enhanced web app and if you
  • 00:16:46 want to learn more about that good news
  • 00:16:48 I got a course about this as well where
  • 00:16:49 we dive deeply into progressive web apps
  • 00:16:52 now I want to point out though that
  • 00:16:54 with this tech stack here so with this
  • 00:16:56 box at the top of the slide here we
  • 00:16:59 really build a normal web app we could
  • 00:17:01 just turn it into a progressive web app
  • 00:17:03 it would be very easy but the key
  • 00:17:05 takeaway is we have a web app here now
  • 00:17:08 of course that's not enough we want to
  • 00:17:09 build for ios and android as well
  • 00:17:11 maybe also for the desktop well that's
  • 00:17:14 where capacitor comes into play we add
  • 00:17:18 capacitor into your project this extra
  • 00:17:21 tool which acts as a wrapper around our
  • 00:17:23 app and with that we can build for iOS
  • 00:17:27 for Android and we will get these app
  • 00:17:30 bundles which we then upload to the
  • 00:17:32 respective app stores
  • 00:17:33 and together with an average rule called
  • 00:17:36 electron which is not the focus of this
  • 00:17:38 course we can even build a desktop app
  • 00:17:40 if we want to and this is the attack
  • 00:17:42 stack we would use in a typical ionic
  • 00:17:46 react project where we then use
  • 00:17:48 capacitor to serve our app to all these
  • 00:17:51 platforms now as an extra tool which I
  • 00:17:55 haven't mentioned before we'll also use
  • 00:17:57 the ionic CLI
  • 00:17:59 the ionic command-line interface which
  • 00:18:02 is a tool we use in the well command
  • 00:18:04 line of our operating system to create
  • 00:18:07 ionic projects to manage them to run a
  • 00:18:09 development server so basically to
  • 00:18:12 interact with our project during
  • 00:18:14 development it is basically a
  • 00:18:16 replacement for a create react app you
  • 00:18:18 could say or to be very precise it's a
  • 00:18:20 wrapper around create react app so this
  • 00:18:24 is how an ionic project looks like and
  • 00:18:26 this is what we will build in this
  • 00:18:28 course ultimately
  • 00:18:33 so we know why we need react and we know
  • 00:18:37 why we might be interested in ionic and
  • 00:18:40 this capacitor tool I mentioned how does
  • 00:18:44 ionic and capacitor and I'll kind of use
  • 00:18:48 these words or terms interchangeably
  • 00:18:51 because they're from the same company so
  • 00:18:53 how do these tools work behind the
  • 00:18:55 scenes ionic and capacitor well when we
  • 00:18:58 create an ionic project an ionic app we
  • 00:19:02 write some code in react for example but
  • 00:19:05 as I mentioned you don't need a
  • 00:19:07 JavaScript framework
  • 00:19:09 technically so we write our JavaScript
  • 00:19:11 code with whichever framework we want
  • 00:19:13 and we probably since this is an ionic
  • 00:19:16 course throw in some ionic web
  • 00:19:18 components to have these beautiful
  • 00:19:20 components which automatically adapt to
  • 00:19:24 the underlying platform to have the
  • 00:19:26 Android or iOS look and all these
  • 00:19:28 beautiful animations so we have this app
  • 00:19:31 now you learned that you can use
  • 00:19:33 capacitor then to turn this into a
  • 00:19:35 native mobile app because the blocks on
  • 00:19:38 the top that's basically a web app right
  • 00:19:41 it's a regular web front-end with react
  • 00:19:44 and ionic so only web technologies there
  • 00:19:46 and then it's capacitor which turns it
  • 00:19:49 into a native mobile app but the
  • 00:19:52 question is how does capacitor turn it
  • 00:19:55 into a native mobile app does it take
  • 00:19:58 our web app code so HTML Javascript and
  • 00:20:02 CSS and compile this to a native code so
  • 00:20:06 does it translate our existing code to
  • 00:20:09 the Java and objective-c equivalents for
  • 00:20:12 Android and the iOS platform or does it
  • 00:20:15 compile it to machine code which runs on
  • 00:20:18 mobile devices or does it use another
  • 00:20:21 approach you could think of where it
  • 00:20:24 takes your web app and wraps this into a
  • 00:20:28 mobile app
  • 00:20:30 what does it do well it does the second
  • 00:20:34 thing it takes this web app and wraps it
  • 00:20:39 into a native mobile app into a real
  • 00:20:42 native mobile app now what's that what's
  • 00:20:45 this wrapped web app thing how does this
  • 00:20:47 work well in the end once we're done
  • 00:20:50 with everything once we are done working
  • 00:20:53 on our project with ionic and capacitor
  • 00:20:55 we want to have a mobile app which we
  • 00:20:58 can distribute through the App Store's
  • 00:21:00 so which ultimately can be installed on
  • 00:21:02 different devices right so we want a
  • 00:21:05 real mobile app which you can download
  • 00:21:07 and install from app stores that's our
  • 00:21:09 goal and that's what we can get with
  • 00:21:11 capacitor now capacitor works such that
  • 00:21:15 it essentially gives you automatically
  • 00:21:17 behind the scenes a very simple mobile
  • 00:21:20 app which acts as a wrapper for your web
  • 00:21:23 app and it does so by the end hosting
  • 00:21:26 your web app ends at a so called web
  • 00:21:29 view now a web view is just a technology
  • 00:21:33 which is supported by both iOS and
  • 00:21:35 Android which is basically a screen in a
  • 00:21:39 mobile app which takes the full screen
  • 00:21:42 which hides all other displays you might
  • 00:21:45 have in there and which hosts your web
  • 00:21:47 app which you build with react and HTML
  • 00:21:50 and CSS and JavaScript and ionic so
  • 00:21:53 which takes this web app and hosts it on
  • 00:21:55 a local mini server that runs ins of the
  • 00:21:59 web app you could say so that to the
  • 00:22:01 end-user it is like a totally normal
  • 00:22:04 native mobile app you won't be able to
  • 00:22:07 tell a difference you as a developer
  • 00:22:10 therefore are able to distribute it
  • 00:22:13 through the app stores and it can be
  • 00:22:15 installed as a native mobile app this
  • 00:22:17 mobile app also thanks to capacitor
  • 00:22:21 which acts as a bridge between your
  • 00:22:23 hosted web app and the underlying
  • 00:22:25 operating system has full access to
  • 00:22:28 native device features like the device
  • 00:22:30 camera so capacitor does all the wire up
  • 00:22:34 work to make sure that your ionic
  • 00:22:37 reactive has unlimited access to
  • 00:22:39 everything a normal mobile app would
  • 00:22:43 have and
  • 00:22:43 you really should put that into quotes
  • 00:22:45 because you have a regular mobile app in
  • 00:22:48 the end here and of course you have one
  • 00:22:50 thing though you have a slightly worse
  • 00:22:53 performance than in real native apps
  • 00:22:55 which you create by writing native app
  • 00:22:58 code so which you create by writing Java
  • 00:23:01 Android code for Android and objective-c
  • 00:23:04 or Swift code for iOS but I know that
  • 00:23:07 this sounds very intimidating let me
  • 00:23:10 tell you from experience that you won't
  • 00:23:13 feel that performance anywhere in 99% of
  • 00:23:17 all apps there might be niche cases very
  • 00:23:21 performance intensive apps where you
  • 00:23:23 might feel a difference but chances are
  • 00:23:25 that those apps actually are not really
  • 00:23:27 programmed in the best possible way and
  • 00:23:29 could also have better performance if
  • 00:23:31 they were done right and of course you
  • 00:23:34 learn the right way to do it right in
  • 00:23:35 this course there are many apps out
  • 00:23:38 there in the app stores maybe already
  • 00:23:40 running on your device which use ionic
  • 00:23:43 and capacitor and where you won't be
  • 00:23:46 able to tell a difference so don't get
  • 00:23:48 intimidated by this this really is an
  • 00:23:51 amazing approach of letting you leverage
  • 00:23:54 your existing wept of knowledge and get
  • 00:23:57 a real mobile app in the end and this is
  • 00:24:00 how it works behind the scenes it's not
  • 00:24:02 really so important for you as a
  • 00:24:04 developer it won't influence how you
  • 00:24:06 write your code I just find it
  • 00:24:08 interesting to understand how that works
  • 00:24:11 behind the scenes but with that let's
  • 00:24:14 move on
  • 00:24:18 so we know how ionic works behind the
  • 00:24:21 scenes and of course step might bring up
  • 00:24:23 one valid question which alternatives do
  • 00:24:26 we have two ionic and again I'm using
  • 00:24:28 the term ionic here kind of as a summary
  • 00:24:32 term that also includes capacitor now
  • 00:24:36 with ionic and capacitor we can build
  • 00:24:38 those wrapped web apps as I mentioned so
  • 00:24:41 as I mentioned multiple times now you
  • 00:24:43 utilize your existing knowledge and you
  • 00:24:46 get a real web out of that now of course
  • 00:24:48 one alternative which I won't even show
  • 00:24:51 here because it's so obvious is that you
  • 00:24:53 build a real native app by learning Java
  • 00:24:55 and the android framework for android
  • 00:24:58 and objective-c or Swift as programming
  • 00:25:01 languages for iOS the obvious
  • 00:25:04 disadvantage of doing that is that you
  • 00:25:07 have to learn two brand-new programming
  • 00:25:09 languages and respective frameworks and
  • 00:25:12 you won't really be able to use this
  • 00:25:15 knowledge anywhere else then for mobile
  • 00:25:17 app development so you have a lot of
  • 00:25:20 work to do to build apps there as
  • 00:25:22 another disadvantage even if you learn
  • 00:25:25 all those languages you have to build
  • 00:25:27 two apps from scratch you won't be able
  • 00:25:30 to reuse any Android code in your iOS
  • 00:25:33 app or the other way around on the other
  • 00:25:35 end with ionic you use your existing
  • 00:25:37 knowledge you only need to learn one
  • 00:25:39 programming language JavaScript and do
  • 00:25:42 you react framework of course and you
  • 00:25:44 then write the app once and you
  • 00:25:47 automatically get an Android and iOS app
  • 00:25:49 which even looks good on the respective
  • 00:25:52 platform thanks to ionic without any
  • 00:25:54 extra work so that's the huge advantage
  • 00:25:56 there but which alternatives do we have
  • 00:25:58 maybe we have other tools which also
  • 00:26:00 allow us to reuse our existing knowledge
  • 00:26:02 and write code only once and we do
  • 00:26:05 there also is react native which also
  • 00:26:08 allows you to write native apps with
  • 00:26:10 react unlike ionic it does not use this
  • 00:26:13 wrapped web app approach instead it in
  • 00:26:16 the end compiles your views so the
  • 00:26:20 markup language for what's visible on
  • 00:26:22 the screen and your JavaScript code is
  • 00:26:24 hosted in a mini server you could say
  • 00:26:27 that's also running side by side to
  • 00:26:30 those compiled views so
  • 00:26:32 it's not entirely wrapped that has this
  • 00:26:33 compilation step which might sound more
  • 00:26:37 attractive because of performance
  • 00:26:38 reasons but as I mentioned you won't
  • 00:26:41 really feel that performance
  • 00:26:42 disadvantage and I'm serious about that
  • 00:26:44 and in addition you also have to learn
  • 00:26:47 and use styling syntax for using react
  • 00:26:50 native it does not use native CSS you
  • 00:26:52 don't use HTML there you use an HTML ish
  • 00:26:56 language or you could say and in general
  • 00:26:59 it's a little bit more work nonetheless
  • 00:27:01 it is a decent alternative and if your
  • 00:27:03 interest I do have a full course on that
  • 00:27:06 as well which you can of course take and
  • 00:27:08 then we have another great alternative
  • 00:27:10 and that would be flutter flutter is not
  • 00:27:14 following an approach where you use web
  • 00:27:17 development knowledge it actually uses a
  • 00:27:19 brand new language dart which is
  • 00:27:21 developed by Google flutter is a
  • 00:27:23 framework for dart which is also
  • 00:27:24 developed by Google and it also however
  • 00:27:27 then uses the starred language and a lot
  • 00:27:31 of features which are built into flutter
  • 00:27:33 a lot of components which look gorgeous
  • 00:27:35 and then you also only write code once
  • 00:27:38 and you get an iOS and an Android app
  • 00:27:40 out of that this also is then compiled
  • 00:27:42 dart the entire app is compiled to
  • 00:27:44 machine code and therefore you can get
  • 00:27:46 that extra performance if you really
  • 00:27:49 need it somewhere you have a lot of
  • 00:27:50 built-in components which look beautiful
  • 00:27:52 and it really is a decent alternative
  • 00:27:54 but of course you have to learn that
  • 00:27:56 brand new language and framework so it
  • 00:27:59 is more work then again using what you
  • 00:28:02 already know I also do have a flutter
  • 00:28:05 course however if that sounds
  • 00:28:07 interesting to you and you also want to
  • 00:28:08 learn that that being said all three
  • 00:28:11 alternatives here are great they each
  • 00:28:13 have their advantages and disadvantages
  • 00:28:15 this of course is an ionic react course
  • 00:28:18 it is an amazing choice because you will
  • 00:28:21 see throughout the course how fun and
  • 00:28:23 easy it is to build mobile apps with it
  • 00:28:26 and therefore let's continue with this
  • 00:28:32 now I know I know I have been talking a
  • 00:28:34 lot we should get started now and we
  • 00:28:36 will soon no worries but I briefly want
  • 00:28:39 to walk you through the ionic history
  • 00:28:41 because it is important to understand it
  • 00:28:43 to understand which version this course
  • 00:28:45 covers and which version you should
  • 00:28:48 learn ionic is a company as I mentioned
  • 00:28:51 and they released this ionic framework
  • 00:28:53 and this entire toolset that allows you
  • 00:28:56 to create mobile apps and the dead so in
  • 00:28:58 2013 with ionic 1 now back then this was
  • 00:29:02 a framework which only supported angular
  • 00:29:05 1 also known as angularjs
  • 00:29:07 so one JavaScript framework and it also
  • 00:29:10 didn't bring its own convert touch to
  • 00:29:12 mobile solution so it didn't include
  • 00:29:15 capacitor instead it was based on
  • 00:29:17 another open source alternative named
  • 00:29:19 Cordova and it could be a bit clunky but
  • 00:29:22 generally it worked fine in 2016 we got
  • 00:29:26 ionic 2 which was based on the brand new
  • 00:29:29 framework angular 2 which was totally
  • 00:29:31 different than angular 1 and in 2017 we
  • 00:29:34 saw ionic free which was basically an
  • 00:29:36 enhancement of ionic 2 which also
  • 00:29:39 included better support for not just
  • 00:29:41 mobile apps but all the four progressive
  • 00:29:43 web apps so for the first time we had a
  • 00:29:46 real cross-platform solution where we
  • 00:29:49 could build more than just mobile apps
  • 00:29:51 you could say now that's the past then
  • 00:29:55 we had a huge very important new version
  • 00:29:58 in 2019 and that was ionic for ionic and
  • 00:30:01 for changed everything
  • 00:30:03 the ionic team moved away from angular
  • 00:30:05 they now supported every framework or no
  • 00:30:08 framework at all if you wanted that with
  • 00:30:10 vanilla JavaScript because now ionic was
  • 00:30:13 really just a web component framework
  • 00:30:16 prior to ionic 4 it was an angular
  • 00:30:19 component framework all those components
  • 00:30:21 were built with angular now they were
  • 00:30:23 built with native web standards so with
  • 00:30:26 the web component specification with
  • 00:30:28 vanilla JavaScript and therefore this
  • 00:30:31 was the first time I onic components
  • 00:30:33 worked with every framework this was
  • 00:30:36 also when they released capacitor their
  • 00:30:38 own alternative to Cordova which because
  • 00:30:41 the now had full control over it really
  • 00:30:44 fitted into this whole equity
  • 00:30:45 in a nicer way and which in my personal
  • 00:30:48 experience is much nicer to use than
  • 00:30:50 Cordova
  • 00:30:51 that being said capacitor is and was
  • 00:30:54 fully backward-compatible to all the
  • 00:30:56 support existing chordoma plugins but in
  • 00:30:58 this course will focus entirely on
  • 00:31:00 capacitor because it really is the
  • 00:31:02 future of this cross-platform mobile app
  • 00:31:05 development with ionic now since then
  • 00:31:09 they release new versions and we got new
  • 00:31:11 versions coming out all the time but
  • 00:31:12 unlike in the past every new version
  • 00:31:15 does not mean that everything changes
  • 00:31:17 instead we now have gradual enhancements
  • 00:31:20 smaller improvements and of course I
  • 00:31:24 will keep the scores updated to include
  • 00:31:27 these smaller changes because now not
  • 00:31:29 everything changes but only as I said
  • 00:31:31 small things that's the history you are
  • 00:31:35 learning latest version of ionic with
  • 00:31:37 this course and it is the latest version
  • 00:31:39 which you should of course use to build
  • 00:31:41 cross-platform apps with ionic capacitor
  • 00:31:45 and in this case react
  • 00:31:51 so now finally let's get started and for
  • 00:31:54 that let me show you how you can get the
  • 00:31:57 most out of this course now of course
  • 00:31:59 it's a video-on-demand course so watch
  • 00:32:02 those videos at your pace you can slow
  • 00:32:05 me down or speed me up in this video
  • 00:32:08 player if I go too fast for you now of
  • 00:32:11 course this course has some
  • 00:32:12 prerequisites you should know basic
  • 00:32:14 reacts if you don't know that definitely
  • 00:32:16 learn it first otherwise fooling along
  • 00:32:18 will be very hard but then to really
  • 00:32:22 fine-tune everything to your
  • 00:32:23 requirements follow along at your pace I
  • 00:32:26 always recommend that you code along we
  • 00:32:29 will write a lot of code in this course
  • 00:32:30 there will be chances for you to
  • 00:32:33 practice what you learn and you really
  • 00:32:35 do learn the most if you just will go it
  • 00:32:37 along and build your own app along with
  • 00:32:40 me you find code snapshots attached to
  • 00:32:43 the last lecture of every module so that
  • 00:32:46 if you get some error or you can't
  • 00:32:49 reproduce what I had in the video so
  • 00:32:52 that you can use those snapshots and
  • 00:32:54 compare your code to mine or temporarily
  • 00:32:57 replace your code with mine to find out
  • 00:33:00 what went wrong so take advantage of
  • 00:33:03 that now of course also if you're facing
  • 00:33:06 any errors or you're having any problems
  • 00:33:09 you should debug your code on your own
  • 00:33:11 use the normal web development debugging
  • 00:33:13 tools like the chrome developer tools
  • 00:33:15 and also if you're getting errors read
  • 00:33:18 those error messages use Google and try
  • 00:33:21 to fix them on your own now of course I
  • 00:33:23 will also provide some support I'll come
  • 00:33:25 back to that in a second but this really
  • 00:33:27 is how you learn the most so I would
  • 00:33:29 encourage you that you really do that if
  • 00:33:31 something goes wrong now if you
  • 00:33:34 absolutely can't find a reason for a
  • 00:33:36 different behavior or for an error you
  • 00:33:39 can of course ask in the community that
  • 00:33:42 discord community which was linked and
  • 00:33:44 also in a Q&A section of this course
  • 00:33:47 where I will do my best to provide fast
  • 00:33:49 and friendly support for course related
  • 00:33:52 questions I can't help on personal
  • 00:33:54 project though but also don't just post
  • 00:33:58 there and read there but also try to
  • 00:34:00 help others because ultimately this is
  • 00:34:03 how you learn the most
  • 00:34:04 if you help others you can learn way
  • 00:34:08 more because you're challenged to think
  • 00:34:11 about a problem and find a solution and
  • 00:34:13 this is how you ultimately get the most
  • 00:34:15 out of this course
  • 00:34:20 so finally let's get started with ionic
  • 00:34:24 and let's actually really get started
  • 00:34:25 with ionic so I mean with just ionic
  • 00:34:29 because it's important that you
  • 00:34:31 understand what I wanna guess and how
  • 00:34:33 this ionic thing really works what web
  • 00:34:36 components are and how you use them so
  • 00:34:38 that you then in the next step can
  • 00:34:40 combine that knowledge with react
  • 00:34:44 I find that important because you
  • 00:34:46 probably already know react you will
  • 00:34:48 learn how to combine it with ionic but
  • 00:34:50 we have to cover ionic first so in this
  • 00:34:54 module we'll have a look at how we can
  • 00:34:56 work with ionic without react so how we
  • 00:34:59 can really just use that because I
  • 00:35:01 mentioned it react is not mandatory no
  • 00:35:04 JavaScript framework is mandatory you
  • 00:35:07 could use ionic with just vanilla
  • 00:35:09 JavaScript and we will then also see why
  • 00:35:14 we still might want to add react though
  • 00:35:17 even though we technically don't need it
  • 00:35:23 and when I talk about ionic for one I of
  • 00:35:26 course also always meant ionic and
  • 00:35:29 capacitor so these two important
  • 00:35:32 technologies you could say that are
  • 00:35:34 managed by the ionic company but I also
  • 00:35:37 of course mean all the different things
  • 00:35:39 that make up a Yannick and ionic apps
  • 00:35:42 and ionic projects you'll be working on
  • 00:35:44 and the most important thing there of
  • 00:35:46 course will be the user interface
  • 00:35:48 components you'll be working with these
  • 00:35:51 are two examples which actually exist
  • 00:35:53 and you will see them all throughout
  • 00:35:55 this course and I will show you where
  • 00:35:57 you can find them all but these are
  • 00:36:00 essentially HTML elements but of course
  • 00:36:04 not
  • 00:36:05 HTML elements which are built into the
  • 00:36:07 browser like this
  • 00:36:08 which browser understands like this but
  • 00:36:11 instead added and unlocked by ionic by
  • 00:36:15 adding an ionic script import into your
  • 00:36:17 page and then by some JavaScript code
  • 00:36:19 which gets executed there to basically
  • 00:36:23 define these elements to the browser so
  • 00:36:26 that the browser knows what to render
  • 00:36:28 when it sees these tags that's the idea
  • 00:36:31 behind web components and that's what
  • 00:36:33 ionic utilizes it's a web component
  • 00:36:35 framework however ionic projects
  • 00:36:38 typically consist of more than just HTML
  • 00:36:41 pages with these special elements for
  • 00:36:45 example ionic project as we will work on
  • 00:36:48 them throughout the course will all make
  • 00:36:50 theming and styling easy they embrace
  • 00:36:54 vanilla CSS day heavily utilize a built
  • 00:36:59 in CSS feature which is called CSS
  • 00:37:01 variables and also many other things and
  • 00:37:04 you will see all of that throughout the
  • 00:37:06 course as well one thing you can already
  • 00:37:08 memorize is that you will typically use
  • 00:37:11 vanilla CSS you could also use sass and
  • 00:37:14 so on if you preferred that but you can
  • 00:37:16 write beautiful apps with built-in
  • 00:37:20 theming so where you for example set a
  • 00:37:23 color only once and then use it
  • 00:37:25 everywhere with just CSS and as a side
  • 00:37:28 note if you want to learn more about CSS
  • 00:37:30 and CSS variables you can also have a
  • 00:37:32 look at the CSS course I created
  • 00:37:35 together with manual
  • 00:37:37 now when our important concept which is
  • 00:37:40 incorporated into ionic and which will
  • 00:37:42 also be supported out of the box in
  • 00:37:45 ionic react app Slater is navigation in
  • 00:37:49 mobile apps you will see that we have
  • 00:37:51 some typical navigation patterns like
  • 00:37:54 using tabs or a side drawer and ionic
  • 00:37:58 will make it very easy to use such
  • 00:38:01 navigation patterns and to for example
  • 00:38:03 add tabs to your application when our
  • 00:38:07 important concept which we need for
  • 00:38:09 building modern user interfaces is state
  • 00:38:12 management we need to be able to pass
  • 00:38:14 data around and to ensure that when we
  • 00:38:17 do something in one place of the app
  • 00:38:20 let's say when a button is clicked
  • 00:38:22 something happens somewhere else and
  • 00:38:24 this is also something which is kind of
  • 00:38:27 built into you ionic it gives us some
  • 00:38:30 tools to help us there but I can already
  • 00:38:33 spoiler this a bit this is all the one
  • 00:38:36 thing where react will help us and one
  • 00:38:38 of the reasons why we might want react
  • 00:38:41 now when we also expand the term ionic a
  • 00:38:44 bit and we include capacitor in the
  • 00:38:46 equation then we can also tap into
  • 00:38:49 native device features and that is
  • 00:38:51 something which is of course super
  • 00:38:53 important with the help of this
  • 00:38:55 capacitor technology which is developed
  • 00:38:57 by the ionic team and which they offer
  • 00:38:59 integrates perfectly into ionic apps we
  • 00:39:02 can use the device camera get the user
  • 00:39:04 location write something to the device
  • 00:39:08 storage and much much more and these are
  • 00:39:11 all things we'll also do in this course
  • 00:39:13 you will learn how to use the device
  • 00:39:15 camera take photos and store them that's
  • 00:39:17 all included and last but not least when
  • 00:39:21 we talk about ionic they're always
  • 00:39:23 whenever crucial tool that has to be
  • 00:39:27 included and that is the ionic CLI but
  • 00:39:30 also all the different features Ayana
  • 00:39:33 gives us to manage our projects the
  • 00:39:36 ionic CLI CLI stands for command-line
  • 00:39:39 interface will make it easy for us to
  • 00:39:41 create projects to test them and also
  • 00:39:45 then to pack everything up to optimize
  • 00:39:48 everything
  • 00:39:49 Publishing so that you really can easily
  • 00:39:52 take your eye on a gap and put it onto
  • 00:39:54 relapsed or in the most optimized
  • 00:39:57 version possible these are all the
  • 00:40:00 things as I mentioned state management
  • 00:40:02 that's where react will be important
  • 00:40:04 native device features that's where a
  • 00:40:06 capacitor will be important and for now
  • 00:40:09 in this module will actually focus on
  • 00:40:11 the UI components so that you get a
  • 00:40:13 feeling for that and see how that works
  • 00:40:15 and then throughout the course once we
  • 00:40:17 also combine ionic with react and we
  • 00:40:19 create a project with the ionic CLI we
  • 00:40:22 will step-by-step introduce all these
  • 00:40:25 different features so that by the end of
  • 00:40:27 the course you're able to build real
  • 00:40:29 native mobile apps or actually
  • 00:40:31 cross-platform apps with ionic and react
  • 00:40:39 so we get those ionic components as I
  • 00:40:41 mentioned these HTML elements which are
  • 00:40:44 unlocked by ionic and we will start
  • 00:40:46 using them in just a second they will
  • 00:40:49 look like this
  • 00:40:50 this for example is a component that we
  • 00:40:52 can use once we included the ionic
  • 00:40:55 script into our web app into our website
  • 00:40:58 into our HTML page it's named ion button
  • 00:41:02 and that's of course an HTML tag which
  • 00:41:04 is not supported by default if you would
  • 00:41:07 put this into a HTML document like this
  • 00:41:09 it would not do anything it also
  • 00:41:11 wouldn't throw an error because HTML is
  • 00:41:14 actually a language which is quite
  • 00:41:16 forgiving or to be precise browsers are
  • 00:41:20 quite forgiving you can use unknown HTML
  • 00:41:23 elements and the rest of your page will
  • 00:41:25 still render fine but for this element
  • 00:41:27 to bring something onto the screen which
  • 00:41:29 we can see it with which we can interact
  • 00:41:31 and which really has everything this
  • 00:41:34 button should have here for dad we will
  • 00:41:36 need ionic in this case so we will have
  • 00:41:41 these HTML elements which we use like
  • 00:41:43 normal HTML elements they also as you
  • 00:41:46 will see throughout this course can have
  • 00:41:47 attributes and properties which we can
  • 00:41:50 target either by a JavaScript or when we
  • 00:41:53 add it in markup like this we can just
  • 00:41:56 add attributes like we always do on HTML
  • 00:41:59 elements and they will always be able to
  • 00:42:01 emit events so for example on this
  • 00:42:03 button we'll be able to listen to a
  • 00:42:06 click well enough of the talking why
  • 00:42:08 don't we just get started and do this
  • 00:42:10 then to get started let's visit ionic
  • 00:42:14 framework com and there you can learn
  • 00:42:17 more about ionic always a place worth
  • 00:42:19 visiting I can also recommend their blog
  • 00:42:22 to learn about the latest developments
  • 00:42:24 of ionic but for now let's just click on
  • 00:42:26 platform here and then ionic framework I
  • 00:42:29 basically want to get to those docs here
  • 00:42:32 now these Doc's here are pretty good you
  • 00:42:35 can learn a lot about ionic here I
  • 00:42:36 absolutely can recommend checking them
  • 00:42:39 out but of course I will kind of replace
  • 00:42:42 these Doc's with this course for you I
  • 00:42:44 will show you all the things that matter
  • 00:42:46 but these stocks are always great to
  • 00:42:49 also have a written guide or maybe dive
  • 00:42:51 deeper into some components
  • 00:42:53 some concepts which we only use a bit
  • 00:42:55 maybe
  • 00:42:57 so in here we can get started by going
  • 00:43:01 to installation and then here packages
  • 00:43:04 and CDN now we will soon use the CLI no
  • 00:43:07 worries which is this tool that allows
  • 00:43:09 us to create local projects but for a
  • 00:43:11 very simple project we can just use a
  • 00:43:13 CDN so basically we can import anionic
  • 00:43:16 JavaScript package which lies on some
  • 00:43:19 server which we can just include so if
  • 00:43:21 we click here we see these free HTML
  • 00:43:25 elements copy them and now create a new
  • 00:43:29 HTML file anywhere on your system in any
  • 00:43:33 folder of your choice here I created a
  • 00:43:36 file named index.html in a folder named
  • 00:43:39 ionic react and you can store this
  • 00:43:43 anywhere you want and I opened this in
  • 00:43:45 Visual Studio code Visual Studio code is
  • 00:43:48 a free coding IDE which is great for web
  • 00:43:51 development you can get it for free from
  • 00:43:54 code Visual Studio com it is available
  • 00:43:57 for all operating systems and you can
  • 00:43:59 simply download it from there and
  • 00:44:01 install it and then open your code with
  • 00:44:04 it and I just like it I use the dark
  • 00:44:08 plus theme here in case you're wondering
  • 00:44:10 why it looks the way it looks for me
  • 00:44:12 your dark plus and I also installed two
  • 00:44:17 extensions which I would recommend that
  • 00:44:18 you also install the first one is the
  • 00:44:21 material icon extension it's optional
  • 00:44:23 but it changes the file icons to look
  • 00:44:25 the way they look in my course here so
  • 00:44:27 if you like that look you can go for
  • 00:44:29 that extension here and I also got
  • 00:44:32 another extension installed and that is
  • 00:44:35 prettier and that will help us with
  • 00:44:37 automatic code formatting so that if I
  • 00:44:40 press a specific shortcut which you can
  • 00:44:42 find under preferences keyboard
  • 00:44:45 shortcuts and then if you search for
  • 00:44:47 format document this shortcut if I press
  • 00:44:50 this the code will automatically be
  • 00:44:52 formatted to be prettier and easier to
  • 00:44:54 read these are two extensions I would
  • 00:44:57 recommend that you use of course you can
  • 00:44:59 install more I do expect that you
  • 00:45:01 already have a development setup since
  • 00:45:03 react knowledge is recommended and
  • 00:45:05 expected for this course so I will not
  • 00:45:07 dive too deeply into that but that's the
  • 00:45:09 setup I am using
  • 00:45:10 now with that I got this HTML file it's
  • 00:45:13 an empty file right now an individual
  • 00:45:15 pseudocode I can just type HTML and then
  • 00:45:18 choose that second option and hit enter
  • 00:45:21 we get a basic HTML skeleton now here
  • 00:45:25 under title we can insert these free
  • 00:45:28 HTML tags we draft from the ioniq
  • 00:45:30 website and you can also change document
  • 00:45:33 title here of course a bit if you want
  • 00:45:34 I'll name it ionic basics now with this
  • 00:45:39 we have a very simple HTML document
  • 00:45:41 which has no body which is empty right
  • 00:45:43 now and we can just open that for that
  • 00:45:47 I'll open it in finder and then double
  • 00:45:49 click on it to open it up in the browser
  • 00:45:52 here it is so this is this page running
  • 00:45:55 in the browser I can open up the
  • 00:45:57 developer tools to see if we got any
  • 00:45:59 errors right now we don't because
  • 00:46:02 although there isn't much on the page of
  • 00:46:04 course but we will soon change this now
  • 00:46:06 we got that on the page and now let's
  • 00:46:09 add a new HTML element but one which is
  • 00:46:12 not built into HTML which is not regular
  • 00:46:15 HTML the iron button just add this like
  • 00:46:19 this an opening and closing tag and in
  • 00:46:22 between I'll add click me now of course
  • 00:46:25 normally this wouldn't work if you
  • 00:46:28 temporarily cut those three imports we
  • 00:46:32 add it and save this file and reload you
  • 00:46:35 see just click me here but yea nothing
  • 00:46:37 happens it doesn't look special if we
  • 00:46:41 inspect it we can see that the browser
  • 00:46:43 detected this element but it didn't know
  • 00:46:45 what to do with it well that changes if
  • 00:46:48 we bring back those free imports and we
  • 00:46:50 saved us again now if we go back and
  • 00:46:53 reload this page oh look this looks more
  • 00:46:56 like a button we can tap it and of
  • 00:46:59 course nothing happens right now if we
  • 00:47:00 tap it but you can already see that
  • 00:47:02 without us writing any JavaScript or
  • 00:47:05 HTML this seems to be more than an
  • 00:47:08 undetected HTML element and indeed here
  • 00:47:11 in the dev tools you can also see there
  • 00:47:13 is this strange shadow root thing and
  • 00:47:16 yeah in there we got stuff so something
  • 00:47:18 happened here and if we open a console
  • 00:47:21 we of course also get no error
  • 00:47:23 so this is now a button and now we can
  • 00:47:26 interact with this button here we can
  • 00:47:28 add our own script let's say here at the
  • 00:47:31 bottom little inline script here in HTML
  • 00:47:34 and we can select this button and store
  • 00:47:37 it in a constant width document query
  • 00:47:39 selector and selected by its tag this is
  • 00:47:43 possible iron button like this and of
  • 00:47:46 course this is not react code this is
  • 00:47:47 vanilla JavaScript we will switch to
  • 00:47:49 react soon no worries and we can now add
  • 00:47:52 an event listener here to the button if
  • 00:47:54 you want you click listener for example
  • 00:47:56 and register a function here I'm writing
  • 00:48:00 an arrow function which will fire
  • 00:48:02 whenever this is clicked hopefully so we
  • 00:48:05 can console.log clicked here to see
  • 00:48:07 whether it works now if we save this and
  • 00:48:10 we go back and I reload and I click this
  • 00:48:13 we see clicked here on the right in the
  • 00:48:15 console window of my dev tools so this
  • 00:48:19 is working and why is this interesting
  • 00:48:23 because it normally would not work it
  • 00:48:26 isn't a normal HTML element that look we
  • 00:48:29 have here and all the features which are
  • 00:48:32 built-in of which we're currently only
  • 00:48:34 scratching the surface this only works
  • 00:48:36 because of ionic and this is a so-called
  • 00:48:39 web component it's a custom HTML element
  • 00:48:43 you can build those on your own as well
  • 00:48:45 and I got a course on that too if you
  • 00:48:47 are interested but here the ionic team
  • 00:48:50 built a couple of components for us we
  • 00:48:52 can just drop them into a page and use
  • 00:48:54 them and of course there's more than
  • 00:48:57 just a button you go back to those docs
  • 00:48:59 here and you actually go to components
  • 00:49:03 here at the top you see there are a
  • 00:49:06 couple of groups of components and you
  • 00:49:08 can click for example on the button and
  • 00:49:10 now here you got a detailed description
  • 00:49:12 of the button and there are way more
  • 00:49:14 components built in as you can tell here
  • 00:49:17 if i zoom out a bit here and reload I
  • 00:49:20 also get the side menu here it is and
  • 00:49:24 now you see there are a bunch of
  • 00:49:26 components built into ionic which you
  • 00:49:28 can use and the official Doc's are nice
  • 00:49:31 because you always have this preview on
  • 00:49:33 the right to see how does component look
  • 00:49:36 and works and you see detailed
  • 00:49:38 descriptions of how to use it for
  • 00:49:41 different frameworks or vanilla
  • 00:49:43 JavaScript and how to configure it which
  • 00:49:46 properties you can set which attributes
  • 00:49:48 you can set and so on so these Doc's are
  • 00:49:51 awesome and I will come back to them
  • 00:49:52 from time to time but for now we added
  • 00:49:55 our first button that's pretty amazing
  • 00:50:01 so we get this button here this
  • 00:50:04 standalone ionic element and we
  • 00:50:06 connected a click listener that's nice
  • 00:50:09 now let's add more because we got so
  • 00:50:12 many components here let's add more
  • 00:50:14 components and let's start building a
  • 00:50:16 very simple first application where we
  • 00:50:19 then can later also understand why we
  • 00:50:22 might want react in the equation I want
  • 00:50:27 to build a simple body mass calculator
  • 00:50:30 where we can basically calculate well
  • 00:50:32 our body mass index now in case you
  • 00:50:36 don't know this is the formula we can
  • 00:50:38 calculate the body mass index by
  • 00:50:40 dividing weight and kilograms by height
  • 00:50:43 squared in meters or if you're not using
  • 00:50:48 the metric system I can tell you one
  • 00:50:50 kilogram is 2.2 pounds and one meter is
  • 00:50:55 3.2 eight feet so that's how we will be
  • 00:50:58 able to convert our different measures
  • 00:51:00 now that being said that's the formula
  • 00:51:03 that's what I want to build here now now
  • 00:51:06 that's far we just have a button not
  • 00:51:08 really what we need right now we
  • 00:51:11 certainly need two inputs to let the
  • 00:51:14 user enter a weight and a height and to
  • 00:51:18 keep things simple I'll start with the
  • 00:51:20 metric system we will adjust this to
  • 00:51:23 also allow for other inputs but for now
  • 00:51:25 let's start with the metric system
  • 00:51:27 you saw how you can convert values on
  • 00:51:30 the slide before and yeah with that
  • 00:51:33 let's build it so we need an input and
  • 00:51:35 if we scroll through the list of
  • 00:51:37 components we do see an iron input here
  • 00:51:41 this is an input element which you can
  • 00:51:43 add which can be styled and configured
  • 00:51:45 in different ways as you can tell and
  • 00:51:47 that looks just like what we need here
  • 00:51:49 so let's go back to our page here let's
  • 00:51:54 actually remove the button and the
  • 00:51:55 script and let's add a iron input
  • 00:51:58 opening and closing tag now on this iron
  • 00:52:02 input we can configure various things
  • 00:52:05 and if we switch this year to just
  • 00:52:07 JavaScript we also see that we can
  • 00:52:11 combine it with the iron label inside of
  • 00:52:14 iron
  • 00:52:15 item two basically give this input a
  • 00:52:18 label so maybe let's do this because we
  • 00:52:22 can then also configure the label to for
  • 00:52:24 example be floating above the input when
  • 00:52:27 we click into it so let's add an item
  • 00:52:30 which seems to be an aberrant provided
  • 00:52:33 by ionic and a die-in label and here I
  • 00:52:36 will add your height as a label and now
  • 00:52:41 I'll duplicate this to have a number I
  • 00:52:44 an item where I ask for the weight then
  • 00:52:47 I have another input now on both labels
  • 00:52:51 I will add position equals floating how
  • 00:52:55 do I know that I can add this well
  • 00:52:57 because of the official docs which I
  • 00:52:59 really recommend that you dive in from
  • 00:53:01 time to time because there you can see
  • 00:53:03 all possible configurations and what you
  • 00:53:06 can do so here we get the floating
  • 00:53:08 position we could also set it to fixed
  • 00:53:10 and you can see the different positions
  • 00:53:13 partly here in the preview and of course
  • 00:53:16 you can also just give it a try so here
  • 00:53:19 I added position floating and I'll do
  • 00:53:21 the same here on the weight if you save
  • 00:53:24 this and we go back to our little
  • 00:53:26 application and we reload we see these
  • 00:53:29 two inputs and we can click into them
  • 00:53:31 and they float and now here's also
  • 00:53:33 something very nice in the chrome dev
  • 00:53:36 tools and I would recommend that you use
  • 00:53:39 Chrome to follow along you can click on
  • 00:53:41 this icon here this will give you a
  • 00:53:43 preview of the web app as it will look
  • 00:53:46 like on a mobile phone in the browser so
  • 00:53:49 this is not a preview of the mobile app
  • 00:53:52 but of course it's really close this is
  • 00:53:53 how it would look like on a mobile
  • 00:53:55 device and therefore most likely also
  • 00:53:57 how it would look like once you build it
  • 00:54:00 for a mobile phone so here is how it
  • 00:54:04 would look like on a mobile device most
  • 00:54:07 likely now that's nice it's a good start
  • 00:54:10 we got our two inputs here but we're not
  • 00:54:13 really done there are more components
  • 00:54:16 but of course I don't just want to go
  • 00:54:17 for the docks together with you so we'll
  • 00:54:19 show you another very important
  • 00:54:21 component here there is an iron content
  • 00:54:24 component and you always have just one
  • 00:54:27 iron con
  • 00:54:28 component per page so per HTML document
  • 00:54:31 in this case and you should put your
  • 00:54:33 content into that if you do that and
  • 00:54:36 here I just press the prettier shortcut
  • 00:54:39 to format this and you reload you will
  • 00:54:41 not really see a difference this is just
  • 00:54:44 a good practice it's especially
  • 00:54:46 important if you then combine it with
  • 00:54:47 another component ionic ships with and
  • 00:54:50 that's the iron header you add this
  • 00:54:54 above your content and there you add a
  • 00:54:57 iron toolbar typically in which you add
  • 00:55:00 a iron title there you can now set a
  • 00:55:03 title which will be displayed on the
  • 00:55:05 screen for example BMI calculator
  • 00:55:10 this then all should be wrapped in an
  • 00:55:12 iron app and you only have one iron app
  • 00:55:15 element per page as well so you can
  • 00:55:18 probably see a theme here you have a
  • 00:55:20 header which you will see in a second is
  • 00:55:22 something that is on the top of the page
  • 00:55:24 and then you have the main content you
  • 00:55:26 could also add a footer but here we
  • 00:55:28 don't need one now if we safe that we go
  • 00:55:31 back just looks good now we get this
  • 00:55:34 header here and we can configure this a
  • 00:55:36 bit more you can go back and on this
  • 00:55:39 toolbar we can add a collar we can set
  • 00:55:42 this to primary now primary is one of
  • 00:55:45 the supported colors I will dive deeper
  • 00:55:47 into theming and styling in a separate
  • 00:55:49 module for now let's just add primary
  • 00:55:52 here like this and now if I reload this
  • 00:55:54 Hey
  • 00:55:55 now it has a blue background and this
  • 00:55:57 now really looks more ish already so we
  • 00:56:01 added these inputs with their floating
  • 00:56:03 labels we added this toolbar and we did
  • 00:56:05 all of that with all those nice stylings
  • 00:56:08 and effects by just adding a couple of
  • 00:56:12 HTML elements which are not really HTML
  • 00:56:16 elements but which are custom elements
  • 00:56:19 unlocked by ionic by this ionic
  • 00:56:22 framework we added deaths of course
  • 00:56:25 pretty pretty nice that's a first step
  • 00:56:29 now with that let's continue and let's
  • 00:56:32 make sure that we actually turns into a
  • 00:56:34 real BMI calculator where we really
  • 00:56:37 calculate the well body mass index of an
  • 00:56:41 individual
  • 00:56:46 so we get started with this body mass
  • 00:56:48 index and more importantly with our
  • 00:56:50 first ionic app therefore with just
  • 00:56:53 ionic no reactant will thus far now my
  • 00:56:57 goal is to add a button and when we
  • 00:56:59 click this button I want to output the
  • 00:57:01 body mass index off the user below the
  • 00:57:04 button here so let's add something new
  • 00:57:09 below our two items here and that's the
  • 00:57:11 ion button which we already saw before
  • 00:57:12 and there we could have a label of
  • 00:57:14 calculate and when we click this button
  • 00:57:17 I want to calculate that body mass index
  • 00:57:20 and I want to output it below this
  • 00:57:21 button and maybe here in a div and
  • 00:57:24 that's important this of course is now a
  • 00:57:26 regular HTML div because just because
  • 00:57:30 you're using those ionic elements those
  • 00:57:32 ionic components does not mean that you
  • 00:57:36 can't use regular HTML elements anymore
  • 00:57:39 you absolutely can and it is quite
  • 00:57:42 normal that you do so really don't get
  • 00:57:45 confused by this you can do this and
  • 00:57:47 here I'm adding a div with an ID of
  • 00:57:49 result because I want to be able to
  • 00:57:51 select that tip with JavaScript to then
  • 00:57:55 add an output the result inside of the
  • 00:57:57 dip once we got it after we clicked this
  • 00:58:00 button I will also give these inputs IDs
  • 00:58:03 so that we can easily select them by a
  • 00:58:06 JavaScript and read their values so here
  • 00:58:10 we got the height input let's say and
  • 00:58:12 there we have the weight input now with
  • 00:58:18 all of that it's time to add some script
  • 00:58:20 code and therefore I'll add an app dot
  • 00:58:22 J's file the name is totally up to you
  • 00:58:24 this is just a JavaScript file which I
  • 00:58:26 now will import here and I'll do that
  • 00:58:28 let's say here by adding a script source
  • 00:58:31 is app j/s and I will add the defer
  • 00:58:34 attribute here to make sure this only
  • 00:58:37 starts executing after the entire HTML
  • 00:58:39 file has been parsed in case you didn't
  • 00:58:42 know the fur before my complete
  • 00:58:44 JavaScript guide is the place to learn
  • 00:58:46 this and all about JavaScript so here I
  • 00:58:50 added this import now we can select the
  • 00:58:52 button to add a click listener select
  • 00:58:56 two inputs to get their values and then
  • 00:58:59 of course
  • 00:58:59 ultimately calculate a result once we
  • 00:59:02 get these input values to then output it
  • 00:59:05 down there let's do that next so in
  • 00:59:08 order to get started with all of that
  • 00:59:10 let's go to app J s and let's select a
  • 00:59:12 couple of things there D calculate
  • 00:59:15 button for example by using document
  • 00:59:17 where E is selector and then we can just
  • 00:59:20 select the first I on button we find
  • 00:59:23 because we happen to only have one eye
  • 00:59:25 and button in here so this is the button
  • 00:59:27 I'm interested in if we had multiple
  • 00:59:29 buttons we could of course add an ID to
  • 00:59:31 this button select two selected by that
  • 00:59:33 ID that's by the way something will do
  • 00:59:36 for the e2 inputs here we have our
  • 00:59:39 height input you can get this with
  • 00:59:43 document.getelementbyid e and then it's
  • 00:59:45 height input this is the ID which we
  • 00:59:49 added to this input and of course for
  • 00:59:52 the second input we can simply repeat
  • 00:59:56 this here and just select it by that
  • 00:59:58 different ID now we can add a little
  • 01:00:03 listener here to D calculate button
  • 01:00:06 click listener and after clicking this I
  • 01:00:10 want to execute a function which I'll
  • 01:00:11 store in a new well function you can't
  • 01:00:13 write it with the function keyword or
  • 01:00:15 create an arrow function which you store
  • 01:00:18 in a constant which is what I will do
  • 01:00:19 here I will name it calculate BMI and
  • 01:00:22 that's just an arrow function and that's
  • 01:00:25 the function I'll hook up to this click
  • 01:00:27 listener so that's really just regular
  • 01:00:30 JavaScript now in here I want to get the
  • 01:00:33 values which were entered into these two
  • 01:00:36 inputs so we got D let's say entered
  • 01:00:40 height by selecting the height input and
  • 01:00:43 they're simply the value property like
  • 01:00:47 this and we do the same for the entered
  • 01:00:50 weight by selecting the weight input
  • 01:00:54 here weight input whoops I should rename
  • 01:00:57 this up there too now here we know that
  • 01:01:00 we will definitely find elements with
  • 01:01:03 these IDs and they will be input
  • 01:01:04 elements if you didn't know that with
  • 01:01:07 certainty you might add a if check to
  • 01:01:09 check if height import a height input or
  • 01:01:11 weight input would be null but here we
  • 01:01:13 no they won't be because we have these
  • 01:01:14 elements on the page now we can get our
  • 01:01:18 BMI by making this calculation we want
  • 01:01:22 to work with numbers though and as you
  • 01:01:24 know what you select with the value
  • 01:01:26 property will always be a string so I
  • 01:01:28 will add a plus in front of that to
  • 01:01:30 convert the string to a number again we
  • 01:01:33 could of course check if that failed if
  • 01:01:35 we maybe got not a number as a result
  • 01:01:37 and technically that could happen in
  • 01:01:39 this application if the user entered
  • 01:01:42 anything but a number here but I will
  • 01:01:44 assume that we just enter Bella's data
  • 01:01:46 here of course you can add a check for
  • 01:01:49 some validation for simplicity I will
  • 01:01:51 omit it here and now the formula was
  • 01:01:55 weight divided by height squared so
  • 01:01:59 entered height times entered
  • 01:02:03 time's entered hide here in brackets so
  • 01:02:08 that this gets calculated first and then
  • 01:02:09 the result is taken to the wide entered
  • 01:02:11 weight by it and then for now I will
  • 01:02:14 just console lock that BMI to check
  • 01:02:16 whether it works we will assume I'll put
  • 01:02:19 it on the page but for now let's just do
  • 01:02:20 this back here let's reload and now
  • 01:02:24 we'll enter my height here in meters
  • 01:02:26 that's important so if you're not used
  • 01:02:29 to the metric system simply use Google
  • 01:02:30 to convert your height and weight to the
  • 01:02:33 metric system so two meters and
  • 01:02:35 kilograms and here are 178 tall and my
  • 01:02:40 weight is 70 not 80 72 and let's press
  • 01:02:44 calculate here and that doesn't look
  • 01:02:48 right
  • 01:02:50 simply yet because that should be the
  • 01:02:52 entered height here not weight had a
  • 01:02:55 little bug let's reload 1.78 72 and that
  • 01:03:00 looks way better that's my body mass
  • 01:03:03 index which is absolutely okay so with
  • 01:03:07 that we got this finished but of course
  • 01:03:08 this app has a lot of flaws we can't
  • 01:03:11 enter anything here and that will just
  • 01:03:14 lead to not a number being output we
  • 01:03:17 also don't output the result anywhere on
  • 01:03:20 the screen just in the console which is
  • 01:03:21 not optimal and of course styling alters
  • 01:03:24 maybe not where we want to have it and
  • 01:03:26 of course all is in addition this only
  • 01:03:29 works with the metric system we
  • 01:03:31 currently have no way of switching to
  • 01:03:35 let's say pounds and feet or anything
  • 01:03:37 like that so these are things where we
  • 01:03:40 can improve this before we do that
  • 01:03:42 however let's have a look behind the
  • 01:03:44 scenes all these ionic components
  • 01:03:46 because now we work with some of them
  • 01:03:48 which is nice how do they actually work
  • 01:03:51 under the hood though
  • 01:03:56 so we played around with some ionic
  • 01:03:59 elements we can work with them from
  • 01:04:01 inside JavaScript that's great
  • 01:04:03 but how do they actually work internally
  • 01:04:05 is this magic how do these web
  • 01:04:07 components work let's take that good old
  • 01:04:10 iron button with which we worked before
  • 01:04:12 as I said this is a web component
  • 01:04:16 unlocked by ionic by desire net
  • 01:04:19 framework you could build your own web
  • 01:04:21 components I have a course on that not
  • 01:04:24 all browsers support everything like
  • 01:04:26 this out of the box but ionic thankfully
  • 01:04:30 automatically loads a lot of polyfills
  • 01:04:32 which make web components work in a
  • 01:04:35 broad variety of browsers so that we can
  • 01:04:37 not just use this in Chrome but also in
  • 01:04:40 edge and in Firefox and Safari and so on
  • 01:04:43 so this is a HTML element which is
  • 01:04:46 unlocked by ionic in the end the ionic
  • 01:04:49 team created a bunch of web components
  • 01:04:51 with JavaScript HTML and CSS which we
  • 01:04:55 can just use and that's important I said
  • 01:04:58 it with HTML CSS and JavaScript this is
  • 01:05:03 how you could imagine that this button
  • 01:05:04 looks behind-the-scenes this is regular
  • 01:05:07 HTML with elements tags the browser
  • 01:05:11 knows in the end some CSS code for some
  • 01:05:13 styling here with some CSS variable
  • 01:05:16 which we haven't used thus far but which
  • 01:05:17 we will use for the course and maybe
  • 01:05:19 also some JavaScript code to do certain
  • 01:05:22 things behind the scenes now that's all
  • 01:05:25 code we could write on our own but it's
  • 01:05:27 all kind of packaged up in this one
  • 01:05:29 element and that's how you can think
  • 01:05:31 about these components in the end it's
  • 01:05:33 just code you could write on your own
  • 01:05:34 it's no magic it's just things building
  • 01:05:38 blocks the browser understands but it
  • 01:05:41 makes work easier for you because you
  • 01:05:43 don't have to write this HTML code you
  • 01:05:45 don't have to write this specific CSS
  • 01:05:47 code and you don't have to write maybe
  • 01:05:49 some extra JavaScript code which
  • 01:05:51 implements some behavior behind the
  • 01:05:52 scenes instead you got all this packaged
  • 01:05:55 up and you got a more powerful button
  • 01:05:57 then maybe the built in button which had
  • 01:05:59 no default styling and which maybe all
  • 01:06:02 select some other features who you now
  • 01:06:04 have with this ionic button now this
  • 01:06:07 packaging app also has a name
  • 01:06:09 uses a technology called the shadow Dom
  • 01:06:12 which is one of these features unlocked
  • 01:06:14 with those polyfills shadow Dom that's
  • 01:06:17 basically a feature built into browsers
  • 01:06:19 which allows you or in this case the
  • 01:06:23 ionic team to hide certain things away
  • 01:06:26 from your view and let the browser
  • 01:06:28 render it behind the scenes you can see
  • 01:06:32 that shadow Dom in the browser if we go
  • 01:06:34 to the elements tab and we for example
  • 01:06:37 select this button here is the iron
  • 01:06:39 button and there you see this shadow
  • 01:06:40 root now if you expand this you in the
  • 01:06:42 end see what the button does behind the
  • 01:06:44 scenes you see it uses a normal button
  • 01:06:47 element and you see it has a button
  • 01:06:48 native style which you didn't write but
  • 01:06:51 which the ionic team wrote so here you
  • 01:06:53 can see the styles which were applied by
  • 01:06:55 the ionic team and you see the HTML
  • 01:06:57 structure behind that button where you
  • 01:06:59 see there is a span and something called
  • 01:07:02 slots which we'll see in a second and
  • 01:07:03 much much more
  • 01:07:05 you don't have to write this on your own
  • 01:07:07 but of course it's always nice to know
  • 01:07:08 it so that's ionic behind the scenes and
  • 01:07:11 that's what we're working with here with
  • 01:07:13 that back to the SAP let's enhance it a
  • 01:07:16 little bit
  • 01:07:20 let's start by enhancing the way this
  • 01:07:23 looks a little bit I actually like it
  • 01:07:26 but there are a few things I'd like to
  • 01:07:28 improve for example I'd like to have
  • 01:07:30 some spacing around these inputs here
  • 01:07:32 and I want to have the button centered
  • 01:07:34 now there are various ways of doing that
  • 01:07:36 you could of course add your own classes
  • 01:07:40 for example your own CSS classes you can
  • 01:07:42 add those to HTML elements introduced by
  • 01:07:44 ionic as well so we could for example
  • 01:07:47 add inline styling or as I said a class
  • 01:07:50 here which we then style with CSS to
  • 01:07:53 Center all the text or to add some
  • 01:07:55 padding but we can also use certain
  • 01:07:58 features that are built into ionic
  • 01:07:59 already for example there are so-called
  • 01:08:03 utility classes these can be found found
  • 01:08:07 under guide here and then you go to
  • 01:08:11 layout CSS utilities there you find a
  • 01:08:15 couple of classes normal CSS classes
  • 01:08:17 which are also automatically loaded by
  • 01:08:19 ionic which are available everywhere
  • 01:08:21 which you can use for well some stylings
  • 01:08:25 you might want to use from time to time
  • 01:08:26 for a centering text or for adding some
  • 01:08:28 default amount of padding or margin so
  • 01:08:31 in our application here for example we
  • 01:08:34 could go to this iron content and add a
  • 01:08:36 class of iron padding here to add some
  • 01:08:39 padding to this application just by
  • 01:08:41 adding this class without writing any
  • 01:08:44 CSS code we now have a little bit of
  • 01:08:46 padding which I personally like now for
  • 01:08:50 this button here we could add a div here
  • 01:08:55 and then move this button into the dip
  • 01:08:58 so that on the dip we add the iron text
  • 01:09:02 Center utility class and you find all
  • 01:09:05 utility classes in the official Docs of
  • 01:09:07 course by doing that the button is
  • 01:09:09 centered now maybe we also want to have
  • 01:09:12 some margins we could add an iron margin
  • 01:09:15 here and this will add margin in all
  • 01:09:16 directions or we add iron margin top to
  • 01:09:19 add some extra margin to the top here
  • 01:09:21 like this I will actually add it in all
  • 01:09:25 directions so this is something we can
  • 01:09:28 do here now we automatically have a
  • 01:09:30 little bit of a nicer styling
  • 01:09:32 there also is a built in grid system
  • 01:09:36 which you could utilize if you also want
  • 01:09:39 to organize certain elements in a grid
  • 01:09:41 layout and maybe I want to do this I
  • 01:09:43 want to add a second button next to the
  • 01:09:46 first one which actually should allow us
  • 01:09:49 to reset the inputs and clear what's
  • 01:09:51 entered in the two inputs here for that
  • 01:09:54 I can of course add a reset button here
  • 01:09:56 but if we do that and I reload they are
  • 01:10:00 side by side but maybe I want to
  • 01:10:02 distribute them a bit differently that's
  • 01:10:04 where we can use that ionic grid for
  • 01:10:07 that of course we can look for that
  • 01:10:10 right here it is and you'll find a
  • 01:10:13 documentation of how it works it
  • 01:10:15 basically allows you to organize content
  • 01:10:17 in rows and columns and that's something
  • 01:10:20 you might know from our grid systems too
  • 01:10:21 for example from the bootstrap CSS
  • 01:10:23 library in the end you wrap your entire
  • 01:10:27 grid with the iron great element and
  • 01:10:29 then you can have rows and in every row
  • 01:10:31 you can have a couple of columns up to
  • 01:10:33 12 columns you can also assign sizes to
  • 01:10:36 columns so that if you have less than 12
  • 01:10:38 columns you can control how wide this
  • 01:10:41 specific column should be otherwise it
  • 01:10:43 will split the available space equally
  • 01:10:45 so back to our app that means that we
  • 01:10:48 could replace this div here with let's
  • 01:10:50 say the I and grid of course also the
  • 01:10:53 closing element and in there here I have
  • 01:10:56 one row
  • 01:10:58 and now in this row I have my two
  • 01:11:02 buttons but now every button gets its
  • 01:11:05 own column with the iron collar element
  • 01:11:07 and you'll find all these elements in
  • 01:11:09 the official Docs as you just saw so if
  • 01:11:12 we now do this and we save this they go
  • 01:11:16 back here and reload now this is
  • 01:11:19 distributed a bit nicer than before and
  • 01:11:21 of course you can also configure the
  • 01:11:22 grid you could make one column wider
  • 01:11:24 than the other you can change how they
  • 01:11:27 split the available space I am happy
  • 01:11:29 with this layout but definitely feel
  • 01:11:31 free to dive into those docks and play
  • 01:11:34 around with the different configurations
  • 01:11:36 you have for aligning the items and so
  • 01:11:38 on but now this looks nicer let's not
  • 01:11:41 make sure that the reset button all the
  • 01:11:43 works and that it actually resets these
  • 01:11:45 inputs definitely feel free to do this
  • 01:11:48 on your own in the next lecture we'll do
  • 01:11:50 it together and we'll then also add I
  • 01:11:52 can't do those buttons because I think
  • 01:11:54 having icons there would make a lot of
  • 01:11:56 sense
  • 01:12:01 so we got the grid let's now make sure
  • 01:12:03 the reset button does something before
  • 01:12:05 we add icons now for that I will give it
  • 01:12:08 an ID because now we have more than one
  • 01:12:10 button so we can't select this second
  • 01:12:13 button with the query selector and I'll
  • 01:12:15 name it reset button and to be
  • 01:12:17 consistent I'll also give the first
  • 01:12:19 button ID technically we could still
  • 01:12:21 select it with the curry selector
  • 01:12:22 because it is the first button on the
  • 01:12:24 page but anyways I will give it an ID
  • 01:12:26 that's D calc button lets it now back in
  • 01:12:30 JavaScript we can select this first
  • 01:12:32 button no longer with curry selector
  • 01:12:34 like this but with get element by ID and
  • 01:12:37 there it was the calc button and now we
  • 01:12:40 got also the reset button and there we
  • 01:12:43 can get it by ID and I named it to reset
  • 01:12:46 BTN that's the IDE I assigned there now
  • 01:12:49 with that added let's add a new function
  • 01:12:53 reset inputs may be like this and here
  • 01:12:58 all we have to do is reach out to the
  • 01:13:00 height input set the value equal to an
  • 01:13:02 empty string and do the same for the
  • 01:13:05 weight input here now we just need to
  • 01:13:08 wired it up by adding a listener at the
  • 01:13:09 bottom reset button add event listener
  • 01:13:13 and it's a click listener and listen to
  • 01:13:16 a click and point at the reset inputs
  • 01:13:20 function like this this is again just
  • 01:13:23 vanilla JavaScript but now if we go back
  • 01:13:25 to this application and I enter my
  • 01:13:28 height and my weight and for some reason
  • 01:13:30 I don't want to calculate I can press
  • 01:13:32 reset and this does not work well I
  • 01:13:38 should target the value here as well
  • 01:13:40 save that and reload
  • 01:13:45 and this looks better so now it resets
  • 01:13:47 this both and we got these two buttons
  • 01:13:50 working now as I said some icons would
  • 01:13:54 be nice so that we can also see a bit
  • 01:13:57 quicker what each button does but when
  • 01:14:01 it comes to icons we have a component
  • 01:14:03 for that we have the iron icon component
  • 01:14:06 but this is a bit special you click on
  • 01:14:09 it we're taken to ionic and calm it's
  • 01:14:12 still part of ionic it's loaded
  • 01:14:14 automatically in an ionic project or in
  • 01:14:16 our case with these ionic imports we add
  • 01:14:18 it but it wouldn't be uncommon for you
  • 01:14:20 to use ionic ons outside of ionic
  • 01:14:22 projects as well you can add those ionic
  • 01:14:24 components to any project you want after
  • 01:14:26 all
  • 01:14:26 now here you get a bunch of icons and
  • 01:14:29 here for example we could search for a
  • 01:14:31 calculator to find a fitting icon like
  • 01:14:33 this one and now click on it and now at
  • 01:14:35 the bottom we see the code we can use to
  • 01:14:39 add this icon and thanks to these ionic
  • 01:14:42 imports which we have here we can't just
  • 01:14:44 add it like this and we don't need to do
  • 01:14:45 anything else now we can add this in
  • 01:14:48 here instead of this iron button there
  • 01:14:51 besides this calculate text we can add
  • 01:14:53 the iron icon and if we save this and we
  • 01:14:56 go back and we reload we get the
  • 01:15:00 calculator here now that's okay but but
  • 01:15:02 it's a bit close to the text maybe now
  • 01:15:05 that's where we can use an ever concept
  • 01:15:07 web component support and which is
  • 01:15:10 therefore utilized by ionic we can use
  • 01:15:12 slots slots allow us to control where
  • 01:15:16 insert offer components something should
  • 01:15:18 be output and ionic uses this internally
  • 01:15:21 to offer us different slots we can use
  • 01:15:23 an abutment control wherein the button
  • 01:15:25 exactly this should be output now by
  • 01:15:27 default it's all in the central defaults
  • 01:15:29 slot but we could assign a different
  • 01:15:32 slot to the icon just by adding the slot
  • 01:15:34 attribute and the surrounding element
  • 01:15:37 will then take advantage of this and
  • 01:15:38 here for example we have the start slot
  • 01:15:42 now to see which slots are supported the
  • 01:15:45 official docks are your friend there if
  • 01:15:47 you go to the button
  • 01:15:50 component you will see a slots area and
  • 01:15:54 any component that has slots will have
  • 01:15:57 such an area in the docks and there you
  • 01:15:59 see these slots you could target and
  • 01:16:01 there is the start slot now with that
  • 01:16:04 start slot I can save this file reload
  • 01:16:07 and now you see this looks nicer now
  • 01:16:10 let's do the same for a reset of course
  • 01:16:12 feel free to do it on your own first
  • 01:16:13 I will search for reset here and yeah I
  • 01:16:16 like this icon so again we can just wrap
  • 01:16:19 this here go back to our page go back to
  • 01:16:23 our code and instead of the button next
  • 01:16:25 to our text here I will add this icon
  • 01:16:29 and again use the start slot to make
  • 01:16:32 sure this icon is positioned nicely if
  • 01:16:35 you do that and we reload now here's the
  • 01:16:38 reset icon
  • 01:16:39 so that's decent that's great we also
  • 01:16:41 can change the look of the button a
  • 01:16:43 little bit we go back to the button
  • 01:16:45 docks here by changing its fill mode you
  • 01:16:50 see we can assign a fill attribute and
  • 01:16:53 we can set it to default or actually as
  • 01:16:56 you might guess this is the default you
  • 01:16:57 don't need to set this but you can
  • 01:16:59 change it to clear or outline for
  • 01:17:01 example and to see what this does let's
  • 01:17:04 just try it by the way that's in general
  • 01:17:06 a good strategy if you are not sure what
  • 01:17:08 something does or what some attribute
  • 01:17:10 does just give it a try you can't break
  • 01:17:12 it you can always undo it if you're not
  • 01:17:14 happy with the result so here on this
  • 01:17:17 button on the button not on the icon
  • 01:17:20 that's important on the button I can add
  • 01:17:22 the fill attribute and for example set
  • 01:17:25 this to outline now we can again save
  • 01:17:28 this and go back to our page and now
  • 01:17:30 this button looks different and that
  • 01:17:32 really is the power of ionic and web
  • 01:17:34 components you can easily configure
  • 01:17:36 things and change things there we got
  • 01:17:39 these buttons in place that's nice of
  • 01:17:41 course we still got no validation but
  • 01:17:43 that's ok but now we get a decent
  • 01:17:47 looking app here now as a final step
  • 01:17:50 here before we finally combine this all
  • 01:17:52 with react which is ultimately why we're
  • 01:17:54 all here right before we do that as a
  • 01:17:56 final step let's actually improve this a
  • 01:18:00 little bit by now finally outputting the
  • 01:18:03 result
  • 01:18:03 below the buttons instead of in the
  • 01:18:06 console
  • 01:18:10 so finally let's use this diff here this
  • 01:18:14 resulted let's actually maybe all's use
  • 01:18:17 that into our grid here in a separate
  • 01:18:19 row and one column which then
  • 01:18:21 automatically will span the entire width
  • 01:18:23 of the row and now here inside of that
  • 01:18:26 div I want to output my result actually
  • 01:18:29 since it is now in this column I can
  • 01:18:31 give this column here an ID I'll press
  • 01:18:33 alt and get rid of that there because as
  • 01:18:36 you already saw we can target these
  • 01:18:38 elements these ionic components with
  • 01:18:40 regular JavaScript so since I only need
  • 01:18:43 this as you could say a hook to output
  • 01:18:45 something to render a new element we can
  • 01:18:47 absolutely use it like this now in apt
  • 01:18:51 Reyes in calculate BMI instead of
  • 01:18:54 console logging dpi BMI like this
  • 01:18:56 I want to output it now first of all
  • 01:18:58 I'll check if this BMI is not a number
  • 01:19:02 in this case I just want to return here
  • 01:19:06 and not continue with the function
  • 01:19:08 execution so that we don't output
  • 01:19:10 anything if it's not a number we could
  • 01:19:11 also throw an alert here and say not a
  • 01:19:14 number please check inputs this will be
  • 01:19:17 a regular browser alert by the way not
  • 01:19:19 an eye on your alert we'll learn about
  • 01:19:21 those as well but later in the course so
  • 01:19:25 now we get this if we don't have not a
  • 01:19:28 number so if we have a number if we have
  • 01:19:30 a hopefully valid result we want to
  • 01:19:32 output it for this let's select this
  • 01:19:34 result area by its ID you're all named
  • 01:19:39 is result area maybe with
  • 01:19:43 document.getelementbyid e result and in
  • 01:19:47 there I want to render a new element now
  • 01:19:49 for that we can create a new element the
  • 01:19:51 result element with document create
  • 01:19:55 element not attribute create element and
  • 01:19:59 then here I want to create a I and card
  • 01:20:01 and yes you can do that you can create
  • 01:20:04 ionic web components with JavaScript you
  • 01:20:07 cannot just add into HTML you can create
  • 01:20:10 them like this the iron card is an
  • 01:20:12 element built into ionic here it is it
  • 01:20:15 gives you this card look we could add
  • 01:20:18 images and so on but we don't need this
  • 01:20:19 year I want to instead create such a
  • 01:20:22 card and in that card I said
  • 01:20:24 we want to output my ayan card counted
  • 01:20:27 element which holds the result so Judas
  • 01:20:31 result element to this card which is
  • 01:20:33 therefore I'll set the innerhtml
  • 01:20:37 to template literal string here so that
  • 01:20:42 I can easily inject dynamic content here
  • 01:20:44 and also write this as a multi-line
  • 01:20:46 string string to make it easier to read
  • 01:20:48 and there we can add the iron card
  • 01:20:50 content element and also close it iron
  • 01:20:53 card content so that's that element here
  • 01:20:58 in there I want to have let's say a h2
  • 01:21:01 tip and all to close this h2 tag of
  • 01:21:04 course and in there we can now inject
  • 01:21:06 something with this syntax and this by
  • 01:21:08 the way is regular JavaScript syntax
  • 01:21:10 it's called template literal and we're
  • 01:21:13 template string although you can look it
  • 01:21:15 up if you don't know it attached you
  • 01:21:17 find a link to more information about
  • 01:21:18 this and in my complete JavaScript
  • 01:21:21 course for example you learn about this
  • 01:21:22 as well so this is how we can inject the
  • 01:21:25 value of a variable or of an expression
  • 01:21:27 in general into this string here and
  • 01:21:30 here I want to inject DB mi value so
  • 01:21:33 this is output in the card content which
  • 01:21:35 is part of this card because I set it as
  • 01:21:37 the inner HTML of this card and now we
  • 01:21:39 just need to reach out to the result
  • 01:21:41 area and there I want you add this new
  • 01:21:47 element for example with append child
  • 01:21:50 result element I also want to make sure
  • 01:21:53 that may be any existing elements I had
  • 01:21:56 in there are cleared first so I'll reach
  • 01:21:58 out to the result area and set inner
  • 01:21:59 HTML to an empty string so that it has
  • 01:22:02 no HTML content and then I add this
  • 01:22:04 child of course there are different ways
  • 01:22:06 of doing that but this should be a
  • 01:22:08 pretty straightforward understandable
  • 01:22:09 way of rendering a HTML element
  • 01:22:12 dynamically with some dynamic content
  • 01:22:14 with all that we can go back to our
  • 01:22:17 application
  • 01:22:18 reload enter our values again click
  • 01:22:22 calculate and here's our card and if I
  • 01:22:25 change something here for example I
  • 01:22:27 changed my height we can calculate this
  • 01:22:30 again of course we can also reset this
  • 01:22:31 the card is not deleted you could add
  • 01:22:34 this logic but it's still here but the
  • 01:22:36 inputs are clear
  • 01:22:37 and if I calculates again I get a
  • 01:22:39 warning here because I get not a number
  • 01:22:42 so this is all working we're now also
  • 01:22:44 dynamically creating an element here
  • 01:22:46 which of course also is quite nice to
  • 01:22:49 have however we have missing features
  • 01:22:54 for example here we're not supporting
  • 01:22:57 the non-metric system so feet and inches
  • 01:23:00 and we can maybe already also see why
  • 01:23:03 using a library like react or some
  • 01:23:06 JavaScript framework might be
  • 01:23:08 interesting because we wrote a lot of
  • 01:23:10 JavaScript code here and that's of
  • 01:23:12 course kind of the idea about JavaScript
  • 01:23:14 heavy front and app but we're already
  • 01:23:16 writing some code which we normally
  • 01:23:18 don't really want to write as a
  • 01:23:20 JavaScript developer here when we
  • 01:23:22 interact with the Dom to add an element
  • 01:23:24 and clear content this is the kind of
  • 01:23:27 code we don't we want to write we use
  • 01:23:30 libraries like react to define the goal
  • 01:23:34 and to focus on our core business logic
  • 01:23:37 like this calculation here because
  • 01:23:39 that's where the value of our
  • 01:23:40 application really comes from the
  • 01:23:43 technical interaction with the document
  • 01:23:46 that's really something we don't want to
  • 01:23:48 work on it's easy to introduce errors
  • 01:23:50 here or to write code which is not that
  • 01:23:52 performant like here will be always
  • 01:23:54 clear the existing content that might be
  • 01:23:57 unnecessary to do so we can easily mess
  • 01:24:00 up code here but we also want to just
  • 01:24:03 focus on this code so we can use a
  • 01:24:05 library like react to take away this
  • 01:24:07 part here and let react handle this let
  • 01:24:10 react interact with the Dom so that we
  • 01:24:12 can focus on the core business logic
  • 01:24:15 that's why we use react in normal web
  • 01:24:18 apps and then the enters is just a
  • 01:24:20 normal web app a normal web app will be
  • 01:24:22 all zeros ionic so therefore before we
  • 01:24:26 have a look at capacitor and what we can
  • 01:24:28 do with that and how we can get a native
  • 01:24:29 mobile app let's actually continue with
  • 01:24:31 this web app for the moment and let's at
  • 01:24:34 react to it let's rebuild us with react
  • 01:24:37 that ionic to see how that works how
  • 01:24:39 react helps us how we use ionic and
  • 01:24:42 react and then thereafter calls use
  • 01:24:44 capacitor to turn this into our first
  • 01:24:46 native mobile app not the last one in
  • 01:24:49 the course the first one
  • 01:24:54 so now did we started at playing around
  • 01:24:58 with ionic and we built this first very
  • 01:25:00 simple application with just ionic
  • 01:25:03 components and vanilla JavaScript just
  • 01:25:06 so that you could get a feeling for how
  • 01:25:09 you generally work with ionic it's now
  • 01:25:12 of course time to make the next step
  • 01:25:14 because this is an ionic react course so
  • 01:25:17 in this module we will now introduce
  • 01:25:20 react to the equation we will make sure
  • 01:25:23 that we actually built this application
  • 01:25:26 with not just ionic but with ionic and
  • 01:25:29 react and therefore we reap all the
  • 01:25:32 benefits libraries like react give us
  • 01:25:35 and of course in this course react in
  • 01:25:38 general gives us so in this module we
  • 01:25:42 will see how we can create a react and
  • 01:25:45 ionic project so that we can get started
  • 01:25:48 writing code right away we'll then see
  • 01:25:50 how we work with ionic components in
  • 01:25:53 react projects and how we write react
  • 01:25:57 code in general in react ionic
  • 01:25:59 applications and we'll also have a look
  • 01:26:02 at a few components we haven't seen
  • 01:26:05 before and in general throughout the
  • 01:26:07 course will of course see more and more
  • 01:26:09 components but especially important
  • 01:26:12 we'll have a look at overlay components
  • 01:26:15 and you will see how you actually work
  • 01:26:18 with those in react and ionic and how
  • 01:26:21 you can easily make sure that you for
  • 01:26:23 example show an alert to the user a more
  • 01:26:26 beautiful alert than the built in
  • 01:26:28 browser one and so on
  • 01:26:34 so let's get started and to get started
  • 01:26:37 we can go back to the official
  • 01:26:39 documentation and there you can go to
  • 01:26:42 installation CLI installation because
  • 01:26:46 now we're going to use this command line
  • 01:26:48 interface the ionic team created for us
  • 01:26:50 to create and manage projects now for
  • 01:26:54 that we need to install it and we'll
  • 01:26:56 install it with a tool called
  • 01:26:58 NPM which stands for node package
  • 01:27:00 manager now chances are you know this
  • 01:27:03 tool because basic react knowledge was a
  • 01:27:06 prerequisite and you typically create
  • 01:27:08 react projects with help of NPM as well
  • 01:27:11 in case you don't NPM stands for a node
  • 01:27:15 package manager and it is a tool that is
  • 01:27:17 distributed together with node J s now
  • 01:27:21 node J s is a JavaScript runtime that
  • 01:27:23 allows you to run JavaScript outside of
  • 01:27:26 the browser and you could use nodejs to
  • 01:27:28 for example build server-side
  • 01:27:30 applications with JavaScript now that's
  • 01:27:33 not what we'll do in this course because
  • 01:27:35 this course is about building front ends
  • 01:27:37 with react and ionic but nonetheless we
  • 01:27:40 will need no trace for two reasons one
  • 01:27:43 reason is this NPM tool does node
  • 01:27:46 package manager tool which allows us to
  • 01:27:48 install dependencies like this ionic CLI
  • 01:27:51 so it's basically a tool that helps us
  • 01:27:53 install stuff but in addition we will
  • 01:27:56 also need note J s itself even though
  • 01:27:58 we're not going to write any node JS
  • 01:28:00 code because it will turn out that the
  • 01:28:03 react project we create behind the
  • 01:28:06 scenes will use no trace to bring up a
  • 01:28:08 development server which we can use to
  • 01:28:10 test our application so simply go to
  • 01:28:13 node.js org and download the latest
  • 01:28:16 version of nodejs there whatever version
  • 01:28:19 that is when you're viewing this video
  • 01:28:20 so here you can just click this button
  • 01:28:23 you will get a normal installer you can
  • 01:28:25 walk through that installer install
  • 01:28:27 nodejs and you will automatically get
  • 01:28:30 this npm tool as well once you did that
  • 01:28:33 you're ready to run this command so
  • 01:28:36 let's do this simply open up your normal
  • 01:28:39 terminal or command prompt you can use
  • 01:28:42 it on all operating systems and paste it
  • 01:28:44 in now one important note on Mac OS and
  • 01:28:47 Linux
  • 01:28:48 you might be getting a permission error
  • 01:28:50 if you run it like this if you do add
  • 01:28:53 sudo in front of that on Windows you
  • 01:28:56 don't need to do that and there it also
  • 01:28:58 won't work sudo is not a support command
  • 01:29:00 there and this will ensure that this
  • 01:29:02 runs fine you might be prompted for your
  • 01:29:04 password so if you are just enter your
  • 01:29:07 system password and now this will
  • 01:29:09 install this ionic CLI as a globally
  • 01:29:12 available tool on your operating system
  • 01:29:16 once you installed it you can use that
  • 01:29:19 tool to run some commands and now make
  • 01:29:22 sure you navigate into a folder with
  • 01:29:25 this CD command where you want to create
  • 01:29:27 your ionic react project now I already
  • 01:29:31 am in such a folder and therefore I will
  • 01:29:33 now run ionic start and this is a
  • 01:29:36 command which allows you to create a new
  • 01:29:38 project so I'll just enter here and now
  • 01:29:41 here I'm asked whether I want to use
  • 01:29:43 angular or react over time you might see
  • 01:29:46 more options here but of course I will
  • 01:29:48 go for react here I also do have an
  • 01:29:50 ionic angular course if you're an
  • 01:29:53 angular developer but since you took
  • 01:29:55 this course you probably are not or at
  • 01:29:57 least not exclusively and therefore I
  • 01:29:59 will choose react now next we need to
  • 01:30:02 assign a name and I'll just name it
  • 01:30:03 ionic – react hit enter and now you've
  • 01:30:08 got a couple of starter templates to
  • 01:30:10 choose from you could for example start
  • 01:30:12 with an application that automatically
  • 01:30:14 uses tab navigation but we will add the
  • 01:30:18 step-by-step on our own so that we can
  • 01:30:20 see how it works behind the scenes and
  • 01:30:21 hence we'll just start with the blank
  • 01:30:24 template here so choose blank with the
  • 01:30:26 arrow keys and hit enter and now you can
  • 01:30:30 last but not least answer whether you
  • 01:30:32 want to integrate your new app with
  • 01:30:34 capacitor and for the moment you can
  • 01:30:36 choose no here we can change this later
  • 01:30:39 and we will for the moment we'll just
  • 01:30:41 build an ionic react app without
  • 01:30:43 capacitor but we will add it later so
  • 01:30:45 choose n for no here and hit enter and
  • 01:30:49 this will now create a new project and
  • 01:30:52 set everything up such that you can
  • 01:30:54 write your ionic react code in there so
  • 01:30:57 let's wait for this process to finish
  • 01:31:00 and here we are now you already see some
  • 01:31:04 instructions here at the bottom we can
  • 01:31:06 now see D into D created project in my
  • 01:31:09 case into the ionic react folder because
  • 01:31:11 that's the name I chose and in there we
  • 01:31:14 can run ionic serve to bring up a
  • 01:31:16 development server which hosts our
  • 01:31:18 front-end our application on a local
  • 01:31:22 host address which we can use for
  • 01:31:24 testing the application so will not be
  • 01:31:26 clicking on some HTML file anymore but
  • 01:31:29 instead we'll use this hosted dummy
  • 01:31:31 application I'm not going to do that
  • 01:31:33 here however instead let me open that
  • 01:31:36 folder with visuals to do code with this
  • 01:31:39 IDE I already showed before and here it
  • 01:31:42 is now inside of that project in Visual
  • 01:31:46 Studio code I can go to terminal new
  • 01:31:48 terminal and open up such a terminal
  • 01:31:51 here and that's your normal system
  • 01:31:53 terminal or command prompt just
  • 01:31:55 integrated into this IDE and here we can
  • 01:31:58 now run ionic surf and bring up that
  • 01:32:01 development server with this way the
  • 01:32:04 difference is that now I got this
  • 01:32:05 running server here integrated in my IDE
  • 01:32:08 and if we ever should get any errors
  • 01:32:10 being output there we can immediately
  • 01:32:12 see it whilst writing code instead of
  • 01:32:14 having to check a separate terminal
  • 01:32:17 running somewhere else that's why I'm
  • 01:32:19 using this integrated approach now this
  • 01:32:21 process which I started here will keep
  • 01:32:23 on running and you should keep it
  • 01:32:25 running as long as you are working on
  • 01:32:27 your project as long as you are writing
  • 01:32:30 code because it will also watch your
  • 01:32:32 files and whenever you change something
  • 01:32:34 it will automatically rebuild this
  • 01:32:37 application behind the scenes and reload
  • 01:32:40 the hosted web app in your browser and
  • 01:32:43 speaking of that it should have opened
  • 01:32:45 up a new tab in your browser if it
  • 01:32:48 didn't you can manually go there under
  • 01:32:51 localhost 8100 and there you should see
  • 01:32:56 this dummy application running this
  • 01:33:00 simple application where you got a
  • 01:33:02 toolbar at the top and some content in
  • 01:33:04 the middle of the page and I'll open up
  • 01:33:06 the browser developer tools and go back
  • 01:33:09 to this mobile preview mode here which I
  • 01:33:11 already showed you earlier but of course
  • 01:33:13 that's optional
  • 01:33:14 you can also stick to the browser window
  • 01:33:16 to the normal one so with that we got
  • 01:33:18 our first ionic react app this dummy app
  • 01:33:21 we got for a by using the ionic CLI and
  • 01:33:24 now we can explore what we have in our
  • 01:33:27 project folder it's certainly more than
  • 01:33:30 just a HTML file and a script file but
  • 01:33:33 you should already know that from
  • 01:33:35 regular react apps because you know that
  • 01:33:38 you write code in a very modern way with
  • 01:33:41 your code split across multiple files
  • 01:33:42 using features like JSX and react and
  • 01:33:46 then you got this development workflow
  • 01:33:48 this development server also where
  • 01:33:51 everything is bundled up and optimized
  • 01:33:53 and then served in your application here
  • 01:33:55 and so that you can preview it so the
  • 01:33:58 actual code we write here is actually in
  • 01:34:00 the source folder and the public folder
  • 01:34:02 also is important because that's the
  • 01:34:04 single page we're working with we don't
  • 01:34:07 really need to touch this a lot
  • 01:34:09 occasionally we will visit it but this
  • 01:34:12 is in the end a single HTML page which
  • 01:34:14 will be served as part of your
  • 01:34:15 application and where the entire
  • 01:34:18 bundled-up script code which we write
  • 01:34:20 here in the source folder will be hosted
  • 01:34:22 in now with that let's close public we
  • 01:34:25 also got some configuration files here
  • 01:34:27 package dot JSON for all the
  • 01:34:29 dependencies were using in the project
  • 01:34:31 this will grow over time when we add
  • 01:34:33 more dependencies ionic conflict for a
  • 01:34:36 some ionic configuration we don't need
  • 01:34:38 to touch this at the moment and the TS
  • 01:34:41 conflict or Chasen fall and you might
  • 01:34:43 not be used to that you also might see
  • 01:34:46 something strange if you open the source
  • 01:34:48 folder because in there we got a
  • 01:34:50 components folder we might know that a
  • 01:34:53 page is folder ok maybe you saw that
  • 01:34:55 before as well but then we got dot T as
  • 01:34:58 X Files and that's strange
  • 01:35:01 you might be used to working with dot
  • 01:35:03 jeaious or dot JS x files and if you
  • 01:35:07 open such a file you see some familiar
  • 01:35:12 things imports like this where we import
  • 01:35:15 react but then if we scroll down this is
  • 01:35:18 strange this colon after app with this
  • 01:35:22 thing I mean this is an arrow function
  • 01:35:24 where we returns up JSX code these
  • 01:35:26 probably are some
  • 01:35:28 ionic components they look different
  • 01:35:31 that before but yeah maybe that's just
  • 01:35:33 how it has to look I'll come back to
  • 01:35:34 that but what's this colon thing here
  • 01:35:37 why are we working in dot T as X Files
  • 01:35:44 here is one important thing when working
  • 01:35:47 with react and ionic you typically use
  • 01:35:51 typescript for your react application
  • 01:35:54 and that is something you might not be
  • 01:35:56 used to because normally in react
  • 01:35:58 development you work with JavaScript
  • 01:36:01 now you can absolutely use typescript
  • 01:36:03 with react even if you're not using
  • 01:36:05 ionic but you don't see that as often as
  • 01:36:08 you see react with JavaScript
  • 01:36:10 however ionic react projects use
  • 01:36:12 typescript by default and whilst you
  • 01:36:15 could change this which is kind of
  • 01:36:16 tricky or requires some manual wiring up
  • 01:36:19 work I recommend that you stick to
  • 01:36:21 typescript no worries it's easy to learn
  • 01:36:24 and you will learn it in this course so
  • 01:36:26 I will teach you what you need to know
  • 01:36:28 along the way nonetheless if you like it
  • 01:36:32 and if you want to know more about it I
  • 01:36:33 get a complete typescript course which
  • 01:36:35 you can also check out to learn all
  • 01:36:37 about typescript and also more about
  • 01:36:40 typescript and react in there typescript
  • 01:36:42 is just a superset to JavaScript which
  • 01:36:45 adds extra features to the JavaScript
  • 01:36:48 language for example types static types
  • 01:36:51 so that you can add type safety to
  • 01:36:54 JavaScript and typescript is a language
  • 01:36:56 which doesn't run like this in the
  • 01:36:57 browser instead it needs to be compiled
  • 01:37:00 back to JavaScript and this whole
  • 01:37:02 compilation process is already included
  • 01:37:04 in this project setup it happens behind
  • 01:37:07 the scenes and the tears conflict or
  • 01:37:09 JSON file in the end is the file where
  • 01:37:12 this compilation process is configured
  • 01:37:14 now if you know what you're doing you
  • 01:37:16 can find Huhn this to your requirements
  • 01:37:18 but the default setup is absolutely fine
  • 01:37:20 and you don't need to change anything in
  • 01:37:22 there in the end the code we write here
  • 01:37:25 is very familiar to the JavaScript code
  • 01:37:27 you already know you can add some extra
  • 01:37:30 features with the help of typescript to
  • 01:37:32 write better and less error-prone code
  • 01:37:35 and it automatically is compiled down to
  • 01:37:39 JavaScript and bundled up by that
  • 01:37:42 development workflow which is running
  • 01:37:43 behind the scenes with the help of ionic
  • 01:37:45 serve so that is how you have to think
  • 01:37:48 about that other than that this is a
  • 01:37:50 regular react application where we have
  • 01:37:54 a react component which returns some JSX
  • 01:37:56 where we have a couple of imports
  • 01:37:58 these are all just CSS imports to wire
  • 01:38:00 up the different styling things that we
  • 01:38:03 need in a ionic application before we
  • 01:38:06 had CDN links now we have to import
  • 01:38:08 everything manually here and you should
  • 01:38:10 just leave these imports and we have our
  • 01:38:12 index tech TSX file where the entire
  • 01:38:16 application component the root component
  • 01:38:18 is mounted to the Dom with react on
  • 01:38:22 render here so this is how this works
  • 01:38:24 really just what you already know just
  • 01:38:27 with this twist of using this extra
  • 01:38:30 language typescript now in order to get
  • 01:38:34 started writing some code let's first do
  • 01:38:36 some cleanup work here and remove some
  • 01:38:38 files and code which we don't need at
  • 01:38:41 the moment for example here I will
  • 01:38:43 remove this Service Worker unregister
  • 01:38:45 thing remove this import add a new line
  • 01:38:48 here to make this a bit cleaner remove
  • 01:38:51 setup tests because we're not going to
  • 01:38:53 write any tests here so I will remove
  • 01:38:55 the file we don't need it we could
  • 01:38:57 remove the Service Worker file I will
  • 01:38:59 leave it here for the moment but you
  • 01:39:00 could remove it in app tsx I also want
  • 01:39:04 to clean up this router stuff I will
  • 01:39:08 remove the iron router outlet import I
  • 01:39:10 will remove this import from ionic
  • 01:39:13 reactor outer we will add routing later
  • 01:39:16 but for the moment we don't need it I
  • 01:39:18 will also remove this import from react
  • 01:39:21 router Dom I will leave the other
  • 01:39:23 imports here leave all the CSS imports
  • 01:39:26 and in here just return I an app and in
  • 01:39:29 there maybe just a h2 tag where we say
  • 01:39:33 this works and we'll add more useful
  • 01:39:36 content soon the theme folder holds some
  • 01:39:40 styling we'll have a whole module about
  • 01:39:42 that for the moment we can ignore it the
  • 01:39:45 pages folder has two components which we
  • 01:39:48 now don't need anymore
  • 01:39:49 so we can remove the pages folder that
  • 01:39:52 means that an app tsx we can now also
  • 01:39:54 get rid of that home import here so that
  • 01:39:57 we only have these two imports left we
  • 01:39:59 can remove the app dot test tsx file
  • 01:40:02 since again we're not going to write any
  • 01:40:04 tests and in components I will also
  • 01:40:07 remove all the files there you can
  • 01:40:10 always remove the entire components
  • 01:40:11 folder for the
  • 01:40:12 thereafter I will restart the psionic
  • 01:40:15 serve process and save all files and now
  • 01:40:17 we have a cleaned-up project where we
  • 01:40:19 can gradually build up our app from
  • 01:40:22 scratch you also find this cleaned up
  • 01:40:25 snapshot attached to this lecture so
  • 01:40:28 that we can all start from the same
  • 01:40:29 starting point if you now reload your
  • 01:40:33 application here in this low closed 8100
  • 01:40:35 browser you can also remove that home
  • 01:40:37 segment and the URL you should just see
  • 01:40:40 this works here and this is now where we
  • 01:40:43 will start and where we will now migrate
  • 01:40:46 our project we built before to this
  • 01:40:50 ionic react setup
  • 01:40:56 so we got this cleaned up project and
  • 01:40:58 then before we actually started writing
  • 01:41:00 some real ionic react code let me give
  • 01:41:03 you a brief introduction to typescript
  • 01:41:06 in case you already know typescript and
  • 01:41:08 you know how react works with typescript
  • 01:41:10 you can of course just skip this lecture
  • 01:41:12 this here is a type assignment and it's
  • 01:41:16 the most important thing typescript
  • 01:41:18 adds as I said typescript is a superset
  • 01:41:22 to JavaScript you could translate this
  • 01:41:24 with it's an extension of JavaScript
  • 01:41:27 it adds new features to the JavaScript
  • 01:41:30 language and the most important feature
  • 01:41:32 that it adds is the feature of static
  • 01:41:35 types which means that whereas you have
  • 01:41:38 dynamic types in vanilla JavaScript you
  • 01:41:41 now have to define or you can define
  • 01:41:44 types in advance so for example here we
  • 01:41:47 are defining the type of app a type
  • 01:41:51 assignment is always done by adding a
  • 01:41:54 colon and thereafter the type the thing
  • 01:41:57 in front of the colon should have so
  • 01:42:00 here we're saying this app constant
  • 01:42:02 should hold a value of this type now
  • 01:42:07 what is this type though this is a type
  • 01:42:10 coming from react in the end so with
  • 01:42:13 react dot we're accessing the F C type
  • 01:42:16 in there and that's simply coming from
  • 01:42:19 our react type packet which already was
  • 01:42:22 installed for us here in package.json
  • 01:42:24 you can see it it's this types package
  • 01:42:27 which basically adds type definitions to
  • 01:42:31 the react library you could say those
  • 01:42:33 packages exist for all major libraries
  • 01:42:36 and we're saying okay this constant app
  • 01:42:39 should hold a react FC type now this
  • 01:42:42 actually stands for functional component
  • 01:42:45 and again it is a type predefined in
  • 01:42:48 this special types package which already
  • 01:42:51 was added to this project by ionic start
  • 01:42:54 by this command we used to create the
  • 01:42:56 project this is simply one of the
  • 01:42:59 built-in types which is provided by this
  • 01:43:01 types package now it defines that
  • 01:43:04 whatever we store inside of app has to
  • 01:43:07 be a valid functional component
  • 01:43:09 and what is a valid functional component
  • 01:43:12 well it has to be a function of course
  • 01:43:15 and it has to be a function that returns
  • 01:43:17 JSX and that's just what this function
  • 01:43:20 here does that's why it fulfills this
  • 01:43:23 requirement if I would temporarily cut
  • 01:43:26 this and for example store a string in
  • 01:43:29 there I get an error as you can tell now
  • 01:43:32 normally without this type assignment
  • 01:43:35 this would be valid JavaScript code
  • 01:43:37 right it would not work in a react a bit
  • 01:43:40 would not bring something to the screen
  • 01:43:42 but from a pure JavaScript code
  • 01:43:45 perspective this without the type
  • 01:43:47 assignment here so like this would be
  • 01:43:50 valid JavaScript code it would just be a
  • 01:43:53 string stored in a constant with that
  • 01:43:57 type assignment however it becomes
  • 01:43:59 invalid not in JavaScript world because
  • 01:44:02 JavaScript doesn't know these types but
  • 01:44:05 in typescript world and as I mentioned
  • 01:44:07 the typescript code will be compiled to
  • 01:44:10 JavaScript and during this compilation
  • 01:44:12 process the typescript compiler will
  • 01:44:16 check for errors like this and Visual
  • 01:44:19 Studio code is actually a typescript
  • 01:44:21 aware IDE which is why we already see
  • 01:44:24 that error in the IDE even before
  • 01:44:27 compiling the compilation would only
  • 01:44:30 happen once I save this now it is
  • 01:44:32 rebuild it compiles as you can tell and
  • 01:44:35 normally you should see the error down
  • 01:44:38 there unfortunately this is a bit buggy
  • 01:44:40 and therefore it's not showing the error
  • 01:44:42 down there but we still see it in the
  • 01:44:44 IDE here we see that the type hello so
  • 01:44:48 this text basically is not assignable to
  • 01:44:51 the type functional component so we have
  • 01:44:54 to revert this to bring back our
  • 01:44:56 functional component to have a valid
  • 01:44:59 code snippet here and this is the
  • 01:45:01 feature typescript adds now of course
  • 01:45:04 you can add types everywhere not just on
  • 01:45:07 constants that hold functional
  • 01:45:08 components and of course there also are
  • 01:45:10 more types than this functional
  • 01:45:12 component type there for example also
  • 01:45:15 are some default types like the string
  • 01:45:18 type with this I would be saying that
  • 01:45:21 title
  • 01:45:23 only hold a string and then here I did
  • 01:45:27 store a string so this is valid my IDE
  • 01:45:29 here only compare complaints because I'm
  • 01:45:31 never using this value but from a type
  • 01:45:33 perspective this is correct
  • 01:45:35 if I would use to build a number type
  • 01:45:37 instead and string and number and
  • 01:45:40 boolean are default types typescript
  • 01:45:42 chips with then I would be getting an
  • 01:45:45 error again because this clearly is not
  • 01:45:47 a number so this is the idea behind
  • 01:45:49 typescript again you can take my types
  • 01:45:52 of course to learn more about it
  • 01:45:53 otherwise I will teach it here along the
  • 01:45:56 way step by step now of course we need
  • 01:46:00 no title here we only need this
  • 01:46:02 functional component and there I do
  • 01:46:04 return this I and app I mentioned that
  • 01:46:07 we have one I an app component per
  • 01:46:09 application if you remember and in there
  • 01:46:12 I have a regular h2 tag now since I
  • 01:46:16 introduced you to typescript let's now
  • 01:46:18 move on to using ionic in this react
  • 01:46:21 typescript application how does that
  • 01:46:24 work and how can we get closer to this
  • 01:46:26 ionic application we already built
  • 01:46:28 before
  • 01:46:33 we got the ion app component here and if
  • 01:46:36 you compare this to the ionic app we
  • 01:46:39 built before in the module before this
  • 01:46:41 module you might notice an important
  • 01:46:44 difference here I in app looks like this
  • 01:46:47 we have this notation where we have
  • 01:46:50 starting capital characters and only one
  • 01:46:53 word without a dash whereas before we
  • 01:46:57 use these components which look much
  • 01:46:59 more like regular HTML elements now we
  • 01:47:02 use this syntax here in ionic react
  • 01:47:05 because we're not writing normal HTML
  • 01:47:08 code here but we are using JSX code here
  • 01:47:11 and it turns out that JSX doesn't
  • 01:47:15 support web components like this out of
  • 01:47:18 the box you need some fine-tuning there
  • 01:47:21 and that's some fine tuning the ionic
  • 01:47:24 react him already did for us if we
  • 01:47:26 scroll to the top of this app TSX file
  • 01:47:29 we actually see that we're importing
  • 01:47:31 iron app from @ ionic slash react that's
  • 01:47:36 important we're importing this this
  • 01:47:38 turns out to be a react component which
  • 01:47:42 we therefore of course can use like we
  • 01:47:44 can use our custom components in the JSX
  • 01:47:47 code so these HTML components which we
  • 01:47:51 can also use like h2 there we really can
  • 01:47:54 only use the default HTML ones not the
  • 01:47:57 web components unlocked by ionic those
  • 01:48:00 ionic components have to be imported
  • 01:48:02 from @ ionic react just like we're
  • 01:48:05 importing our own components from our
  • 01:48:07 files you could say this simply has
  • 01:48:09 technical reasons in react and the ionic
  • 01:48:13 reactant gives us this ionic react back
  • 01:48:15 edge where we in the end have these
  • 01:48:17 wrapper react components which wrap
  • 01:48:21 these ionic web components and wire them
  • 01:48:25 up behind the scenes so did what we us
  • 01:48:27 behind the scenes is still this we're
  • 01:48:30 still using the regular ionic web
  • 01:48:32 components but we got this react
  • 01:48:36 component wrapper for all those
  • 01:48:38 components where we then just work with
  • 01:48:40 those react components in our JSX code
  • 01:48:44 now the translation
  • 01:48:46 from this to this of course is easy you
  • 01:48:50 omit the – and you start every word in a
  • 01:48:54 word with a capital character so I an
  • 01:48:57 app written like this all lowercase with
  • 01:48:59 a dash becomes this without a dash where
  • 01:49:03 the I and da are in capital case and dad
  • 01:49:08 will hold for all those ionic web
  • 01:49:10 components the important difference here
  • 01:49:13 between react components and ionic
  • 01:49:15 components is that react components of
  • 01:49:18 quartz are created with the react
  • 01:49:20 library they are typically created as
  • 01:49:22 functional or class-based components and
  • 01:49:25 you use JSX there to define what react
  • 01:49:27 should render to the Dom in the end and
  • 01:49:29 of course they're only usable in set of
  • 01:49:32 react apps are you on a gaps on the
  • 01:49:34 other hand are these pre-built web
  • 01:49:36 components built with vanilla JavaScript
  • 01:49:39 following browser standards they use
  • 01:49:42 native web technologies therefore and
  • 01:49:44 they can be used anywhere but the react
  • 01:49:48 library is a bit picky about this a bit
  • 01:49:50 special and therefore in order to use
  • 01:49:52 web components there some wire up work
  • 01:49:54 needs to be done and that's the work the
  • 01:49:56 ionic team did for us when it created
  • 01:49:59 that ionic react wrapper this wrapper in
  • 01:50:02 the end just makes sure that these ionic
  • 01:50:05 web components which is provided by the
  • 01:50:07 ionic core package are actually wrapped
  • 01:50:11 into a react component and those wrapped
  • 01:50:14 components are then provided by ionic
  • 01:50:17 react so we'll only work with these
  • 01:50:19 wrapped react components which under the
  • 01:50:21 hood use the normal eye on ik web
  • 01:50:23 components but we'll work with these
  • 01:50:25 wrapped ones for technical reasons now
  • 01:50:28 besides these technical reasons we also
  • 01:50:30 get a better development experience with
  • 01:50:32 these custom components we get better
  • 01:50:34 Auto completion for example certain
  • 01:50:36 react features are unlocked with that
  • 01:50:39 are wired up behind the scenes and in
  • 01:50:42 general it does this technical work I
  • 01:50:44 already refer to I just highlight this
  • 01:50:47 so that you know why now all of a sudden
  • 01:50:49 the components look different
  • 01:50:51 behind the scenes were still working
  • 01:50:53 with the web components just wrapped by
  • 01:50:56 the ionic team and exposed in the ionic
  • 01:50:59 react library
  • 01:51:04 so with that all out of the way let's
  • 01:51:07 now actually write our application here
  • 01:51:10 and to get started I just want to pour
  • 01:51:12 it
  • 01:51:13 this old application here which we wrote
  • 01:51:15 with just ionic and JavaScript to react
  • 01:51:18 now for that we of course need two
  • 01:51:22 things in this iron app and that's our
  • 01:51:24 iron header
  • 01:51:26 opening and closing and also our iron
  • 01:51:30 content opening and closing now
  • 01:51:32 important we can't just use these
  • 01:51:34 components like this we need to import
  • 01:51:36 them and that's really important you
  • 01:51:38 will need to import all the ionic
  • 01:51:41 components you want to use inside of a
  • 01:51:43 react component from at ionic react so
  • 01:51:47 here we need the iron header and the
  • 01:51:49 iron content now Visual Studio code
  • 01:51:52 actually will automatically add these
  • 01:51:54 imports if you press ENTER at the right
  • 01:51:57 point of time but here I wanted to show
  • 01:51:59 you that you need these import now in
  • 01:52:02 the iron header we can add a ion toolbar
  • 01:52:04 and now that's what I meant
  • 01:52:06 once visual studio code suggests this
  • 01:52:08 you can hit enter and if you do that
  • 01:52:11 this import should have been added
  • 01:52:13 automatically by visual studio code if
  • 01:52:15 that's not the case you need to add it
  • 01:52:18 manually so we need the I and toolbar
  • 01:52:20 and in there we have our iron title like
  • 01:52:24 this again I hit enter tap by the way
  • 01:52:28 all the works to automatically add this
  • 01:52:31 import now in this title we had BMI
  • 01:52:36 calculator so we can just copy that move
  • 01:52:39 it over there and put that between our
  • 01:52:42 title tags and now in the content there
  • 01:52:45 we got our two iron items and then we
  • 01:52:48 got this grid actually here I will move
  • 01:52:51 everything into the grid technically not
  • 01:52:53 required but I feel like doing this so I
  • 01:52:55 will add the iron grid again hits tap to
  • 01:52:58 automatically at the import with the
  • 01:53:00 iron row here and in there I am column
  • 01:53:05 and now in that iron column here I will
  • 01:53:09 add this iron item so we have an iron
  • 01:53:13 item here with the I and label
  • 01:53:17 and then below that are I and input and
  • 01:53:21 I'm constantly hitting tab or entry here
  • 01:53:23 if you don't do that add all these
  • 01:53:26 imports manually you see this is also
  • 01:53:28 getting very long here so that's a great
  • 01:53:30 place to hit this format document
  • 01:53:33 shortcut so that this is split across
  • 01:53:35 mountains and easier to read with that
  • 01:53:38 let's go back down there and then on
  • 01:53:40 this first input I had your height as a
  • 01:53:45 label so let's copy that into here let's
  • 01:53:49 add this position attribute and that's
  • 01:53:51 now where you see this improve
  • 01:53:52 development experience I was referring
  • 01:53:54 to we get auto completion here thanks to
  • 01:53:56 react and typescript and you see there
  • 01:53:59 is a position prop and once you add the
  • 01:54:02 equal sign and the quotes you should
  • 01:54:04 automatically get those suggestions here
  • 01:54:06 regarding the valid values you can fill
  • 01:54:09 in and that's of course amazing because
  • 01:54:11 it often saves you a trip to the docs to
  • 01:54:14 find out which values you can use here
  • 01:54:16 we just see it in the IDE if you don't
  • 01:54:19 get this by the way you can't try
  • 01:54:20 pressing controlled space and you should
  • 01:54:22 also open this auto suggestions menu so
  • 01:54:25 here I'll pick floating so with that we
  • 01:54:28 got the height added now I will copy
  • 01:54:31 this and add another item here we have
  • 01:54:35 your weight side note I don't add this
  • 01:54:38 ID which we had on the input because
  • 01:54:41 I'll get that value from the input
  • 01:54:43 differently now we're using react and
  • 01:54:46 also one important thing I will actually
  • 01:54:48 grab this iron item and not edit in the
  • 01:54:51 same column and row but instead add a
  • 01:54:53 new row and a new iron column and add my
  • 01:54:57 new item with the second and put there
  • 01:54:59 just to really use this grid correctly
  • 01:55:02 where we should well work with rows and
  • 01:55:05 columns in the way that makes sense we
  • 01:55:07 have two inputs that should be in
  • 01:55:09 separate rows so of course in a grid
  • 01:55:11 they also should be in separate rows so
  • 01:55:15 that's that now I did have iron padding
  • 01:55:18 on the content I still want that so on
  • 01:55:21 the iron content here we add a CSS class
  • 01:55:25 but since we're in react not with class
  • 01:55:27 but with class name and that has nothing
  • 01:55:30 to with I on
  • 01:55:31 or with typescript this is regular react
  • 01:55:33 so we add class name and then I and
  • 01:55:36 padding here to add this padding to this
  • 01:55:38 entire Content area now let's continue
  • 01:55:43 working on this we now also get these
  • 01:55:46 two buttons so below the inputs we add a
  • 01:55:48 new row with a new column here and you
  • 01:55:53 column and in this column I'll add a
  • 01:55:56 button of course here again make sure
  • 01:55:59 you add the import or you press tab or
  • 01:56:02 enter correctly for the IDE to add the
  • 01:56:04 import and in this button you might
  • 01:56:08 remember we had this icon so again we
  • 01:56:11 use I an icon here like this we can use
  • 01:56:15 this as a self closing tag because there
  • 01:56:17 will be nothing between the opening and
  • 01:56:19 closing tag and then here we had a name
  • 01:56:21 of calculator outline so I'll copy that
  • 01:56:27 and add this here and next to this I
  • 01:56:31 have to calculate label now I'll copy
  • 01:56:36 the entire column and add it as a second
  • 01:56:39 column next to the first one and here we
  • 01:56:44 had reset and the Refresh outline I can
  • 01:56:48 here so here I will use refresh outline
  • 01:56:52 and reset and use those slots that's
  • 01:56:56 also supported and react because again
  • 01:56:58 these react components are just wrappers
  • 01:57:00 so here we can add slot and set this to
  • 01:57:04 start here we don't get auto completion
  • 01:57:07 here because the IDE doesn't really
  • 01:57:09 understand that this belongs to these
  • 01:57:11 slots of the outer elements so it can't
  • 01:57:13 predict which values are allowed by the
  • 01:57:15 outer element so that's something we'll
  • 01:57:17 have to look up in the docs and we do
  • 01:57:20 this here as well again I will omit all
  • 01:57:23 IDs for now I will also omit the text
  • 01:57:25 centering for the moment instead on this
  • 01:57:29 first column here I will add iron text
  • 01:57:33 left and on the second one I and text
  • 01:57:37 right to have a bigger distance between
  • 01:57:40 these two buttons but dad's ultimately
  • 01:57:42 totally up to you
  • 01:57:45 with that we're getting closer to our
  • 01:57:47 final result now we just need a row in a
  • 01:57:50 column for the result we want to render
  • 01:57:52 so let's add I on row and I and column
  • 01:57:57 and again here I will not add this ID
  • 01:58:00 because we will output this result card
  • 01:58:03 which we previously created
  • 01:58:05 programmatically with JavaScript
  • 01:58:07 differently now that we're using react
  • 01:58:09 because the whole idea behind react
  • 01:58:11 really is that we use this declarative
  • 01:58:14 approach where we defined a JSX code
  • 01:58:17 that should be output and then we can
  • 01:58:19 define different conditions when
  • 01:58:20 something should be rendered and react
  • 01:58:22 will be responsible for figuring out the
  • 01:58:25 way to get there and for doing the steps
  • 01:58:28 to bring something onto the screen or
  • 01:58:29 remove it from there
  • 01:58:31 so we can save this now and here i will
  • 01:58:36 restart ionic surf because it crashed
  • 01:58:38 before wait for this to restart and back
  • 01:58:45 in the browser if i reload here we have
  • 01:58:47 this look now one important thing we can
  • 01:58:51 see right away the icons are missing
  • 01:58:53 right we get a wording regarding that as
  • 01:58:56 well
  • 01:58:56 there's one important thing you have to
  • 01:58:58 know about using icons in an ionic
  • 01:59:01 reactor project you don't use them with
  • 01:59:05 the name attribute as you do it in a
  • 01:59:08 regular ionic project but instead
  • 01:59:11 differently instead of using that name
  • 01:59:14 you use the icon attribute the eye can
  • 01:59:18 prop we should say in react which we can
  • 01:59:21 set here and we don't set this to a
  • 01:59:23 string to a name or to some text instead
  • 01:59:26 we set a dynamic value here hence we
  • 01:59:28 need single curly braces to inject
  • 01:59:31 something dynamic here and the thing
  • 01:59:33 we're injecting is something we import
  • 01:59:35 from an extra package we import
  • 01:59:38 something from ionic ins slash icons
  • 01:59:46 this is an extra package which is
  • 01:59:48 installed by default you see it in the
  • 01:59:50 package to JSON file here this and this
  • 01:59:53 basically gives us all these icons
  • 01:59:55 available in this application and we
  • 01:59:57 just have to import
  • 01:59:58 those which we want to use in this
  • 02:00:00 specific component now here we had that
  • 02:00:04 calculator outline icon and you will see
  • 02:00:08 that from there you can import
  • 02:00:10 calculator outline now written like this
  • 02:00:13 in camel case we will also need the
  • 02:00:16 Refresh outline so we can already import
  • 02:00:20 this icon as well so these are the two
  • 02:00:23 icons we are importing here and now down
  • 02:00:26 there only icon components we point at
  • 02:00:29 calculate outline here and on this
  • 02:00:33 second icon
  • 02:00:35 we have icon equals refresh outline just
  • 02:00:39 like this and that's just one pattern
  • 02:00:41 you have to memorize in ionic react this
  • 02:00:44 is how you use icons and if we now save
  • 02:00:46 that it rebuilds and now you see those
  • 02:00:48 icons here this now visually is pretty
  • 02:00:52 close to what we had before color is
  • 02:00:55 missing the toolbar and the logic is
  • 02:00:56 missing so that's what we'll do next of
  • 02:00:59 course feel free to do this on your own
  • 02:01:01 because all you'll need here is really
  • 02:01:04 just default react knowledge will now do
  • 02:01:06 this like we would always do it and
  • 02:01:08 react but of course we'll do it together
  • 02:01:10 in the next lecture
  • 02:01:15 so where are you successful let's do
  • 02:01:19 this together for that back in our code
  • 02:01:22 we got to do a couple of things we have
  • 02:01:25 to wire up those buttons to functions
  • 02:01:28 and then those functions we need to
  • 02:01:30 interact with the data entered by the
  • 02:01:32 user to either clear these inputs or to
  • 02:01:37 calculate a result now for that we'll do
  • 02:01:40 this like we would always do it in a
  • 02:01:42 react app side note here in this course
  • 02:01:46 I will only work with functional
  • 02:01:49 components and react hooks I do teach
  • 02:01:52 that and also the other approach with
  • 02:01:54 class-based components in my react the
  • 02:01:57 complete guide course but again I will
  • 02:01:59 focus on this functional components with
  • 02:02:02 hooks style here so if you're not fully
  • 02:02:05 sure about that
  • 02:02:06 make sure you first pick up the
  • 02:02:09 dedicated sections in my react course or
  • 02:02:11 some other resources where you learn
  • 02:02:14 about that
  • 02:02:14 that being said here we are in a
  • 02:02:17 functional component and now we first of
  • 02:02:19 all need to define two extra functions
  • 02:02:22 functions inside of this react
  • 02:02:24 functional component function which we
  • 02:02:27 can bind to our buttons we have to
  • 02:02:29 calculate BMI function and I will define
  • 02:02:33 it as an arrow function here and we have
  • 02:02:36 the reset inputs function now you can
  • 02:02:43 already tell my ID is not too happy and
  • 02:02:45 the reason for that is that now this
  • 02:02:47 previously was just a arrow function
  • 02:02:50 where I returned just a JSX code now I'm
  • 02:02:53 adding more stuff to the function body
  • 02:02:55 so we have to change the signature of
  • 02:02:58 this functional component arrow function
  • 02:03:01 instead of a bracket which just wraps
  • 02:03:03 the return value we now add a curly
  • 02:03:06 brace and we add a closing curly brace
  • 02:03:09 to wrap our function body and now this
  • 02:03:13 J's Xcode has to be a return so we add a
  • 02:03:16 return statement here and to support
  • 02:03:18 multi-line code we wrap this into
  • 02:03:20 brackets now and then we can press the
  • 02:03:23 autoformat shortcut now that's working
  • 02:03:26 now we got these two functions here
  • 02:03:29 now we can wire up those functions and
  • 02:03:31 we do that just as we would always do it
  • 02:03:34 and react here on this first button we
  • 02:03:36 want to wire up the calculate BMI
  • 02:03:38 function we add the on click prop for
  • 02:03:41 that Dion click prop is available on the
  • 02:03:44 default button component it's also
  • 02:03:47 available on the I on button and you can
  • 02:03:49 see this in the official Docs of course
  • 02:03:51 all is it but also here with the auto
  • 02:03:52 completion basically all those default
  • 02:03:55 button props are forwarded here to the
  • 02:03:59 iron button so we can add on click and
  • 02:04:02 point at D calculate BMI function
  • 02:04:04 important just pointed it don't execute
  • 02:04:07 it here because we want to store the
  • 02:04:10 function itself this function object in
  • 02:04:13 the on click prop so to say we want to
  • 02:04:16 pass on that function object to the on
  • 02:04:18 click prop so that react and the browser
  • 02:04:21 can invoke this function for us when a
  • 02:04:24 click happens if we would add
  • 02:04:26 parentheses here the function would be
  • 02:04:29 executed right away when this code is
  • 02:04:31 parsed and the return value of the
  • 02:04:33 function here of this function execution
  • 02:04:35 would be passed to on click that's not
  • 02:04:37 what we want we want to pass the
  • 02:04:39 function itself that's also do this on
  • 02:04:42 the second button here and point this at
  • 02:04:44 the reset inputs function again just at
  • 02:04:48 the function not at the result of the
  • 02:04:50 function execution that's the first step
  • 02:04:54 now we need to get the values the user
  • 02:04:57 entered in the input there are various
  • 02:05:00 ways we could set up two-way binding
  • 02:05:02 where we listen to changes to the input
  • 02:05:04 and store the entered value in a state
  • 02:05:07 or we use refs a concept available in
  • 02:05:11 react and that's what I'll do to use
  • 02:05:14 refs in functional components we need to
  • 02:05:17 import a hook from react by adding this
  • 02:05:20 import here and that's the use ref fog
  • 02:05:23 it's written like this use ref and this
  • 02:05:25 allows us to set up a ref again that's
  • 02:05:28 just a react concept which I expect you
  • 02:05:31 to know it has nothing to do with ionic
  • 02:05:33 or with typescript refs are a react
  • 02:05:36 concept and with the use ref hook you
  • 02:05:39 can set up refs in functional components
  • 02:05:43 so we create two rafts here
  • 02:05:46 wait input ref with use wrath here and a
  • 02:05:53 second one with height input ref with
  • 02:05:56 use wrath and these refs can be assigned
  • 02:05:59 to elements in the JSX code so that we
  • 02:06:03 kind of establish a connection to those
  • 02:06:05 elements and we can retrieve values
  • 02:06:07 somewhere else in our JavaScript code
  • 02:06:09 with help off those rafts for that let's
  • 02:06:12 go down to that first input which is the
  • 02:06:14 height input and there we now add the
  • 02:06:17 ref prop which is available and we point
  • 02:06:20 that at the height input ref and then
  • 02:06:23 here on that second input we add the ref
  • 02:06:27 prop and pointers at the weight input
  • 02:06:29 ref now here I'm getting an error and
  • 02:06:32 this is now an error which we're only
  • 02:06:35 getting because we're using typescript
  • 02:06:37 it's a pretty long tryptic error but we
  • 02:06:40 see that the expected type comes from
  • 02:06:42 property ref which is declared here blah
  • 02:06:45 blah blah now that's just something you
  • 02:06:47 have to be aware over you have to know
  • 02:06:49 when using typescript which is why I'm
  • 02:06:51 telling you it here use ref like this
  • 02:06:54 creates such a ref object but typescript
  • 02:06:59 doesn't really understand what this
  • 02:07:01 reference will point at once we use it
  • 02:07:04 here in this line when the ref is
  • 02:07:05 created typescript has no chance of
  • 02:07:08 knowing that this eventually will be
  • 02:07:10 connected to this input down there and
  • 02:07:13 therefore when we do is so down there
  • 02:07:15 typescript basically says well this
  • 02:07:18 height input ref I didn't know that it
  • 02:07:21 should be connected here and hence when
  • 02:07:23 you use it up here I won't be able to
  • 02:07:26 support you correctly so we have to let
  • 02:07:29 typescript know to which kind of element
  • 02:07:32 will eventually connect this wrath and
  • 02:07:34 we do so by using a special typescript
  • 02:07:38 syntax we add angle brackets after use
  • 02:07:41 ref and between them we add HTML iron
  • 02:07:44 input element now what's that the angle
  • 02:07:48 brackets can be used because use ref
  • 02:07:49 supports so-called generic types does
  • 02:07:53 essentially means that the type of data
  • 02:07:55 the referee
  • 02:07:56 we're creating here is off is flexible
  • 02:08:00 it's not set in stone we could also
  • 02:08:02 store something like a string or a
  • 02:08:04 number or an array in a ref it doesn't
  • 02:08:07 have to be a Dom element but even if it
  • 02:08:09 is a Dom element it's flexible regarding
  • 02:08:11 which kind of Dom element and here we're
  • 02:08:14 saying well this ref will eventually
  • 02:08:17 hold a pointer at a iron input element
  • 02:08:21 and this HTML iron input element thing
  • 02:08:23 here this is just a type script type
  • 02:08:26 provided by ionic we don't need to
  • 02:08:29 import it from anywhere it's globally
  • 02:08:30 available it's a core type which is
  • 02:08:33 available when we work with ionic and
  • 02:08:35 typescript you could say and this now
  • 02:08:37 let's type know that this ref which is
  • 02:08:39 created here will eventually point at
  • 02:08:42 ion input element now still types
  • 02:08:46 wouldn't be happy because initially when
  • 02:08:48 we created so when this exact line here
  • 02:08:50 line 39 and line 40 when these lines are
  • 02:08:54 parsed of course no connection has been
  • 02:08:56 established yet that's why we also have
  • 02:08:59 to set a default value for this ref
  • 02:09:01 which is null which means initially it's
  • 02:09:03 not set to anything but eventually it
  • 02:09:06 will point at a iron input element this
  • 02:09:09 is what we're saying with this syntax
  • 02:09:11 here now what does this tell typescript
  • 02:09:15 it tells typescript that eventually this
  • 02:09:17 reference object will point at an object
  • 02:09:20 of type HTML ion input element which is
  • 02:09:23 just the underlying typescript type this
  • 02:09:26 iron input object which is created in
  • 02:09:29 the end has we also tell typescript that
  • 02:09:32 the initial value is null because at the
  • 02:09:35 start of this function execution of
  • 02:09:37 course no connection has been
  • 02:09:39 established yet now once this return
  • 02:09:42 statement has been executed these
  • 02:09:44 connections have been set up with the
  • 02:09:46 help of the ref keyword and then
  • 02:09:48 everything is fine because then types
  • 02:09:50 could also knows that the referee using
  • 02:09:52 here the height input ref is actually
  • 02:09:56 configured to be connected to a high and
  • 02:09:58 input element which is just what we're
  • 02:10:00 connecting it to here I know that this
  • 02:10:02 can be tricky to wrap your head around
  • 02:10:04 to be honest it's thankfully one of the
  • 02:10:07 most complex things when it comes to
  • 02:10:08 react with typescript
  • 02:10:10 and we already get this out of the way
  • 02:10:11 now as a rule of thumb you can just
  • 02:10:13 memorize that if you're working with
  • 02:10:15 refs and you're using them to connect to
  • 02:10:18 a element in your JSX code you have to
  • 02:10:21 set up which kind of element you'll be
  • 02:10:23 connecting to and initialize them to
  • 02:10:24 null and that's basically it
  • 02:10:26 with that we set up the connection to
  • 02:10:29 the height and the weight input ref and
  • 02:10:30 now here in calculate BMI we can extract
  • 02:10:36 our two values we can get the entered
  • 02:10:38 weight by accessing weight input ref and
  • 02:10:42 now here dot current dot value and do
  • 02:10:48 the same here for the entered height and
  • 02:10:51 you might have seen that there was
  • 02:10:53 something inserted by my IDE when I
  • 02:10:55 typed value this question mark now why
  • 02:10:59 was this question mark added here this
  • 02:11:02 is a special typescript certainty X
  • 02:11:03 which in the end is a shorter form
  • 02:11:06 available in typescript for writing a
  • 02:11:09 ternary expression where we first of all
  • 02:11:11 which check whoever weight input ref
  • 02:11:13 current holds a non null value before we
  • 02:11:16 then try to access the value property
  • 02:11:19 now why would we need such a ternary
  • 02:11:21 expression normally well because of
  • 02:11:23 course current could point at a null ref
  • 02:11:27 right initially the ref holds null as a
  • 02:11:30 value we set this up in lines 39 and 40
  • 02:11:33 now of course we as a developer we know
  • 02:11:35 that calculate BMI this function will
  • 02:11:38 only run after the connection to the
  • 02:11:41 real Dom elements has been established
  • 02:11:42 in our JSX code but typescript can't
  • 02:11:45 know that it doesn't know that this code
  • 02:11:47 necessarily runs at a point of time
  • 02:11:50 where the references will not be null
  • 02:11:52 that's why typescript would want us to
  • 02:11:54 add such a ternary expression to rule
  • 02:11:57 out potential runtime errors when we try
  • 02:12:00 to access the value property on null
  • 02:12:03 where this would indeed crash at runtime
  • 02:12:05 now that's why we need a ternary
  • 02:12:07 expression and using this question mark
  • 02:12:10 syntax it's just a shorthand form where
  • 02:12:12 typescript will check whether current
  • 02:12:14 holds a non null object and only if it
  • 02:12:17 does types could we'll access the value
  • 02:12:19 property so in the end it's a shortened
  • 02:12:21 form of this longer ternary expression
  • 02:12:23 and
  • 02:12:24 the scenes once the types of code is
  • 02:12:26 compiled to JavaScript it most likely is
  • 02:12:28 expanded to a full ternary expression so
  • 02:12:31 it's really just a shorter syntax
  • 02:12:32 available in typescript if you know with
  • 02:12:35 certainty that by the time this is going
  • 02:12:38 to execute this connection will be
  • 02:12:41 established and this will not be null
  • 02:12:43 you can replace the quests mark with an
  • 02:12:45 exclamation mark
  • 02:12:46 this tells typescript this will never be
  • 02:12:49 null you can always access the value I
  • 02:12:51 guarantee it and we can safely do this
  • 02:12:54 here because we're writing this code and
  • 02:12:56 we know this function will never execute
  • 02:12:59 without the connections between the refs
  • 02:13:01 and our JSX code being established so we
  • 02:13:04 know we'll always be able to access our
  • 02:13:07 ref and extract the value hence you can
  • 02:13:09 add the exclamation mark and as a result
  • 02:13:11 the value returned by this will never be
  • 02:13:14 null it might be an empty string if the
  • 02:13:16 user didn't enter something but it will
  • 02:13:18 never be null this is just some
  • 02:13:22 typescript
  • 02:13:23 specialty which adds extra safety and
  • 02:13:26 avoids unwanted errors where you have to
  • 02:13:29 be really clear about your code and how
  • 02:13:31 it's going to execute and you
  • 02:13:33 deliberately have to tell typescript I'm
  • 02:13:35 sure this will always be set which
  • 02:13:38 forces you to reflect about your code
  • 02:13:40 and maybe fix eventual box you might
  • 02:13:42 have introduced here everything is fine
  • 02:13:45 we know this will never be null we can
  • 02:13:47 always safely extract this value move
  • 02:13:50 that we got the entered weight
  • 02:13:52 we got the entered height and now we can
  • 02:13:54 calculate a BMI by dividing the entered
  • 02:13:57 weight by entered height times entered
  • 02:14:01 height and we face the next problem and
  • 02:14:05 that's really the good thing about
  • 02:14:06 typescript it warns us early about
  • 02:14:09 problems and what's the problem here
  • 02:14:11 well if we hover over it we see that
  • 02:14:14 this must be of type any number or big
  • 02:14:17 integer or an enum type whatever that is
  • 02:14:19 but this actually is a string
  • 02:14:24 we have to add a plus here to convert
  • 02:14:27 this back to a number but now we're
  • 02:14:29 getting an error up here that this is
  • 02:14:31 possibly now now I said that this
  • 02:14:33 exclamation mark means it can never be
  • 02:14:35 now but the problem is it means that
  • 02:14:37 this connection with the reference will
  • 02:14:39 never be now the extracted value still
  • 02:14:42 could be now we can add another
  • 02:14:44 exclamation mark here to basically tell
  • 02:14:46 typescript that this also will never be
  • 02:14:48 null however we can't guarantee that it
  • 02:14:51 might end up to be null or actually an
  • 02:14:54 empty string in which case we would also
  • 02:14:56 have a problem so I will switch to a
  • 02:14:58 different solution here and check if
  • 02:15:01 entered height is falsey by adding an
  • 02:15:05 exclamation mark in front of it or if
  • 02:15:07 entered weight is false e and that will
  • 02:15:12 be true if it's null or if it's an empty
  • 02:15:13 string then I'll return so we'll only
  • 02:15:16 continue with the function execution
  • 02:15:18 when entered height and entered weight
  • 02:15:20 are not null and are not empty strings
  • 02:15:23 these two conditions have to be met only
  • 02:15:26 if it's not an empty string and not null
  • 02:15:29 we'll make it to this line and then I
  • 02:15:32 will convert these inputs here to
  • 02:15:35 numbers down there by adding a plus in
  • 02:15:37 front of them now it could still be a
  • 02:15:39 string like hello that's something we're
  • 02:15:41 not catching here but it certainly won't
  • 02:15:44 be now and with all of that let's
  • 02:15:46 console lock the BMI here for the moment
  • 02:15:49 to output it
  • 02:15:50 let's also implement the reset inputs
  • 02:15:53 function and clear these inputs for that
  • 02:15:56 we can again use our refs so we can
  • 02:15:59 again use the weight input ref current
  • 02:16:02 and set value equal to an empty string
  • 02:16:04 and repeat that for the height input ref
  • 02:16:08 now again we're getting an error for the
  • 02:16:11 same reason X explained before type
  • 02:16:13 scope doesn't know if that code could
  • 02:16:15 run without a connection being
  • 02:16:17 established and T reference pointing at
  • 02:16:19 a real object and therefore we have to
  • 02:16:21 tell typescript that this will never be
  • 02:16:23 null by adding an exclamation mark
  • 02:16:26 we're telling typescript this code will
  • 02:16:29 never run without a valid object being
  • 02:16:32 stored in this reference this will
  • 02:16:35 always be the case when this code runs
  • 02:16:36 and we can guarantee this to
  • 02:16:38 five script because we're writing our
  • 02:16:40 own code we know that the only way the
  • 02:16:43 reset inputs function runs is by
  • 02:16:46 clicking that button and that can only
  • 02:16:48 happen after this JSX code has been
  • 02:16:50 parsed and therefore after this
  • 02:16:53 connection has been established so there
  • 02:16:55 is no way for this function to run
  • 02:16:56 without an established connection and
  • 02:16:59 therefore without a valid value stored
  • 02:17:01 in the reference now you might be
  • 02:17:03 wondering after all these exclamation
  • 02:17:05 marks and question marks why is it so
  • 02:17:08 important to typescript that this is not
  • 02:17:12 now that wait input ref current is not a
  • 02:17:15 null object well it is so important
  • 02:17:18 because if it would be null and we would
  • 02:17:21 try to ax of al you property as we're
  • 02:17:24 doing it here on null we would get a
  • 02:17:26 runtime error right that's how
  • 02:17:28 JavaScript works accessing a property on
  • 02:17:30 null or undefined gives you a runtime
  • 02:17:33 error typescript wants to prevent us
  • 02:17:36 from such errors and that's why it's
  • 02:17:39 pointing us at all these code snippets
  • 02:17:42 that could potentially cause such a
  • 02:17:44 runtime error if something would be null
  • 02:17:48 now as I said we as a developer the way
  • 02:17:51 we wrote this code we know this can't be
  • 02:17:54 now we know reset inputs is only going
  • 02:17:57 to run after the J's X code has been
  • 02:18:00 parsed and this ref object has been set
  • 02:18:03 to the input element we as a developer
  • 02:18:05 notice typescript doesn't know it it
  • 02:18:08 doesn't understand enough about our
  • 02:18:10 program to notice so that's why we as a
  • 02:18:14 programmer can convince typescript that
  • 02:18:17 we know better by in this case adding
  • 02:18:19 the exclamation marks here which
  • 02:18:21 basically tells typescript don't worry
  • 02:18:23 I'm sure current will never yield null
  • 02:18:27 it will always yield a valid object this
  • 02:18:30 is why typescript ustus and why we add
  • 02:18:33 this exclamation mark and so on so with
  • 02:18:37 that we're clearing this and now finally
  • 02:18:40 if we save that we go back to our
  • 02:18:44 application and I enter values here I
  • 02:18:47 can click calculate and I see my result
  • 02:18:50 here in the dev tools
  • 02:18:52 and I can click reset and it resets so
  • 02:18:55 that all works however now you see when
  • 02:18:59 I tried a second time I get not a number
  • 02:19:01 here we'll have to fix that and in
  • 02:19:03 general we'll have to fix some minor
  • 02:19:06 issues here the problem was that I added
  • 02:19:10 a comma instead of a dot so we're not
  • 02:19:12 fully there but we got started and we're
  • 02:19:16 now calculating this in a react way with
  • 02:19:19 the help of refs and with the help of
  • 02:19:21 typescript with these extra things you
  • 02:19:25 have to watch out for when it comes to
  • 02:19:27 ensuring that you're not working with a
  • 02:19:29 null value or with invalid values in
  • 02:19:32 general with typescript you simply have
  • 02:19:34 to be more explicit about the code
  • 02:19:36 you're writing your intention and you
  • 02:19:39 have to rule out that your code runs in
  • 02:19:42 certain cases when a certain value might
  • 02:19:44 not be set and you would be getting a
  • 02:19:46 runtime error if you try to for example
  • 02:19:49 retrieve value on a null object that's
  • 02:19:52 why you have to reflect about this and
  • 02:19:54 deliberately tell typescript that this
  • 02:19:56 will never be null which forces you as a
  • 02:19:58 developer to really check your code and
  • 02:20:00 ensure that you're right about this
  • 02:20:03 statement and that this code can't run
  • 02:20:04 without an established connection
  • 02:20:06 through the ref and in this case this
  • 02:20:08 code should be fine
  • 02:20:09 now let's focus on the next steps
  • 02:20:16 so we are retrieving our values we are
  • 02:20:18 calculating a body mass index now let's
  • 02:20:22 continue working on this application and
  • 02:20:24 for that I don't just want to lock the
  • 02:20:27 body mass index here but just as before
  • 02:20:29 I want to output it below our inputs
  • 02:20:32 here now previously in the app where we
  • 02:20:36 didn't use react we did that by manually
  • 02:20:39 creating on card element setting its
  • 02:20:42 inner HTML content and adding this to
  • 02:20:44 the Dom now one of the big reasons why
  • 02:20:47 we are using libraries like react is
  • 02:20:50 that we don't want to do that we don't
  • 02:20:52 want to write those manual instructions
  • 02:20:55 instead we want to let react figure that
  • 02:20:58 out and just to find a result the goal
  • 02:21:01 reacts job is to find out the way to
  • 02:21:03 reach that goal
  • 02:21:05 so here translated to react that means
  • 02:21:09 that here in this iron column we want to
  • 02:21:11 eventually render a iron card so we can
  • 02:21:14 add this and hit tab to automatically
  • 02:21:16 add this import and in there we want to
  • 02:21:19 for iron card content with that h2 tag
  • 02:21:23 in there and that h2 tag should hold the
  • 02:21:27 calculated body mass index if we have
  • 02:21:30 one so for that we need state we need to
  • 02:21:34 be able to change the data in this
  • 02:21:36 component dynamically and reflect those
  • 02:21:39 changes in our JSX code and therefore in
  • 02:21:41 the Dom and that's where we need state
  • 02:21:43 and react in functional components you
  • 02:21:46 can manage state with the use state hook
  • 02:21:49 so let's import use state here and then
  • 02:21:52 in the functional component here we can
  • 02:21:56 call use state and the state I want to
  • 02:21:59 manage here is to calculate at body mass
  • 02:22:01 index and initially I said no value here
  • 02:22:05 because initially that's just undefined
  • 02:22:07 now you know that use State returns an
  • 02:22:10 array with exactly two elements so we
  • 02:22:12 can use array destructuring to get those
  • 02:22:14 elements out of the returned array and
  • 02:22:17 the first element is always the current
  • 02:22:19 state snapshot for this render cycle so
  • 02:22:22 to say for this function execution and
  • 02:22:24 here that would be our calculated BMI
  • 02:22:29 for example you can name it however you
  • 02:22:31 want and then the second array element
  • 02:22:34 which we extract is a function that
  • 02:22:36 allows us to update that state and
  • 02:22:38 therefore you typically name it set
  • 02:22:40 calculate at BMI in this case here so
  • 02:22:44 now we get these two values and now here
  • 02:22:47 instead of console logging the BMI we
  • 02:22:49 can call set calculate at BMI and pass
  • 02:22:52 the BMI to this function now as a little
  • 02:22:57 side note to improve type support types
  • 02:23:01 of support we can also configure use
  • 02:23:04 state a bit differently we're not
  • 02:23:06 getting an error here but we can tell
  • 02:23:08 typescript in this line already
  • 02:23:09 so before we ever set any stay to it
  • 02:23:12 that the state we're eventually going to
  • 02:23:14 store in there will be a number we again
  • 02:23:16 do this by using this generic type
  • 02:23:18 feature with the angle brackets and then
  • 02:23:20 we set this to number like this and this
  • 02:23:24 tells typescript that the state we're
  • 02:23:27 going to manage here the day that we're
  • 02:23:29 going to manage in there will eventually
  • 02:23:30 be a number it's also allowed that it's
  • 02:23:33 undefined initially but when we set a
  • 02:23:36 value to it it has to be a number that's
  • 02:23:39 what I'm doing here I'm passing in a
  • 02:23:40 number if it would pass in a string here
  • 02:23:43 now I would get an error that the
  • 02:23:45 argument of type hello is not assignable
  • 02:23:47 to type number in the end so that's a
  • 02:23:52 little bit of extra types of support
  • 02:23:53 here which helps us write cleaner code
  • 02:23:55 and be more explicit about the types of
  • 02:23:57 data we're working with now with that we
  • 02:24:04 of course also only want to render this
  • 02:24:07 entire row here if we got a calculated
  • 02:24:10 body mass index and we want to output
  • 02:24:12 the body mass index in here so for dad
  • 02:24:15 we use single curly braces and refer to
  • 02:24:17 the calculated BMI but as I set a whole
  • 02:24:20 row should only be rendered if we have a
  • 02:24:23 BMI and you know how that works in react
  • 02:24:26 if you want to render something
  • 02:24:27 conditionally you wrap it in curly
  • 02:24:30 braces and then you add
  • 02:24:35 a conditional expression here so here
  • 02:24:37 for example we check if calculate it BMI
  • 02:24:43 this year if this is set and if it is
  • 02:24:50 set so if it's not undefined if it's not
  • 02:24:52 false II will output this row here this
  • 02:24:56 is how you can do this in react you
  • 02:24:58 could also write the ternary expression
  • 02:25:00 here of course and say it like this
  • 02:25:03 render nothing if it's not set but you
  • 02:25:06 can always shorten this to this syntax
  • 02:25:08 and use this vanilla JavaScript way of
  • 02:25:10 expressing a concatenated conditional
  • 02:25:13 expression where the second result will
  • 02:25:15 be returned by this overall expression
  • 02:25:17 if the first part of the concatenated
  • 02:25:19 expression here is true the– so if this
  • 02:25:22 is true fee this will be rendered to the
  • 02:25:25 dom and now with that if we save this
  • 02:25:28 and I again enter my height here and my
  • 02:25:32 weight and I click calculate you see
  • 02:25:34 this card down there if I reset this and
  • 02:25:37 I click calculate you still see it
  • 02:25:39 because we currently have no mechanism
  • 02:25:41 of clearing this or of doing anything
  • 02:25:44 else but we have the same behavior now
  • 02:25:46 as we had it in this application before
  • 02:25:48 but now in a totally react – way where
  • 02:25:53 we only define the result and different
  • 02:25:56 scenarios different conditions like we
  • 02:25:58 do it here and react is responsible for
  • 02:26:01 actually writing something to the Dom or
  • 02:26:04 removing something from the Dom this is
  • 02:26:06 our first simple ionic react app with
  • 02:26:09 typescript mixed in which can make
  • 02:26:12 things more complex if you're not used
  • 02:26:14 to it but you will get used to it
  • 02:26:15 quickly now of course we are not done
  • 02:26:18 yet though we can't improve this
  • 02:26:20 application in many regards and we can
  • 02:26:23 also improve it from a code perspective
  • 02:26:24 and split this huge component we have
  • 02:26:28 here into smaller components because
  • 02:26:31 that's what we typically do in react
  • 02:26:32 development right
  • 02:26:37 so before we improve this application in
  • 02:26:40 any way we can split this big app
  • 02:26:42 component into smaller components now
  • 02:26:46 it's totally up to you how you want to
  • 02:26:48 split it to be honest there are many
  • 02:26:50 possible ways of doing that I want to
  • 02:26:54 create a couple of components to show
  • 02:26:56 you how you use this normal react
  • 02:26:58 approach of splitting your app into
  • 02:27:00 components in ionic react apps as well
  • 02:27:03 for example I will outsource these
  • 02:27:06 controls here into a separate component
  • 02:27:08 so these two buttons and I will also
  • 02:27:12 outsource this result into a separate
  • 02:27:14 component so in the components folder
  • 02:27:16 which you already have here if you don't
  • 02:27:18 you can just create it I will add a new
  • 02:27:20 file and I will name it BM I control
  • 02:27:24 start T as X dot T as X as the extension
  • 02:27:27 you should use here to use typescript
  • 02:27:29 with J as X and it will add a second
  • 02:27:32 file the BMI result is X now in app T as
  • 02:27:38 X I can grab this row with the controls
  • 02:27:40 with the buttons cut it and go to BMI
  • 02:27:43 controls and first of all import react
  • 02:27:46 from react you need to do that to use
  • 02:27:49 JSX then here I create a constant BMI
  • 02:27:53 controls that's my component name it
  • 02:27:57 will be of type react FC you assign that
  • 02:28:01 type with a colon as you learned and
  • 02:28:02 then it's a regular arrow function but
  • 02:28:06 an arrow function that needs to return J
  • 02:28:08 as X so here I will just put my cut J as
  • 02:28:12 X code between these brackets and then I
  • 02:28:16 also export this BMI controls function
  • 02:28:20 here as a default in that file so that
  • 02:28:22 we can import it into a ver files now of
  • 02:28:26 course we now need to add all those
  • 02:28:28 imports here so we import from at ionic
  • 02:28:32 react and there we just add all the
  • 02:28:35 components we're using here so we import
  • 02:28:37 I and Rho we import I and call and I and
  • 02:28:42 button and also I and icon we also need
  • 02:28:47 to import these icons we got here so we
  • 02:28:49 import them
  • 02:28:51 from ionic ins / icons from data we
  • 02:28:55 import calculator outline and refresh
  • 02:29:01 outline like this and now we just need
  • 02:29:04 to make sure that we also wire up our
  • 02:29:09 buttons
  • 02:29:09 to the functions in the app component
  • 02:29:12 now we of course do that in the way we
  • 02:29:15 always do it and react first of all in
  • 02:29:17 the app component we can get rid of
  • 02:29:20 these two components which you want
  • 02:29:21 which we don't need anymore get rid of
  • 02:29:23 the icon imports and instead add a new
  • 02:29:25 import here where we import BMI controls
  • 02:29:30 from dot slash components BMI controls
  • 02:29:34 and you emit the file extension here now
  • 02:29:37 that's our own custom component so in
  • 02:29:39 our JSX code we just add BMI controls
  • 02:29:43 like this now here we now need to pass
  • 02:29:49 pointers at these two functions we got
  • 02:29:52 here down into the BMI controls
  • 02:29:55 component that's how we do that and
  • 02:29:56 react how we basically connect buttons
  • 02:30:00 or whatever we have in a child component
  • 02:30:02 to functions in the parent component so
  • 02:30:05 since it's our component we can define
  • 02:30:07 how we name those props we could have on
  • 02:30:11 calculate prop calculate prop where we
  • 02:30:16 point at calculate
  • 02:30:21 BMI and on reset prop where we point at
  • 02:30:27 reset inputs now the problem is of
  • 02:30:31 course these two props don't exist on
  • 02:30:34 this component in regular JavaScript you
  • 02:30:36 wouldn't get an error here because
  • 02:30:38 you're just setting some props which
  • 02:30:39 don't exist that's not a tactical error
  • 02:30:41 but typescript forces you to write
  • 02:30:43 cleaner code it also wants to a white
  • 02:30:46 that you make typos for example so maybe
  • 02:30:49 we just miss type the prop and in that
  • 02:30:52 case we would quickly see that because
  • 02:30:53 we have two red squiggly lines here in
  • 02:30:55 this case we didn't miss type we just
  • 02:30:58 don't have such props in the child
  • 02:31:00 component so we should go to BMI
  • 02:31:02 controls and let typescript know which
  • 02:31:05 kind of props you want to support there
  • 02:31:07 for that we accept props here of course
  • 02:31:09 and then here on a click on this button
  • 02:31:12 we want to execute the function we
  • 02:31:15 receive an on calculate right that's the
  • 02:31:19 prop name we chose here on calculate we
  • 02:31:22 want to use that here and here on the
  • 02:31:24 reset button we want to trigger the
  • 02:31:26 function we receive on the on reset prop
  • 02:31:29 right here we got on reset it points at
  • 02:31:32 the reset inputs function so this
  • 02:31:34 function is forwarded to be my controls
  • 02:31:36 we want to execute it why are the prop
  • 02:31:39 where we receive it when this button is
  • 02:31:41 clicked but we still get an error here
  • 02:31:43 property on calculate does not exist
  • 02:31:46 well that's times good you always have
  • 02:31:50 to be explicit you have to tell
  • 02:31:53 typescript in a more explicit way which
  • 02:31:55 kind of props you want to support in
  • 02:31:57 this functional component and you do
  • 02:32:00 that by also using the fact that this FC
  • 02:32:04 type this react FC type here also is a
  • 02:32:07 generic type we add angle brackets here
  • 02:32:10 and between those brackets we define the
  • 02:32:14 props object this will be so the types
  • 02:32:17 of data we get on this props object for
  • 02:32:21 that we can add curly braces here to
  • 02:32:23 define a JavaScript object but now not a
  • 02:32:26 new object as a value we can use in this
  • 02:32:28 function but as a type definition for a
  • 02:32:31 type script
  • 02:32:33 dear types would always nose will have a
  • 02:32:35 children prop which is this special prop
  • 02:32:38 we haven't react to get the content
  • 02:32:40 between the opening and closing tags of
  • 02:32:42 a component but now we can define that
  • 02:32:44 there should be a on calculate prop and
  • 02:32:46 this should be a function right and –
  • 02:32:49 let's type script know that this should
  • 02:32:50 be a function we define a so-called
  • 02:32:52 function type which looks like this for
  • 02:32:56 example like an arrow function but again
  • 02:32:59 this is not a real function or defining
  • 02:33:01 but the type definition of a function
  • 02:33:03 this says on calculate will be a
  • 02:33:06 function which receives no arguments or
  • 02:33:09 which wants no arguments and which will
  • 02:33:12 not return anything why it means that a
  • 02:33:14 function doesn't return anything and
  • 02:33:16 will not just have to on calculate
  • 02:33:18 function here in our props object but
  • 02:33:21 instead you add a semicolon not a comma
  • 02:33:24 but a semi colon comma all the works but
  • 02:33:27 semicolon is better to make it clear
  • 02:33:29 that this is now not a JavaScript object
  • 02:33:32 we're creating but a type definition for
  • 02:33:34 a type script and there when you define
  • 02:33:36 object types you separate your
  • 02:33:38 properties with semicolons
  • 02:33:41 so then now we add a second property
  • 02:33:44 here and that's the on reset prop and
  • 02:33:46 this also will be a function that
  • 02:33:48 returns nothing if we now hit Auto
  • 02:33:50 format it's reformatted to this and now
  • 02:33:53 we're telling typescript the dis custom
  • 02:33:56 component here will receive props which
  • 02:33:59 looks like this so an object where we
  • 02:34:01 always have a children prop that is
  • 02:34:04 wired up behind the scenes but where in
  • 02:34:06 addition to that built-in children prop
  • 02:34:08 will have a non calculate prop which
  • 02:34:11 will point at a function which takes no
  • 02:34:14 arguments and which doesn't return
  • 02:34:15 anything and on reset prop which points
  • 02:34:19 at a function that takes no arguments
  • 02:34:21 and doesn't return anything therefore
  • 02:34:23 now this can be wired up here and an app
  • 02:34:26 tsx the error also is gone this is how
  • 02:34:30 you do that in typescript and react now
  • 02:34:34 for the result I will cut this row here
  • 02:34:36 go to BMI result import react from react
  • 02:34:41 of course like before to find my BMI
  • 02:34:44 result component which is of type react
  • 02:34:46 see as you learned and then here we
  • 02:34:49 export this of course as a default BMI
  • 02:34:53 result and in the functional component
  • 02:34:56 we returned that JSX code I just cut and
  • 02:34:58 just as before we now also need to
  • 02:35:01 import from at ionic react we need to
  • 02:35:05 import those ionic components we're
  • 02:35:07 using here I and row I and call iron
  • 02:35:11 cards
  • 02:35:12 and iron card content of course now here
  • 02:35:18 the value I'm outputting that of course
  • 02:35:20 should be received wire props and there
  • 02:35:23 it's up to you how we named us here we
  • 02:35:25 could have two result or the value prop
  • 02:35:28 whatever you want I'll go for a result
  • 02:35:30 and again we use this generic type to
  • 02:35:33 let types of know how our props objects
  • 02:35:36 should look like here we want to have a
  • 02:35:38 result key in there and the value now of
  • 02:35:41 course is not a function but just a
  • 02:35:44 number or a string you could say this
  • 02:35:47 will work with both and here this is how
  • 02:35:50 you define multiple types and type
  • 02:35:52 script you're saying the value here will
  • 02:35:55 be of type number or with a single pipe
  • 02:35:58 symbol of type string both is allowed
  • 02:36:00 because both will work here so now with
  • 02:36:05 that we got the BMI result back in the
  • 02:36:08 app component we output BMI result now
  • 02:36:12 make sure you add import for me it was
  • 02:36:15 automatically added here I'll added here
  • 02:36:18 at the top I like this better
  • 02:36:20 so make sure you import your BMI result
  • 02:36:22 component and then here at the bottom we
  • 02:36:25 got to BMI result and now we set that
  • 02:36:28 result prop and we point this at
  • 02:36:31 calculated BMI that's what we forward
  • 02:36:36 now with that we can again clean up the
  • 02:36:40 kind of ionic components we're import
  • 02:36:42 and here in the app component we're not
  • 02:36:44 using card and card content anymore
  • 02:36:46 and with that out of the way if we save
  • 02:36:49 everything this should still work as
  • 02:36:52 before but now in a more reactive way
  • 02:36:55 where we distributed this across
  • 02:36:58 multiple components and you also saw how
  • 02:37:01 you integrate this into the types of the
  • 02:37:03 world by defining the type of data of
  • 02:37:06 your props object now that's that now
  • 02:37:10 let's work on improving this application
  • 02:37:12 a little bit by also checking the user
  • 02:37:16 input a bit better making sure that
  • 02:37:17 invalid data is not used and by also
  • 02:37:21 making sure that we show an error
  • 02:37:24 message to the user if something invalid
  • 02:37:27 is entered
  • 02:37:32 so let's improve this application a
  • 02:37:34 little bit I'll start by configuring
  • 02:37:36 some ionic components for one I'll add
  • 02:37:38 something which we had before on the
  • 02:37:40 toolbar and that was the color we had
  • 02:37:43 that before I will re add it here we can
  • 02:37:46 simply set the color prop here to
  • 02:37:48 primary again just to make sure that we
  • 02:37:52 have this blue toolbar looks a bit nicer
  • 02:37:54 I think now in addition I want to also
  • 02:37:58 change the input types here on iron
  • 02:38:02 input I will set the type here to number
  • 02:38:08 two kind of restrict the user from
  • 02:38:11 entering something which is not a number
  • 02:38:12 if we do that you will see that if I try
  • 02:38:15 to type hello this shouldn't work here I
  • 02:38:17 can enter a number like this however and
  • 02:38:20 dad will now both work no matter if I
  • 02:38:23 write it with a dot or with a comma so
  • 02:38:25 that's another improvement now I also
  • 02:38:28 want to make sure that the user doesn't
  • 02:38:29 enter zero here for example though
  • 02:38:31 because dad doesn't really work the way
  • 02:38:33 I want so for that we don't just need
  • 02:38:38 changed configuration in JSX but also
  • 02:38:41 more logic here in our calculate BMI
  • 02:38:44 function to be precise I want to check
  • 02:38:47 if entered height here we're checking if
  • 02:38:49 it's not null that's good but I also
  • 02:38:51 want to check if entered height or
  • 02:38:54 weight is negative or zero because both
  • 02:38:58 doesn't make sense here so I check if
  • 02:39:01 entered height is not a thing or in the
  • 02:39:05 entered weight is not a thing or if we
  • 02:39:07 made it past these two checks I'll check
  • 02:39:09 if entered weight is if I convert it to
  • 02:39:13 a number smaller or equal than zero and
  • 02:39:17 the same for the entered height
  • 02:39:21 conversion to a number is important so
  • 02:39:23 that we don't check this for a string
  • 02:39:25 where this wouldn't make sense but we
  • 02:39:27 check this for the converted number so
  • 02:39:28 check if that is smaller or equal then 0
  • 02:39:34 we could also check if once we convert
  • 02:39:37 it to a number it's not a number with is
  • 02:39:39 na n but we shouldn't really have that
  • 02:39:43 scenario here since we configured the
  • 02:39:45 inputs to be
  • 02:39:45 type numbers so the user shouldn't
  • 02:39:47 really be able to enter a string here at
  • 02:39:50 least unless he uses the dev tools to do
  • 02:39:53 something fishy in which case were fine
  • 02:39:55 with breaking this app I guess so these
  • 02:39:57 are checks and want to add though and
  • 02:39:59 with that added we ensure that if I
  • 02:40:02 enter zero here nothing happens now
  • 02:40:05 that's better than outputting a wrong
  • 02:40:07 result but it would be even better to
  • 02:40:10 show an alert to the user and therefore
  • 02:40:12 let's see how we can display such an
  • 02:40:13 overlay such an overlay component to the
  • 02:40:17 user
  • 02:40:21 now of course we could show an alert by
  • 02:40:23 adding alert here this alert function
  • 02:40:25 which is built into the browser where we
  • 02:40:27 say please enter valid non-negative
  • 02:40:32 numbers and we could do that if we save
  • 02:40:36 that and I hit calculate here I get this
  • 02:40:38 alert but this is not super pretty it's
  • 02:40:41 that default browser alert doesn't look
  • 02:40:43 that great right so to improve this we
  • 02:40:46 can go back to the documentation and
  • 02:40:48 there let's stop back into the
  • 02:40:51 components and you will notice that
  • 02:40:53 there is an alert component the eye on
  • 02:40:55 alert and the preview this looks quite
  • 02:40:58 promising now how do we use this alert
  • 02:41:01 as always you can read for the docs to
  • 02:41:04 learn all about the configuration you
  • 02:41:05 can add and you can see different
  • 02:41:07 examples with different frameworks and
  • 02:41:09 libraries and we're of course interested
  • 02:41:11 in react what you see is that you just
  • 02:41:14 import an alert from ionic react and in
  • 02:41:18 the end you then just render the alert
  • 02:41:21 conditionally so it's a very reactive
  • 02:41:23 way of displaying this you just render
  • 02:41:26 the component when you want to display
  • 02:41:28 it you don't render it if you don't want
  • 02:41:30 to display it so back in our code that
  • 02:41:33 means that here in the app component
  • 02:41:36 we're just importing I an alert here
  • 02:41:43 like this and now in our app component
  • 02:41:49 JSX code we display this alert if we're
  • 02:41:53 not happy with the entered values now we
  • 02:41:55 can add it anywhere in this JSX code
  • 02:41:58 because it won't be rendered in the
  • 02:42:00 normal JSX Dom element hierarchy anyways
  • 02:42:05 behind the scenes it will always be
  • 02:42:06 injected somewhere else so we can also
  • 02:42:08 add it here at the very top I an alert
  • 02:42:12 however you know in react multiple root
  • 02:42:15 level elements are not allowed like this
  • 02:42:17 so I will wrap this with react fragment
  • 02:42:20 which is this component built into react
  • 02:42:22 that allows us to have multiple
  • 02:42:24 site-by-site root level elements without
  • 02:42:27 really having them as root level
  • 02:42:29 elements because we actually have this
  • 02:42:31 as a root level element but this doesn't
  • 02:42:33 render anything to the
  • 02:42:34 it's just there to fulfill this
  • 02:42:36 technical requirement react has which is
  • 02:42:39 that you must only return one root-level
  • 02:42:42 element in your JSX code so now with
  • 02:42:45 that we have the eye and alert here and
  • 02:42:46 we're getting an error for example that
  • 02:42:49 the property is open is missing you need
  • 02:42:52 to set this to tell the alert whether it
  • 02:42:54 should be visible or not so here we can
  • 02:42:57 set is open and we want to show this if
  • 02:43:01 we have an error so in the end in order
  • 02:43:05 to determine whether we have an error or
  • 02:43:07 not we can use state management and set
  • 02:43:10 an error state here if we make it into
  • 02:43:14 this if statement so let's go here to
  • 02:43:18 the top maybe and call use state again
  • 02:43:21 to have a second piece of state we
  • 02:43:23 managed in here you can have multiple
  • 02:43:25 ones as you know extract values from
  • 02:43:28 there and that is our error and a set
  • 02:43:31 error function now initially we have no
  • 02:43:36 error initially that's undefined but
  • 02:43:37 eventually that will be a string let's
  • 02:43:39 say so we use this generic type feature
  • 02:43:42 to let typescript know which kind of
  • 02:43:44 data will eventually store in there
  • 02:43:46 either undefined that's always an option
  • 02:43:49 or a string so now here if we make it
  • 02:43:53 into the safe check before returning
  • 02:43:56 which I still want because I don't want
  • 02:43:58 to continue with the function execution
  • 02:43:59 I will call set error and set my error
  • 02:44:03 message here which is please enter a
  • 02:44:06 valid input value or input number a
  • 02:44:12 valid non negative input number so now
  • 02:44:19 we're setting this error state and with
  • 02:44:22 that here we check if error is truth if
  • 02:44:26 it's not null we want to show the alert
  • 02:44:29 however for that we need to convert
  • 02:44:31 error which is a string to a boolean
  • 02:44:33 because is open once a boolean value and
  • 02:44:36 we can do that in JavaScript and all's
  • 02:44:38 in typescript by adding double
  • 02:44:40 exclamation marks here this converts
  • 02:44:42 this false e or truth T value to a real
  • 02:44:46 true or false boolean so if this is a
  • 02:44:49 non empty string this year will yield
  • 02:44:52 true if it is an empty string or
  • 02:44:54 undefined it will yield false so is open
  • 02:44:57 will be true if this is anything but an
  • 02:44:59 empty string or undefined so now we'll
  • 02:45:02 show this alert in such scenarios we can
  • 02:45:05 actually convert an alert to a
  • 02:45:07 self-closing component here by the way
  • 02:45:09 because all the configuration will
  • 02:45:10 happen by our props because now we can
  • 02:45:13 also set the message that should be
  • 02:45:15 shown and that of course is the error
  • 02:45:17 ARR is a string message once a string so
  • 02:45:21 that's fine we can also add buttons dad
  • 02:45:26 should be shown on that alert now
  • 02:45:28 buttons takes an array where in the
  • 02:45:31 simplest form you just have an array of
  • 02:45:33 strings which is the text of the buttons
  • 02:45:35 you can also have an array of objects
  • 02:45:38 where every object then defines the text
  • 02:45:41 of the button the role which controls
  • 02:45:44 which color it has and the handler
  • 02:45:46 function that's what I'll do here I'll
  • 02:45:49 add a text here of let's say ok and then
  • 02:45:52 my handler function now if you wouldn't
  • 02:45:56 use this approach here instead if you
  • 02:45:58 had an array of just strings you could
  • 02:46:01 listen to on did dismiss to do something
  • 02:46:04 whenever the button was clicked here
  • 02:46:06 we'll do that in the handler instead and
  • 02:46:08 in that handler I want to reset my error
  • 02:46:11 because we displayed the error to the
  • 02:46:13 user if the user now clicks ok I want to
  • 02:46:16 reset the error and give the user a new
  • 02:46:18 chance of well entering something valid
  • 02:46:21 so I'll add a function here clear error
  • 02:46:24 sounds like a fitting name and in there
  • 02:46:27 I'll just call set error and set this
  • 02:46:30 back to null to reset it or actually an
  • 02:46:33 empty string and then here the handler
  • 02:46:37 will actually point at clear error not
  • 02:46:41 executed here but just pointed it so
  • 02:46:43 that it is executed for us when that
  • 02:46:46 button is pressed again you can learn
  • 02:46:49 more about I and alert and different
  • 02:46:50 ways of configuring it here in this
  • 02:46:53 original documentation now with that if
  • 02:46:58 we
  • 02:46:59 Safety's and go back to our application
  • 02:47:01 and I click calculate I get this alert
  • 02:47:04 and this alert here has the Android look
  • 02:47:07 if I would switch to the iPhone preview
  • 02:47:09 here and reload this
  • 02:47:13 you would have to iOS look here but I'll
  • 02:47:16 switch back to the pixel here like that
  • 02:47:20 so we have once I reload does Android
  • 02:47:24 look here and we get this alert we can
  • 02:47:27 clear this and we can thereafter of
  • 02:47:29 course enter something valid in which
  • 02:47:31 case you get no error but if I enter
  • 02:47:32 something invalid we do get that error
  • 02:47:34 so dad now looks way better and it shows
  • 02:47:38 us how we can use ionic and ionic
  • 02:47:41 components and combine that with react
  • 02:47:45 and that extra flavor of typescript
  • 02:47:47 which we also have in there
  • 02:47:52 so now let's just finish this up by
  • 02:47:55 presenting the body mass index a little
  • 02:47:57 bit nicer down there before we then also
  • 02:48:00 add more features and for example
  • 02:48:02 allowed a user to switch between the
  • 02:48:04 metric and the non metric system so that
  • 02:48:06 we allow for different values than just
  • 02:48:08 meters and kilogram so first of all
  • 02:48:11 let's work here on our output on the
  • 02:48:14 result I will revert this and just
  • 02:48:18 accept the number here so that I can
  • 02:48:20 safely call to fixed here and round this
  • 02:48:23 number to two decimal places here so by
  • 02:48:26 just doing that this will look a bit
  • 02:48:27 nicer because now we can enter something
  • 02:48:29 here and we just displayed a BMI like
  • 02:48:31 this now in addition I want to Center
  • 02:48:35 this so here I will add a class name of
  • 02:48:38 I and text center because you learned
  • 02:48:40 that's one of those utility classes that
  • 02:48:43 allows us to well Center the text in
  • 02:48:46 addition I'll add an average to tack and
  • 02:48:49 therefore actually convert this year to
  • 02:48:51 H freitag where I say your body mass
  • 02:48:54 index and also Center this and they
  • 02:48:59 offer to Center both I'll just add this
  • 02:49:01 class on the surrounding iron card
  • 02:49:02 content and if we do so and we go back
  • 02:49:05 it reloaded automatically this looks
  • 02:49:09 nicer I think now you can of course use
  • 02:49:12 regular CSS or inline styles to style is
  • 02:49:16 even more but I'll have a separate
  • 02:49:18 styling section so for the moment I'll
  • 02:49:20 live with this default style here
  • 02:49:22 instead now let's add more components
  • 02:49:24 and let's make sure that we can switch
  • 02:49:27 between the different input values and
  • 02:49:29 allow not just meters and kilograms but
  • 02:49:32 also size and feet and weight and pounds
  • 02:49:40 it would be nice to have some extra
  • 02:49:42 control here at the top where the user
  • 02:49:44 can choose whether he or she wants to
  • 02:49:47 use kilograms and meters or pounds and
  • 02:49:51 feet if we go back to the official Docs
  • 02:49:54 we can scroll through that and you will
  • 02:49:58 find a segment button here are iron
  • 02:50:01 segment button if you click on iron
  • 02:50:03 segment you can see the preview this is
  • 02:50:05 how it looks like and this looks pretty
  • 02:50:07 neat it allows us to choose between
  • 02:50:09 multiple values right and that's exactly
  • 02:50:12 what we need we need two values here q
  • 02:50:15 well let the user choose between our
  • 02:50:17 different systems and of course this
  • 02:50:19 exists for both Android and iOS now we
  • 02:50:23 can see how we use it we import iron
  • 02:50:25 segment and iron segment button and then
  • 02:50:28 we just set it up like this here so
  • 02:50:31 let's go to the app component and I want
  • 02:50:35 to add it here in a new row above the
  • 02:50:38 inputs I'll actually add in a new
  • 02:50:39 component I'll name the component input
  • 02:50:43 controls or input control you can choose
  • 02:50:48 any name you want and their import react
  • 02:50:51 from react of course have the input
  • 02:50:55 control component here which is of type
  • 02:50:57 reactive C which stands for a functional
  • 02:50:59 component and export it as a default the
  • 02:51:04 input control here now let's return some
  • 02:51:07 JSX and the JSX we return here of course
  • 02:51:10 is this iron segment here this iron
  • 02:51:15 segment component auto import isn't
  • 02:51:18 working for me here so just import iron
  • 02:51:21 segment manually from add ionic react
  • 02:51:24 like this and between that now it's
  • 02:51:28 working I got iron segment buttons two
  • 02:51:31 buttons to be precise because I got two
  • 02:51:33 values now in every button we can see
  • 02:51:35 it's a good idea to have such a iron
  • 02:51:37 label to wrap the text to make sure that
  • 02:51:40 the text is presented in the best
  • 02:51:41 possible way so let's import iron label
  • 02:51:44 and then here we have let's say meters
  • 02:51:48 kilogram and on the second button we got
  • 02:51:52 the iron label with
  • 02:51:54 and pounds now these are our buttons now
  • 02:51:59 in the app component we want to add this
  • 02:52:02 here inside of a row we could include
  • 02:52:04 the row here in the input control we can
  • 02:52:07 leave it here I will leave it here
  • 02:52:09 so I'll add I and row here and I and
  • 02:52:12 call and in there half the input control
  • 02:52:17 component we just created and of course
  • 02:52:19 we need to make sure that we import this
  • 02:52:21 newly created component here so import
  • 02:52:24 input control from dot slash components
  • 02:52:27 input control like this now back in our
  • 02:52:32 application we see the input control
  • 02:52:36 here and of course we also can get the
  • 02:52:38 iOS look if we switch to that now this
  • 02:52:42 is a nice certainly doesn't look too
  • 02:52:45 shabby but if you reload you'll notice
  • 02:52:48 that no control is pre selected we can
  • 02:52:52 change this by going back to the input
  • 02:52:53 control and now there are two important
  • 02:52:57 steps first of all we need to give every
  • 02:52:59 segment button a value basically a value
  • 02:53:02 of your choice which you'll later be
  • 02:53:04 able to extract to find out which button
  • 02:53:06 was selected I'll name this here M kg 4
  • 02:53:11 metre kilogram and here ft/lbs of course
  • 02:53:17 again these values here are totally up
  • 02:53:19 to you that alone doesn't help us on the
  • 02:53:23 overall iron segment we now also have to
  • 02:53:25 set value and we have to set it Q the
  • 02:53:28 value which should be selected as a
  • 02:53:29 default so for example M kg so one of
  • 02:53:33 the two values you have down there and
  • 02:53:36 I'm using the first value here if I do
  • 02:53:38 that and I reload now you see that's pre
  • 02:53:40 selected we can still switch but this is
  • 02:53:43 pre selected now maybe it would be nicer
  • 02:53:46 if the default value could be set from
  • 02:53:48 outside though so that we don't
  • 02:53:50 hard-code this into this component but
  • 02:53:52 we can set it from the place where we
  • 02:53:54 use that component and that can be
  • 02:53:57 realized with the help of props of
  • 02:53:58 course here we could set this to
  • 02:54:01 something dynamic and set us to the
  • 02:54:04 selected value for example
  • 02:54:10 now here again we have to tell
  • 02:54:13 typescript which kind of props we get
  • 02:54:15 here and we'll get a selected value prop
  • 02:54:19 and that will be a string but actually
  • 02:54:21 it will be only one of these two strings
  • 02:54:23 which we allow so this is either M kg or
  • 02:54:30 ft lbs that's all the valid typescript
  • 02:54:33 we're saying this is not just any string
  • 02:54:36 it's one of these two very specific
  • 02:54:38 strings it's either this string or this
  • 02:54:41 string only these two values are allowed
  • 02:54:43 that's what we're saying here with that
  • 02:54:46 we can now use this from outside and we
  • 02:54:49 have to set this value from outside now
  • 02:54:51 we can set the selected value here q one
  • 02:54:55 of these two values and you see I get
  • 02:54:57 Auto completion here because of my
  • 02:54:59 explicit prop type definition and now
  • 02:55:02 again get the same behavior as before
  • 02:55:04 but now it's configurable from outside
  • 02:55:07 now that's nice we added this control as
  • 02:55:10 a next step make sure it's not just
  • 02:55:13 added but let's make sure we also can
  • 02:55:16 get the currently selected value and use
  • 02:55:19 that in our calculation
  • 02:55:25 so we're interested in the kind of value
  • 02:55:27 the user selected here in this segment
  • 02:55:29 button so that we can correctly use it
  • 02:55:32 here in our calculation now for that
  • 02:55:36 since this is something which can change
  • 02:55:38 dynamically we need to manage you
  • 02:55:40 guessed it state so in the app component
  • 02:55:42 which is where we do a recalculation we
  • 02:55:45 add a new piece of state and this is
  • 02:55:48 actually now our selected metric our
  • 02:55:51 selected calculation system you could
  • 02:55:54 say so I will name this calc units and
  • 02:56:02 set calc units and the type of data
  • 02:56:07 we'll store in that state is either a
  • 02:56:09 string of M kg or ft/lbs now initially
  • 02:56:18 I'll set this to M kg and of course you
  • 02:56:22 could also use our other system here
  • 02:56:24 feet and pounds and I will use that
  • 02:56:27 state snapshot here to initialize my
  • 02:56:30 selected values so this is no longer
  • 02:56:31 hard-coded here instead I use my state
  • 02:56:34 now D calc units here now I also want to
  • 02:56:41 change the state however whenever the
  • 02:56:43 user selects a new value so for that
  • 02:56:45 back in the input control component we
  • 02:56:48 can listen to an event on the I on
  • 02:56:50 segment an event which will be triggered
  • 02:56:52 whenever the user does choose a new
  • 02:56:54 value with on I and change we can listen
  • 02:56:59 to this change event how did I know that
  • 02:57:01 this exists well the official Doc's are
  • 02:57:04 your friend there you see this and you
  • 02:57:07 can also read about this here if you
  • 02:57:09 scroll down to events you see there is a
  • 02:57:11 I and change event which is emitted when
  • 02:57:14 the value property has changed and you
  • 02:57:15 listen to this with on I and change as
  • 02:57:18 you see in those examples here so we
  • 02:57:21 know there is this event and I want to
  • 02:57:24 trigger a function which I received via
  • 02:57:26 props if this event occurs
  • 02:57:28 so here I'll add a new key value pair to
  • 02:57:31 my props object and I'll name this prop
  • 02:57:34 on select valued but the name is up to
  • 02:57:38 you
  • 02:57:38 and the type here is a function which
  • 02:57:42 returns nothing but which actually will
  • 02:57:44 take a value and that will be the
  • 02:57:46 selected value we got here so here I
  • 02:57:49 will have value which should be again
  • 02:57:53 this type of data here M kg or ft/lbs
  • 02:57:56 now we can't bind this year to on select
  • 02:58:01 value like this however because the
  • 02:58:03 problem is that on a and change does not
  • 02:58:05 omit this kind of value and that's what
  • 02:58:08 we would need for this to work if we're
  • 02:58:10 saying this function should be triggered
  • 02:58:12 when this event occurs it would mean
  • 02:58:14 that this event needs to emit this kind
  • 02:58:16 of data otherwise types of complaints
  • 02:58:18 and it does complain here it does
  • 02:58:21 complain because anion change actually
  • 02:58:26 emits an event object which will have a
  • 02:58:29 detailed property which will have the
  • 02:58:32 value the user chose so one of the
  • 02:58:34 values we configure down there stored
  • 02:58:37 inside of it so we actually need to
  • 02:58:41 extract that value from that event
  • 02:58:43 object on I and change gives us so we
  • 02:58:47 can do this by adding an extra function
  • 02:58:49 in here in the input control component
  • 02:58:53 input change handler could be a function
  • 02:58:56 name we have here there we get this
  • 02:59:00 event object which is of type custom
  • 02:59:02 event this is a type which is provided
  • 02:59:05 by type script by default not just in
  • 02:59:08 ionic apps but it by default in
  • 02:59:09 typescript and then we can call props on
  • 02:59:14 select value and execute us here inside
  • 02:59:17 of this function here and forward event
  • 02:59:21 dot detail dot value and this is of type
  • 02:59:25 any and we know in our case it will be
  • 02:59:28 either this string or this string
  • 02:59:30 because these are values configured on
  • 02:59:32 our segment buttons inside of that
  • 02:59:34 segment and now we connect on iron
  • 02:59:37 change here to the input change Handler
  • 02:59:41 like this an inside of the input change
  • 02:59:44 handler we now execute the function we
  • 02:59:47 receive on this prop and we forward our
  • 02:59:49 detail value which is one of these two
  • 02:59:52 values here so either M kg or ft/lbs so
  • 02:59:57 now this will be emitted on this on
  • 02:59:59 select value prop and now in app TSX we
  • 03:00:03 just have to connect this so we add the
  • 03:00:05 on select value prop and now here we
  • 03:00:08 have to point add a function which
  • 03:00:11 expects to get one argument value
  • 03:00:15 argument which is either this type or
  • 03:00:17 this type of value so now back in the
  • 03:00:20 app component we can define a new
  • 03:00:22 function for that select calc unit
  • 03:00:27 Handler could be a name we choose here
  • 03:00:29 handler here is optional I'm using
  • 03:00:32 handler here to make it clear that this
  • 03:00:34 is triggered upon an event though to be
  • 03:00:37 consistent I should then also do this
  • 03:00:39 here on the BMI and the reset inputs
  • 03:00:42 function which I didn't for historical
  • 03:00:44 reasons how we derived this app but I
  • 03:00:46 will do it here and there we get this
  • 03:00:49 selected value you can name it however
  • 03:00:51 you want here this parameter and this
  • 03:00:54 will either be M kg or ft/lbs one of
  • 03:01:02 these two values because these are the
  • 03:01:04 two values we support in our input
  • 03:01:06 control component and in here we can
  • 03:01:09 then call set calc units which is this
  • 03:01:12 state updating function we got here to
  • 03:01:15 set our state to this new selected value
  • 03:01:17 so here we set the state to the selected
  • 03:01:20 value now we just have to connect select
  • 03:01:25 calculate Handler to our on select value
  • 03:01:28 here like this and now this should be
  • 03:01:31 working and we're now picking up the
  • 03:01:34 units the user chooses and we store it
  • 03:01:36 in our state we're not using that state
  • 03:01:39 for anything right now but at least
  • 03:01:40 we're storing it now as a next step
  • 03:01:43 let's also use that selected state in
  • 03:01:45 our calculation then
  • 03:01:51 to use the selected units this new state
  • 03:01:54 we're managing let's first of all update
  • 03:01:57 our labels here to reflect the kind of
  • 03:01:59 units we're now expecting so height
  • 03:02:02 should be in meters or pounds and we can
  • 03:02:03 output this behind your height maybe and
  • 03:02:06 what we output here should be dynamic I
  • 03:02:08 use my calc units state and that's
  • 03:02:13 either M kg or ft lbs right so we can
  • 03:02:17 check whether this is M K G in which
  • 03:02:20 case the value I want to output here as
  • 03:02:22 text in this label is meters since this
  • 03:02:27 is the input for the height otherwise
  • 03:02:29 I'll output feet here and I'll do
  • 03:02:34 something similar here for the weight I
  • 03:02:36 want to output some additional
  • 03:02:38 information here based on the calculates
  • 03:02:40 and I'll check if that is M kg if it is
  • 03:02:44 here output kilograms otherwise output
  • 03:02:47 lbs for pounds so now we can already see
  • 03:02:51 the result here if I switch this you see
  • 03:02:53 our labels change which is good gives
  • 03:02:56 the user more information about the data
  • 03:02:58 that should be entered here now of
  • 03:03:01 course we also have to reflect it in our
  • 03:03:03 calculation this formula here always
  • 03:03:07 works for meters and kilograms now if
  • 03:03:11 the user enters value in feet and pounds
  • 03:03:13 we have to convert it for this down here
  • 03:03:17 I'll add a new weight constant and use
  • 03:03:20 my entered weight convert it to a number
  • 03:03:24 here however I want to do more than just
  • 03:03:26 convert it like this I also want to
  • 03:03:29 convert it to kilograms because this
  • 03:03:32 formula only works with weight and
  • 03:03:34 kilograms now maybe it already is in
  • 03:03:37 kilograms then we don't need to do
  • 03:03:38 anything but maybe it's in pounds and
  • 03:03:41 then we need to convert it so I'll have
  • 03:03:43 my weight conversion factor here and
  • 03:03:46 that is either one if the weight was
  • 03:03:50 entered in kilograms or it's something
  • 03:03:53 else if it was entered in pounds now if
  • 03:03:57 it was entered in pounds this should be
  • 03:04:00 around 2.2 so I'll check my calculator
  • 03:04:04 state to see what the user selected and
  • 03:04:07 check if that is equal to ft/lbs if it
  • 03:04:12 is I know that the weight was entered in
  • 03:04:15 pounds so then my conversion factor
  • 03:04:17 let's say is 2.2 otherwise it was
  • 03:04:20 entered in kilograms I need to do no
  • 03:04:23 conversion so it's 1 and now down there
  • 03:04:26 when I calculate the weight with which I
  • 03:04:27 want to work I divide this by my weight
  • 03:04:30 conversion factor and then here I use
  • 03:04:33 this converted weight and I don't need
  • 03:04:36 to convert it to a number here anymore
  • 03:04:37 because we already did this here now the
  • 03:04:41 same for the height I got my height
  • 03:04:43 conversion factor here and for that I
  • 03:04:47 checked my calc units and check if
  • 03:04:49 that's equal to FD lbs and if it is in
  • 03:04:53 order to convert feet to meters my
  • 03:04:56 conversion factor here is free dot – 8
  • 03:04:59 roughly otherwise again it's 1 because
  • 03:05:01 it already was entered in meters 10 and
  • 03:05:05 then here I got my height which is the
  • 03:05:08 entered height converted to a number
  • 03:05:10 divided by the height conversion factor
  • 03:05:13 and then here we use the height now we
  • 03:05:23 should always calculate a BMI correctly
  • 03:05:25 independent of the matters the user
  • 03:05:28 enter used for entering this so if I
  • 03:05:30 save this and I entered this in meters
  • 03:05:33 and kilograms I get the same result as
  • 03:05:35 before now if we switch to feet and
  • 03:05:38 pounds I need to adjust this now i'm 5.8
  • 03:05:44 4 feet tall and my weight in pounds is
  • 03:05:50 150 8.7 so now if I calculate this I
  • 03:05:55 roughly get the same result
  • 03:05:57 small rounding error because I rounded
  • 03:05:59 here too but that tells us that our
  • 03:06:02 calculation works if I switches to
  • 03:06:04 kilograms I get something unrealistic of
  • 03:06:06 course because now that is interpreted
  • 03:06:08 as meters and kilograms but in the pound
  • 03:06:11 and feet system this works so now we get
  • 03:06:15 this included as well and we're again
  • 03:06:17 you two
  • 03:06:18 a mixture of ionic with the segment
  • 03:06:21 buttons on and react with typescript to
  • 03:06:24 get there and this really is a great
  • 03:06:26 example of of course a very simple
  • 03:06:29 application but nonetheless an
  • 03:06:31 application where we utilize a lot of
  • 03:06:33 react ionic features to build something
  • 03:06:36 pretty neat which we could upload like
  • 03:06:39 this to the App Store's well speaking
  • 03:06:41 off that we could almost do that but
  • 03:06:44 it's still just a web app remember so as
  • 03:06:47 a next step in the next module we will
  • 03:06:50 learn how we can now actually turn this
  • 03:06:51 web app into a cross-platform app which
  • 03:06:54 does not just run the web but also as a
  • 03:06:57 native mobile app which we can
  • 03:06:59 distribute through the app stores
  • 03:07:09 [Music]