The React Tutorial
The React Tutorial
Become an expert React web developer with this online video course.
Become an expert React web developer with this online video course. Read more
About this project
I love to develop software and educating other developers. To combine these two loves I want to create a video tutorial showing how to develop with React. And you can help me by backing this project.
What is React and why would you want to back this project?
React is the user interface library developed at Facebook to build their website. Besides Facebook there are many other companies like Airbnb, Twitter or Netflix using React. You can use React to create fast and flexible components which are used to build web applications. After following this course you will be an expert building web applications using React.
Fun mini goals
- When I reach € 2500,- in pledges I will celebrate with 25 push-ups.
- When I reach the € 5000,- milestone I will celebrate with a bottle of Westvleteren 12. When done with the beer I will start recording the first videos.
- At € 10000,- all example code will be published on GitHub.
- At € 12500,- I will add transcripts for each video.
- At € 15000,- I will hire a professional video editor for even higher quality.
- At € 20000,- I will work at least 80% of my work week on producing videos.
What's this course about and how is it different?
React is a library for creating composable user interfaces in the browser. It’s created to build a user interface out of small composable components. These small components are then wired together to form the complete application. React is the winner in the Trending Technology on Stack Overflow. React also scores high on several other categories. For example, Top Paying, Most Loved and Wanted Technologies. So without a doubt React is hot technology. If you are a frontend developer, or want to become one, you are wise to learn about React.
React is the user interface library build at Facebook to develop the Facebook website. Instead of keeping React internal Facebook decided to open source it. The result is that the whole world can and does enjoy React. Many well known-companies like Airbnb, Automattic, Atlassian, Twitter, Netflix, PayPal, Reddit and Uber do. The list of sites build with React is impressive. And now it is your turn to join that list.
Using React results in a better architected application build out of small reusable components. Each component specializes in doing one thing really well. Because of the way the application splits into many small components React lends itself well for test driven development (TDD).
Who am I? Why should you take my course?
My name is Maurice de Beijer and there are a few things I love in life. Besides loving my wife and son I really love programming and teaching others how to program. I have been teaching software developers for the last 8 years and active in the community for far longer. During these years I have spent 25% of my time teaching and 75% of my time actually developing software. I consider this combination a win-win because I teach with real life experience. In this course I want to teach you how to build web applications using React based on my own experiences.
I am also a frequent speaker at conferences and user groups. Below are some of the conferences I have spoken at last year or I will be speaking shortly.
- NextBuild 2015 Eindhoven, the Netherlands
- enterJS 2015 Darmstadt, Germany
- CodeFest 2016 Novosibirsk, Russia
- Appril Festival 2016 Utrecht, the Netherlands
- Fronteers den Haag, the Netherlands
- Get.Net Łódź, Poland
- JSConf Budapest 2016
- DotNext 2016 St. Petersburg, Russia
- FullStack 2016 London, UK
- IT Weekend Ukraine 2016 Kyiv, Ukraine
Some quotes from past students:
- "Liked the frequent small coding demos of concepts. Demonstrated good real world experience and able to give useful tips beyond the course material." - Sam
- "Thoroughly enjoyed the material presented by Maurice. He clearly has a broad and current knowledge of the technologies discussed in the course." - Alex
- "Maurice is really good and gives good demonstrations of the concepts being discussed." - Salman
- "Maurice was able to show real world examples. It was evident he wasn't just dictating what he had read in books but speaking from the practical experience." - Ade`
Learn by watching and then doing yourself
With this video course you will learn by watching me build real applications. You will not be experiencing death by PowerPoint here. Sure there will be some PowerPoint slides with the most important parts. But most of the time you will be watching me coding in an editor and explaining what I am doing. The best way to make sure you really understand is to write code yourself. In each video I will give you an assignment to practice what you have learned at your own pace.
When will the videos be done?
When I complete all videos depends a bit on me making the last stretch goal. Regardless of me making that stretch goal or not I intend to release the videos no later than August 24th to all backers. Why then you might wonder? Well August 24th is my birthday so consider this my birthday present to all campaign backers☺
What applications will we build?
- Hello world
Where every programmer starts
- Social media browser
API data from another service
- My todos
Simple data entry
- Movie rentals
More complex data entry Single Page application
Topics we will cover
- Why use React and the Virtual DOM
- Getting started with React
- JSX syntax
- Basic JSX compilation with Babel
- Breaking the UI into React components
- Using NPM with React
- Basic bundling with Webpack
- Working with props
- Displaying repeating components
- Working with state
- Loading data from the server using AJAX
- React Event System
- Controlled components
- Uncontrolled components
- Building components
- Using React.createClass() versus React.Component versus Stateless Functions
- Linting your source code to detect errors with ESLint
- Unit testing individual React components with Enzyme
- Doing animations with React components
- Using third party components like React-Bootstrap
- Why use immutable data
- Using the PureRenderMixin
- Using the Immutability Helpers
- Optimizing the application using the React Performance Tools
- Testing the interaction between different components
- Server side rendering
Risks and challenges
The risks for this project are few and far between. The main risk is the bus factor of just one. If something serious happens to me I will not be able to complete the project. But rest assured the consequences are far greater for me than they are for you.
The second risk is that I do not deliver the video course in a reasonable period. With this being a series of online videos I can start delivering a partial product. So even if not everything is complete you will get the materials on August 24th at the latest. This would ensure you get access to all finished material. In the meantime, I continue working on creating the last few missing videos.Learn about accountability on Kickstarter
Support this project
- (29 days)