**** NEW REACT REDUX CONTENT ADDED 10th JULY 2017!! ****
React version 15.5.4 update now included!
Now with BONUS Redux tutorial!
AND Bonus React Router tutorial!
New content added every month - Just ask for a topic to be covered and I will do a video on it!
Join over 2000 satisfied students taking the best ReactJS course out there.
Over 100 5 star reviews!!
⭐⭐⭐⭐⭐ I never leave comments but thought I should share that this is best tutorial i've done on Udemy so far. Besides the great job of teaching react from the basics to advanced he goes really slow and explains every additional tool used, even things most should know. If you already know about the tools you might even learn something new like I did.
⭐⭐⭐⭐⭐ This course is a great place to start with ReactJS. Well laid out and easy to setup and start producing ReactJS sites. Instructor walks you through what is happening in the background and explains in terms that make it simple to understand.
-- Doug Brown
⭐⭐⭐⭐⭐ I really like how the course steps through everything and clearly shows how everything connects. The pacing was perfect for me and my favorite part was the transition to ES6.
⭐⭐⭐⭐⭐ As a beginner, I found this course to be extremely easy to pick up and much less intimidating than I thought it would be. Tim is great at leading you along the way, while still giving out challenges that make you think.
-- Brent Busby
⭐⭐⭐⭐⭐ Amazing course that covers a large amount of material very well. I never knew all of the power that React had until now. I recommend this course for anyone who knows none/a little about React. Great foundation course and is still being updated. Great job!
This tutorial will take you through everything you need to know to master web development using ReactJS.
React is a hugely in demand framework and having the knowledge of React that this course will teach you will set you apart from other candidates. If you've got a great idea that you want to turn into a business React is a great choice to build your application with and React From The Ground Up will teach you everything you need to make amazing applications with React.
We will cover ReactJS, ES6, Webpack, Redux and build some fantastic projects that demonstrate exactly how to use ReactJS in modern web development.
Getting a great understanding of React JS will get you into a position to build fantastic, well built personal and professional projects. It will also put you in high demand for employers where knowing and understanding ReactJS will put you ahead of everyone else.
This course starts from the beginning of ReactJS and is done in a way that means from the first video you start building with React. Only when we enter the projects section will you need to setup your environment, but by then you will know exactly what you're doing.
We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.
Throughout the course you will build mini projects with React then move onto build a Pokemon dashboard application that will put your new found React skills into practice. We will then build an application that teaches you all the principles behind Redux and how you can confidently and easily use React with Redux to build applications.
If you are new to React or maybe you've been struggling to learn and truly understand whats going on then this course is for you. You will be confident in using ReactJS in no time at all and if you ever get stuck I will be there to help.
I built this course as I felt the current resources out there expected you to already have a great understanding of how React works to even get started so I've made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilise ReactJS.
By the end of this course you will be more than confident in using ReactJS in any project!
Why should you use ReactJS?
Get setup so you can start to use ReactJS.
What do you need to know before taking this course?
Where and how to get help if you get stuck.
The script url required to include React have been changed by Facebook - the you will see that the required scripts are currently https://fb.me/react-0.14.7.js & https://fb.me/react-dom-0.14.7.js these will no longer work.
The correct scripts are https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js & https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js. So simply replace the two scripts in the head tag with and React will now be loaded.
I've also attached the scripts as a resource so that if the cdn goes down you can use react & react-dom.
I recommend using this version rather than a newer one until we get onto setting up our project. These early videos are designed to teach you exactly how React works before we jump into using the ES6 classes. If you do choose to use a newer version, anything from 15.5.0 (the versioning jumped from 0.14.8 to 15, so we aren't 15 versions behind!) and above you will get a deprecation warning about React.createClass and prop-types. You don't need to worry about these as we will be using the newer ways later on.
Use the createClass method to create your component
Learn about the ES6 let keyword and how to use it in ReactJS
Understand the basics of properties in ReactJS
Take a look at State in React components and how to utilise it.
Take on the State challenge
Build the State challenge
Refactor the State challenge code
More refactoring of the State challenge
Take a look at building Stateless functional components
Examine the lifecycle of a React component and all the methods involved
Look at some more lifecycle methods for React components
Look at the update methods in a components lifecycle
A look at ES6 Stateless functional components
Take on the ES6 Stateless functional component challenge
Look at the ES6 challenge and how to build it.
Higher order components in React allow you to reuse functionality in other components - lets take a look
In the videos we are using Webpack version 1 so if you just npm install webpack you're likely to get version 2 and this may cause some errors! To install version 1 use the command npm install email@example.com this will give you the exact same version as I'm using.
I've also attached my package.json so you can see the versions I'm using and install the matching version.
Learn what Webpack & NodeJS are and how we are going to use them and start to get our project template setup.
Configure our Webpack.config.js & take a look at some React source code.
Build a live JSX transformer so we can gain a better understanding of JSX and how to build a React project.
Take a look at the new create-react-app tool from the React team. This is going to make getting your React project setup a breeze!
Lets begin our big project - creating a Pokemon dashboard. In this video we learn how to make the API calls to get the Pokemon data.
Learn how to use an external component and list the Pokemon using React-Bootstrap
Please install React Router version 3 using npm install firstname.lastname@example.org to get the exact same version as me. I will add some videos covering version 4 soon. You're code will not work if you use version 4 as there have been some breaking changes.
I'm a web developer who has always been frustrated with the lack of quality and well explained tutorials on new technologies. I'm here to change that by giving you great tutorials on the technologies you want to learn. I strive to produce the best content and to always support my students.