React - The Complete Guide 2025: Master React, Next.js & Redux!

hi and welcome to this course my name is maximilan Schwarz Muller and I will be your instructor in this course where I will teach you react from the ground up step by step and in great depth in this first course section here I'll get you started with discourse and get some organizational things out of the way which you should know about react and discourse and thereafter after an optional JavaScript refresher section which you can take if it's been some time since you last worked with JavaScript we're going to Dive Right In and explore react in great detail and speaking of that let's start with the most important question what exactly is react so what is react and why exactly would you use it well if we visit the official web page react. def we get an answer it's a library for web and Native user interfaces so put in other words react is a library for building user interfaces that's what react is all about and as it turns out it's a JavaScript library for building user interfaces but that of course still doesn't answer the other question why would you use it and the answer can be found if you visit a web page that uses react like for example Netflix as you navigate around on such a website site you'll see that all these transitions are super smooth pretty much instant and you never have this effect where you seem to load a new page so where you seem to wait for a new page to be sent back by the server to some extent it therefore feels like a mobile app because in mobile apps getting instant feedback and having smooth transitions is pretty much the standard and it's libraries like react that help us build such user experiences such user interfaces for the web as well because react since it's a JavaScript library uses JavaScript in the browser to update the page and the user interface we see on that page without reloading the page JavaScript can do that because JavaScript in the end runs kind of in the background of a website and JavaScript is able to read and manipulate the web page after it was loaded so JavaScript can for example make sure that as I click on the movies Tab It fetches the movie data behind the scenes in the background without reloading or leaving the page and it then updates what I see on the screen with that movie's data leading to that smooth transition between those pages but wait a second since this is all JavaScript in the end why do we need this react library for JavaScript because as you will see in the next lecture where I'll compare using just JavaScript to using libraries like react working with just JavaScript of course is an option but it isn't a great one it's cumbersome it means more work for you it can be more error prone and especially if you're building more complex user interfaces and more complex applications like this Netflix web app then then using just vanilla JavaScript so without any Library like react would just be a huge pain and wouldn't be a very realistic option to be honest so I told you that often using just JavaScript isn't a great option and that instead using libraries like react is better because react offers a simpler mental model and provides an easier way of building complex web applications and web user interfaces but of course you don't have to believe me that's why I prepared two basic web applications to basic demo websites which essentially have the same content some tabs you can click to change the content below these tabs but I built this application with react and also with just JavaScript so that we can compare these web applications now I built these web applications here with help of code sandbox which is a in browser cloud-based code editor and development environment which allows you to for example work on react projects without installing any software or tools or anything at all on your local system and which therefore provides you with an easy way of getting started with react and therefore attached to this lecture you find links to these two demo websites and you can therefore use your browser to play around with them explore them and change the code in any way you want in case the vanilla JavaScript version shouldn't load correctly and the content below the first tab might be missing simply click this refresh icon here and it should reload and display this content now in the vanilla JavaScript version we got two important files we got the index HTML file which in the end contains the HTML elements that are responsible for displaying the majority of this page and we got the index JS file which is responsible for getting hold of these buttons for adding click listeners to these buttons and for then updating the UI as these buttons are clicked and these click listeners are triggered now for this course I do assume that you do have basic JavaScript knowledge and therefore I won't explain this JavaScript code in depth here instead you can simply pause the video and go through the code on your own with help of those link links that are attached to this lecture and if you're struggling to understand this code I strongly recommend that you do pick up some basic JavaScript resource in addition to this course and that you take a look at the next course section where I give you a JavaScript refresher in the end in this code AS mentioned I'm setting up these click listeners and we're executing this function here whenever a button is clicked and then in this function I'm in the end ensuring that the clicked button receives the active CSS class by clearing that class from all buttons and then adding it to the button that was clicked which is this event Target of that click event and I'm displaying the content below the button by loading the content from this content array which is an array that contains more arrays inside of it and that selected content is then passed to a display content function where I in the end create a string that contains a bunch of Li elements as text I create an unordered list element I clear the tab content element below the buttons so that then to that list I can add that list content string as inner HTML and I then append that list that contains that list content to that tab content and that's how this content ends up on the screen as I switch tabs that's what I'm doing here in JavaScript and this of course is a fairly trivial app here as you can tell but still nonetheless it does take quite some code to make this app work this way and of course there would be alternative ways of writing this code but I chose an approach that hopefully is also pretty easy to understand and follow along now if we take a look at the react app we have the same behavior but the code is very different if we take a look at this folder we also find an index HTML file in the public folder but this index HTML file is pretty empty in the end its body section only contains one div in the end with an idea of root but this div has no content because indeed here in the react app react is responsible for rendering the entire user interface and it's this index JS file where the react Journey starts so to say now you will of course learn all about react and how it works and what this index.js file does later in the course so at the moment you absolutely will not understand everything here and that's totally fine because this is just a first demo to show you the difference between react and JavaScript not to teach you all about react in this one single lecture now nonetheless you should know that in that index JS file we in the end select this div with an ID root so this div here is selected and react takes over that div and starts controlling the div and it's cont content it's then the appjs file that contains the important code so to say in there we have a function called app and in this function there is something strange because we got a bunch of HTML code in there and that is definitely not a default JavaScript feature because by default if you start adding HTML code to a Javascript file you'll get an error this by default is not supported now it does work in the react project because of how this overall project is set up behind the scenes and later in the course you will also learn how to set up such a react project locally on your system here in code sandbox it's already set up such that it works but then once it is set up correctly it's one of the key features of react that you can blend HTML and JavaScript code and if you then take a look at this HTML code you'll see that in here in this appjs file we in the end got all the HTML code with this header and these buttons and this unordered list that we before found in this index HTML file when working with vanilla JavaScript now it's all that one single Javascript file but what you'll also notice is that all these JavaScript instructions that we had in the vanilla version are Miss in in the react version instead in that appjs file we just got that HTML code and then in that HTML code we got some Dynamic elements some Dynamic pieces of code blended into the HTML code now again you'll learn all about writing such react code later but what this code here in the end does is it defines different states you could say of the different HTML elements for example that this button here should have an active CSS class added to it if this active content index thing here to which I'll get back in a second is equal to zero so if this condition is met otherwise an empty class so no CSS Clause will be added and we have similar conditions for the other buttons down here where I'm outputting the actual tab content I have my unordered list here as HTML in JavaScript and then there we got more Dynamic content where in the end we're loading such a nested array from that content array depending on which button was clicked so depending on this active content index thing here and then all these items in that nested array so all these string items here are in the end converted to list items something that also doesn't work in vanilla JavaScript but works in react and this is how all these list items are in the end added to this unordered list here now this active content index thing is kind of like a variable it's created and controlled with a react feature called use State and this in the end creates a dynamic react managed variable you could say that can be updated with help of this set active content index function here which for example gets used for these click listeners which are also directly added to the buttons right inside that HTML code here and then it's this active content index variable that changes and influences how the current UI looks like because react basically watches this variable and whenever it does change it takes a look at your HTML code here checks all these conditions and executes all that code and sees if that code now should lead to a different UI than what was rendered before and if a different UI is needed react goes ahead and updates the UI it does all these things automatically for you because when working with react you in the end write declarative code which means you define the target UI state or States not the steps needed to get there and react will figure out how to get there and perform the necessary steps so when writing react code you're writing code in a declarative way and that's a key thing to understand and keep in mind because that's how react works in the end on the other hand when writing vanilla JavaScript code you're writing imperative code not declarative code which simply means you're not defining the goal but instead the steps needed to get there and as you can see in this example that's of course way more cumbersome and difficult because even though this here is a very basic and simple example we do have to find a lot of steps to get the desired behavior and it's easy to forget a step or introduce some error along the way updating this code and handling a forth button also could become unnecessary complex so here we got these step-by-step instructions and therefore this imperative approach in react instead it's all pretty lean it's less code that needs to be written and react takes care of updating the UI react uses JavaScript under the hood to update the UI and we instead justifying our conditions our Target States and when these states should change and react will take care of the rest so now that we know why we might want to use react instead of just JavaScript and before we start diving deeply into react and we'll learn it from the ground up I already want to make sure that we get our hands dirty and that we actually start working on our first react app even though we don't really know a lot about react yet but from what we've seen thus far we might be able to solve the following tasks and it all starts with a new updated demo app and for that attached to this lecture you find another link leading to another react web app on code sandbox and of course it's pretty much the same app as before but I actually updated this content array here and I added a new forth nested array in that content array and that fourth array inside of this content array will become important for this exercise which is why you should follow that link you find attached to this lecture because in this updated app the goal now is to add a fourth button with any text of your choice doesn't really matter but when this fourth button is clicked the content for this button so this fourth entry in this content array should be loaded and displayed on the screen now implementing this of course will be challenging because you don't really know react yet despite the last lecture but definitely feel free to pause the video at this point and try solving these tasks on your own before then after a short pause we'll solve it together if you can't solve it by the way no worries we're just getting started and you haven't learned react yet so that's absolutely fine but still you might want to give it a try so did you succeed let's try it together for this of course it's important that you're using this updated version which you find attached where you do have this extra entry in this array and then with that we can go down to the buttons and add another button here to this menu and for that I'll just copy one of the existing buttons and paste it in here maybe at the end of the menu but the exact position doesn't matter and I'll give it a text of react versus JS though that text of course is up to you now we got this button here if I now click this button I actually get a strange Behavior though because now the third and the fourth button seem to be active simultaneously and I do load the content of this third button now we do get this Behavior here because of course I copied this third button and I kept all the logic that was on this button but now we need to adjust this Logic on this new for button for example here for this click listener in this function that's executed when that click occurs we should set the active content index to fre to select the fourth item in this content array because as you know in JavaScript arrays start with the index zero so that in the end will make sure that we for example down here will use the fourth item in this array by using the index three here in this condition we also should compare the active content index to three therefore to make sure that this button here only receives the active class if the content index is three and that actually is all then if you save that maybe reload here though it shouldn't be required you should be able to now select this button and see the content for this button and have only that button being active so now all the buttons work as intended this fourth button included and therefore we got our hands dirty we wrote our first lines of react code and we solved these tasks here and of course as mentioned before if you were not able to do this on your own that is absolutely fine and absolutely to be expected because you haven't even learned react yet I haven't taught you react yet I just showed you one basic first example and we're going to learn react from the ground up in this course of course so no worries if you were not able to do this on your own yet so with all that you now got started with react and you learned why you might want to use react and what its core philosophy is in the end this declarative approach now I want to briefly introduce you to this course and explain what you can expect from this course and as you can tell by taking a look at the course curriculum it's of course a huge course packed with content and you can think of the content in this course as two main packages you could say because we'll start by setting a solid foundation and the next core sections the first couple of course sections will all be about introducing you to these fundamental react Concepts you must know like components jsx props State events styling components hooks debugging and much more you will learn all these things over the next sections and you will therefore have a solid react Foundation once you finished those sections thereafter we'll dive into many advanced concepts which you also must know as a react developer we'll dive into Concepts called refs portals how to handle side effects and what side effects are into advanced Hooks and what Hooks are custom hooks HTP Redux routing xjs off tication and much more this course is huge and the course curriculum of course allows you to dive into the content you're most interested in though I will say that the different course sections of course build up on each other so I do recommend that you simply complete the course lecture by lecture section by section now in addition to all the video lectures in this course you'll also find plenty of quizzes coding exercises assignments and demo projects in this course allowing you to practice what you learned and I of course recommend that you do use these practice opportunities because only practice makes perfect and therefore if you do go through the video lectures and all the course sections and you do dive into all the quizzes and exercises and so on you will be a react developer by the end of this course now this course is packed with content but this course also comes with two optional paths you can take the main path you can take is the standard path which is the path I recommend for most students for this path you simply continue you start in lecture one in section one and you go through the entire course lecture by lecture section by section in the order you find in the curriculum this way you'll learn all about react in great detail step by step in the right order but if you're in a hurry or if you already know react and you just want a refresher you could also consider finishing section one and then jumping right ahead to section 30 attached to this lecture you also find a link that will directly take you to that section if you want to follow that fast track path because this course section will then give you just the react Essentials less deep Dives less advanced concepts less examples but you'll get those Essentials and therefore if you don't have that much time or you don't want to go through the entire course this fast track path and this dedicated section is for you by the way this react summary section will also be interesting for you if you did complete the standard path because if you completed that path and you then want to revisit the core react Concepts you can also use this react summary section now obviously this course has a lot of content but I want to make sure that you also get the most out of this content and of course since this is a video based course this all starts with watching the videos but watch them at your pace use the video player controls to slow me down if I'm going too fast or speed me up if I'm going too slow also take advantage of the fact that this is a OnDemand video course watch the videos whenever you have time for them there is no time pressure on you in addition feel free to repeat videos or even entire sections if certain Concepts aren't clear immediately pause the videos from time to time and try out things on your own because that is how you will get the most of this video-based course and that's in general a recommendation I have for you code along and practice what you learned also practice what you learned in your own projects there are plenty of demo projects and examples in this course but you of course absolutely should also come up with your own basic example projects and try building those with react with the react knowledge you gain in this course because only practice makes perfect now this course also comes with some course resources namely the slides which you can download and various code snapshots which you can use to compare your code to mine in case you're getting stuck at some point and attach to this lecture you'll find a link to GitHub which I'm using as a code repository for those code snapshots and materials and you'll find instructions on how to use this repository and how to get to the code snapshots on that page in the end it comes down to selecting different branches for different course sections and then in the different branches once you selected them you'll find the slides for that branch and also the code snapshots for that Branch that's how this works in addition as you complete this course at the end of every course section you'll find a module resources lecture which will provide a direct link to the resources of the section you just completed now last but not least you're also not alone this course comes with a Q&A section where you can ask questions but where you should also try answering the questions of other students because by helping others with their problems you will learn even more because your forced to think about a certain problem and come up with a solution and even if your solution should turn out to be wrong you'll learn even more from the feedback you'll get there so asking and answering in the Q&A section is a great way of sharing knowledge and finding help in addition this course also comes with the access to our Discord Community to which you find a link in the lecture after this lecture and you can then also join this community totally for free to find fellow Developers and learn and grow together a couple of lectures ago we saw a first react project in action and we actually already worked on that first project now as you might imagine we're going to work on many react projects throughout this course and of course those projects in order to work on them first must be created now I will say that whenever we're starting a new project in this course I will provide a starting snapshot to you you'll find it attached to the lecture where the project is created and I will also let you know that attached you find such a starting snapshot so you will be able to use these starting snapshots to get working react projects nonetheless as a react developer you should of course also know how you can create react projects on your own and when it comes to that you basically have two main options you can either create projects locally on your system so that all the project files are created on your hard drive and any software needed to run that project is installed on your system and therefore of course you also must install any tools or packages that are required to run a project and you must have all these project files on your system or alternatively you can go for a brows browser based a remote react project solution in the end for example with help of services like code sandbox which is the service I also used earlier in this section for this first react project I showed you when using such a remote solution such a browser-based react project you don't need to install anything on your local system and you don't need to create any files on your local system system instead all the react project files as well as any extra tools that might be required behind the scenes will be provided and hosted by that remote project provider so bu code sandbox for example and when it comes to these project snapshots you find attached to the course I will also always offer you both options a zip file which you can download as a local react project or a code sand box link that will take you directly to a react project running on code sandbox so running in the browser with which you can get started without installing anything on your system therefore the great advantage of such a browser based react project is of course that it's super fast to get started with it the advantage of a local setup is that you have more configuration options you can use exactly the code editor you want to use with exactly the setting and extensions you might want to use and I for example prefer local react projects because I want that full control over them in addition when it comes to recording a course like this recording those videos simply is easier with a local setup where I can arrange everything exactly as I want it to be arranged but for folling along such a browser based setup can definitely be a great alternative there though you have to live with the general layout and configuration options that are given to you and you have less control over the project setup and configuration now in the next lecture I will show you how you can create a brand new react project locally on your system and therefore you can of course skip this lecture if you don't want to do that in the lecture thereafter I will do the same for the browser based alternative so for creating a project with code sandall box now using a browser based react project has certain advantages for example it's instantly available but it also has disadvantages for example you only have limited control over the general layout of that browser editor and you can also only configure the things this browser based editor allows you to configure if you want full control you need a local react project and as mentioned before already whenever we start a new react project in this course you'll find a starting snapshot attached to the lecture where we create that project it'll typically be such a zip file which you can simply download onto your system and extract and then in there you'll find a react project with which you can work now in order to run this react project and for example start a development server which allows you to review the react app whilst you're working on it you will need to install nodejs though so you need to install this extra software onto your system and you can simply visit nodejs.org to download nodejs from there you can either use the latest or the LTS version that shouldn't matter you can download it from there it is available for all operating systems and it will automatically pick the right installer for your operating system and and once you did download and install nodejs by simply walking through the installer this page gives you you'll be able to start such an attached project snapshot for that you should open the downloaded project snapshot in your favorite code editor for example in Visual Studio code which is an amazing free to use code editor that is available for all operating systems you can simply download and install it on your system to open react projects with it and and inside of Visual Studio code you can then browse these code files and you can also tweak Visual Studio code exactly to your liking by going to the settings there and for example choosing a color Theme by tweaking the keyboard shortcuts and the general settings you can also change the appearance of Visual Studio code under View and for example make sure that you have a status bar at the bottom or you maybe don't have it so that's what I mean you have full control over how it looks and behaves and definitely take some time to play around with Visual Studio code to configure it in exactly the way you want it to configure now two things I would recommend that you tweak about Visual Studio code locally on your system is for one that you go to the keyboard shortcuts and then there you should search for the format document shortcut and make sure you bind this command to a convenient shortcut because whenever you press that shortcut then it will automatically format your code making it more readable which is super convenient in addition and kind of related to that you should also go to the extensions area of Visual Studio code because this code editor allows you to install thirdparty extensions and there you can of course install any extensions you want but I do recommend that you install the prettier extension which helps this code formatting command in the end because this extension and this command will make your life as a react developer a bit easier now if you want to run such a downloaded project snapshot you'll have to open a new terminal in Visual Studio code which simply opens your default system terminal or command prompt just integrated into Visual Studio code here and already navigated into this project folder and then as a first step you'll have to run npm install a command which will only work if you did install nodejs because this npm command is part of nodejs now when you run npm install it will go ahead and install any extra dependencies and packages that are required by this project in order to run correctly for example it will download and install the react Library into this project those dependencies are not part of the attachment because they are pretty big and they would unnecessarily blo the the zp files now you only need to run npm install once after you downloaded such a project thereafter you just need to run npm start to start this development server which allows you to preview the react application for that you then just have to visit the address that is shown here and there you should then see the sections starting project now what's really nice about this development server is that as long as it's up and running whenever you change anything in your code and you save that file it will automatically update the website and reflect your changes there so you should keep this process up and running as long as you're working on your code and whenever you're done for the day you can simply quit it by pressing contrl C you can then of course always restart it with npm start if you want to continue working so that's how you can use those project snapshots which you find attached to the course but of of course sometimes you also want to create a brand new react project and for that you can for example use a tool called create react app which you should find if you search for a create react project on the official website of that tool you get instructions on which command to run to create a new react project and as you can see it's just one simple command you have to run this command must be executed in your system terminal or command prompt and there you should first navigate into the folder where you want to create your react project with help of the CD command and once you are in the place where your project should be created you can paste in this command and then give this project any name of your choice like for example react complete guide and once you hit enter it will go ahead and create a new folder with that name and create a react project inside of that folder now important for this command to succeed you also must have nodejs installed on your system now you can then also open such a project with Visual Studio code and you'll find basically the same folder structure as I have it in the code snapshots I'm providing to you now in this project here you don't need to run NP install because that was already done as part of this npx create react app process instead you can right away run npm start to start the development server and then once you visit this address you should see a react project that looks something like this now to conclude this lecture I also want to note that you could alternatively also use a tool called vit to create react projects and if you search for V create react project you'll find the official documentation which then all Al lets you know which steps to follow to create a react project with v in the end it's up to you which tool you want to use they all give you react projects and the react code you'll write will be the same either way but with that you now also know how you can create a react project locally on your system and you therefore can go with whichever approach you personally prefer now as mentioned in the last lecture throughout this course I will typically provide starting snapshots to you so if you want to follow along with code sandbox you would simply use the code sandbox starting project link and you get a preconfigured react project with which you can get started right away but of course you should also know how you can create a brand new project with code sandbox and it is actually super simple you just have to type react. new in your browser address bar and hit enter and it will immediately take you to code sandbox and open up a new react project for you there so with that you then therefore also got a almost instantly available react project in which you can work now in this code sandbox editor you'll find the files area here to the left with all your code files and you can also create new files and folders with help of these buttons here including nested files and folders if you use these buttons on existing folders you can install dep pendencies down there something you won't have to do initially in the first couple of course sections but later in the course you will for example have to install the react router Dom package and when using Code sandbox you would do this here in this dependencies area by entering the package name and picking it from the dropdown but again that's not something you'll need in the first course sections then of course you got your code editor for the selected file in the midd here and a live preview of your react application on the right here so this is your react website based on your react code here running in this right area of the code sandbox editor you can of course resize those windows and you can also dive into the code sandbox settings by clicking on this menu icon here and then going to file preferences and then you have some general code editor settings and some code sandbox specific settings simply take a look through these settings and make sure you configure them in exactly the way you want to configure things you'll have less options available than in a local setup but you can tweak quite a lot of things now in addition when you are on code sandbox here you also might want to consider creating an account because that will then allow you to run more code sandboxes and that's how you can follow along in your browser without install installing anything on your system