- 00:00:00 welcome everyone welcome to a brand new
- 00:00:02 series on my channel this series is all
- 00:00:06 about react.js and after this series
- 00:00:09 I'll have a second series which is all
- 00:00:11 about reactions and redux so I hope
- 00:00:14 there's something for everyone let's
- 00:00:17 start right away with the very important
- 00:00:18 question what the heck is react Cheers
- 00:00:21 why would we need it and yeah what is so
- 00:00:25 awesome about it well what is react is
- 00:00:28 as the name suggests it's a JavaScript a
- 00:00:32 library or framework you might say and
- 00:00:34 what can we use it for what's the
- 00:00:37 special thing it offers us well let's
- 00:00:40 think from a different direction how
- 00:00:42 does a webpage you look like it probably
- 00:00:45 looks a lot something like this it has a
- 00:00:47 lot of components on it and components
- 00:00:50 are something if you will following my
- 00:00:51 channel well you know it from angular 2
- 00:00:54 right there are a lot of components
- 00:00:56 there too and the reason for this simply
- 00:00:59 is that webpages can be split up into
- 00:01:01 components really well you might have a
- 00:01:03 header sidebar main area and in the main
- 00:01:06 area you might have a list with several
- 00:01:08 list items and so on and react.js takes
- 00:01:13 this concept or builds up on this idea
- 00:01:16 of splitting your webpage into
- 00:01:19 components and allows you to build such
- 00:01:22 components with JavaScript reusable
- 00:01:25 components which you can then use
- 00:01:27 throughout your webpage and which for
- 00:01:31 one hold the HTML code but additionally
- 00:01:35 in that of course is very important and
- 00:01:36 why this ks's at the end it not only
- 00:01:39 holds the HTML code but also some
- 00:01:42 JavaScript logic which allows you to
- 00:01:44 listen to user actions to display
- 00:01:47 content dynamically to update the UI
- 00:01:50 whenever you need to update it without
- 00:01:53 having to reach out to a server and
- 00:01:55 fetch a new view therefore react.js is
- 00:01:59 often used as the V in an MVC pattern so
- 00:02:02 ask the view and it is a library for
- 00:02:05 creating user interfaces that's what the
- 00:02:09 official page says and that is what
- 00:02:11 really is true
- 00:02:12 that's react.js
- 00:02:14 a JavaScript library which helps you
- 00:02:16 create user interfaces well I mentioned
- 00:02:21 angular 2 before what's the difference
- 00:02:23 between react.js
- 00:02:25 and Englert you do they do the same
- 00:02:27 thing and it's only app 2 stylistic
- 00:02:30 questions or whatever you like more to
- 00:02:32 to decide what to pick well there are
- 00:02:36 differences as I mentioned a few seconds
- 00:02:39 ago react.js is a library for building
- 00:02:43 user interfaces views angular 2 on the
- 00:02:48 other hand is more than that angular 2
- 00:02:51 is a JavaScript framework which allows
- 00:02:53 you to build single page applications
- 00:02:56 and the question of course is what's the
- 00:03:00 difference the difference is angular 2
- 00:03:03 out of the box has a router supports for
- 00:03:07 invalidation and so on angular 2 is
- 00:03:11 there to control the complete user
- 00:03:14 experience to control the navigation
- 00:03:16 between pages to control everything the
- 00:03:20 user does so with angular 2 you build a
- 00:03:23 single page application your server only
- 00:03:26 sends one view and angular 2 takes a
- 00:03:29 word and handles everything react.js on
- 00:03:33 the other hand can be extended to build
- 00:03:35 single page applications and there
- 00:03:37 certainly is nothing wrong with that in
- 00:03:39 that case it has really a lot of
- 00:03:42 similarities with angular 2 but you need
- 00:03:44 to import some extra packages it's not
- 00:03:47 all built into core react is because
- 00:03:51 core react is is about building views or
- 00:03:54 parts of views single components or
- 00:03:57 widgets which you can then dump on to
- 00:03:59 your views so react.js could be used in
- 00:04:03 let's say a level application since I
- 00:04:05 have a lot of lateral content on my
- 00:04:07 channel and Elara Balazs you are aware
- 00:04:10 you have multiple views in most
- 00:04:12 applications at least and you could
- 00:04:14 still have multiple views and use
- 00:04:17 react.js on all these views because in
- 00:04:20 one view you need that wicked witch yet
- 00:04:22 let's say a tap widget and on the other
- 00:04:24 view
- 00:04:25 you need a number widget or another
- 00:04:28 component so then you wouldn't have a
- 00:04:30 single page application but you would
- 00:04:32 still use react ES and angular 2 on the
- 00:04:36 other hand would be kind of difficult to
- 00:04:38 use in such a setup because that really
- 00:04:40 isn't what it was made for so that was a
- 00:04:44 lot of talking but it is so important to
- 00:04:46 understand what reactions can and cannot
- 00:04:49 do and where the difference is to let's
- 00:04:51 say single page application frameworks
- 00:04:53 like angular to lie with all that theory
- 00:04:57 out of the way time to continue and
- 00:05:00 actually start coding right away and
- 00:05:02 build up a workspace in which we can
- 00:05:04 work with react.js and then of course
- 00:05:07 I'll guide you step by step through
- 00:05:09 react.js and show you how to use it so
- 00:05:12 let's start
