ReactJS Basics - #1 What is React?

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

Channel: Academind

Views: 734,317

Keywords: react, reactjs, tutorial, javascript, what is react, why, what, react.js, react tutorial, react course, react crash course, reactjs crash course, reactjs tutorial, maximilian schwarzmüller, maximilian schwarzmueller

Id: JPT3bFIwJYA

Length: 5min 16sec (316 seconds)

Published: Thu Aug 11 2016