Coding

ReactJS Basics – #1 What is React?

  • 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