Share this project

Done

Share this project

Done
The React Tutorial project video thumbnail
Replay with sound
Play with
sound
€146 pledged of €7,500 goal
backers
By Maurice de Beijer
€146 pledged of €7,500 goal
backers

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.

Stretch goals

  • 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.

Maurice de Beijer
Maurice de Beijer

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.

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

  1. Select this reward

    Pledge €5 or more About $6

    High five supporter.

    I owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    2 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  2. Select this reward

    Pledge €29 or more About $33

    Super early bird student.

    You will receive access to the videos when they are all done. I also owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    Limited 4 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  3. Select this reward

    Pledge €39 or more About $44

    Early bird student.

    You will receive access to the videos when they are all done. I also owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    Limited 0 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  4. Select this reward

    Pledge €49 or more About $56

    Regular student.

    You will receive access to the videos when they are all done. I also owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    0 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  5. Select this reward

    Pledge €59 or more About $67

    Early access student.

    You will receive access to the videos as soon as each one is done. I also owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    0 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.
  6. Select this reward

    Pledge €199 or more About $227

    Team of up to 5 students.

    All five students will receive access to the videos when they are all done. I also owe you a high five the first time we meet somewhere.

    Less
    Estimated delivery
    0 backers
    Kickstarter is not a store.

    It's a way to bring creative projects to life.

    Learn more about accountability.

Funding period

- (29 days)