Building Applications with React and Flux

It’s live! I just published a new course on Pluralsight: “Building Applications with React and Flux“. This is the product of over six months of preparation including the creation of a rich demo application that implements the core features of React, Flux, and React Router. This course also utilizes a modern JavaScript development environment that includes Node, Browserify, and Gulp. To help get you started, I’ve created the React and Flux starter kit. Simply download the starter kit, type “npm install”, then type “gulp”. Then you’re all set to follow along with the course!

React and Flux Applications

I couldn’t be more excited about building applications in React. It’s the most fun I’ve ever had doing front-end development yet. If you’re curious, I hope you’ll give the course a look!

17 replies on “Building Applications with React and Flux”

  1. Just finished the course on Pluralsight! I found it to be very well paced and easy to follow 🙂 Thank you for your time and effort!

    Are you interested in maybe making a course on CQRS & Event Sourcing in Microservices with Node? 🙂

  2. Hi Cory,

    Thanks for putting this course together. As a newbie to the world of JavaScript and React, I found it very helpful to gain an understanding of the concepts, especially through the use of examples.

    I was working on completing the challenge at the end of the final modules and was wondering if you were planning on posting a potential solution. The part I would be most curious to see is how to properly create an author dropdown as a reusable component when the author data coming from the Course API is an object as opposed to just the author ID.

    1. Hi Bryan,

      Unfortunately, I can’t post the full solution outside of Pluralsight since course source code is a subscriber feature. However, since I didn’t actually cover building the course feature, I am free to share that source code. 🙂

      Here’s some gists that cover the course feature. Spoiler alert! I suggest trying to build the entire course management feature yourself for viewing my solution. This zip contains most of the course specific changes. Of course you’ll also have to add links to the header, but if you’re having struggles, this should help.

      https://dl.dropboxusercontent.com/u/234722/course-feature.zip

      1. Thank you Cory!

        I completed the challenge yesterday evening and was mostly looking at how you implemented the updateCourseState function to account author object instead of a string.

        I had previously implemented that with a separate onChange function to handle that special case, but I certainly like your way better.

        Thanks again!

    2. Hi Bryan,

      Unfortunately, I can’t post the full solution outside of Pluralsight since course source code is a subscriber feature. However, since I didn’t actually cover building the course feature, I am free to share that source code. 🙂

      Here’s some files that handle the course feature. Spoiler alert! I suggest trying to build the entire course management feature yourself before viewing my solution. This zip contains most of the course specific changes. Of course you’ll also have to add links to the header, but if you’re curious how I solved the course challenge, this should help.

      https://dl.dropboxusercontent.com/u/234722/course-feature.zip

  3. When I went to Pluralsight I tried browsing for the course by using “react” and “cory house”. Your course was never listed. Had I not read this blog I might never have found it. Thought you should know.

  4. Hi Cory

    I am half-way through the course and I am liking it a lot. It is proving to be very useful for me. Actually I started a React application before the course. It was itching in my mind if what I was doing the right, the React way. Your course and the way it is organized helped me understand and change certain parts of my application.

    I have one question about the “Redirects” chapter. When you define routes in JSX (which ultimately is going end up on the client side as JS), how does the redirect happen when you hit an (old) url from the browser? For instance, when type the url “…/about-us” in the browser, it sends the request to the server. How would the server know to redirect to “…/about” if the redirect is in JSX? If the redirect is setup on the server, what part of JSX gets executed on the server?

    I know I am missing something basic. So bear with me if the question sounds silly.

    Can’t wait to finish the course, and expecting more such courses.

    Thanks
    Vivek Ragunathan

    1. Great question. Since I’m using hash style URLs, all routing occurs on the server. All requests are simply to default from the server’s perspective. But you’re right, if you choose to use clean URLs, then you’d need to handle redirects on the server using whatever server-side technology you choose.

      Thanks for the feedback!

  5. Hi Cory,

    Am about half-way through the course, and it is excellent. However, you quote above:

    “This course also utilizes a modern JavaScript development environment that includes Node, Browserify, and Gulp.”

    Whilst this statement is not incorrect per say, it could be argued that actually a modern JavaScript development environment would include Node, Webpack, Babel, and ES6 / ES7.

    As I say, really enjoy your course, and your teaching style is excellent (5 stars). However, as I complete each “module / chapter” I am converting everything to work with Webpack and ES6. Appreciate you mention early in the course your decision to stick with ES5 syntax – just feel the exclusion of webpack and es6 was a little misguided. In any case, let me know if you’d like a copy of the updated course materials when I have finished and be happy to share. It makes quite an interesting and interactive challenge doing the port / migration work in any case 🙂

    1. Thanks for the feedback Adam. I totally appreciate your desire to use Webpack and ES6. I’m using both on real world projects. However, I stand by my statement that Browserify is part of a modern dev environment. While Webpack is admittedly more powerful, I chose Browserify because it’s modern, popular, and much easier to learn. If the course were fixated on building the ultimate React build process, I agree, Webpack is the right choice. 🙂

      Same story with ES6 – I totally recommend it for the real world, but wanted to avoid confusing and alienating those who aren’t up to speed on ES6 yet.

      Thanks again for the feedback!

      1. Cory, as always, appreciate your knowledgeable comments. Fair play with regards to gulp and browserify, and you’re right they are likely easier to grok / more mainstream to users wishing to focus on React. Do you have any inklings what your next PS course topic will be? Can you share it, or do you tend to work in stealth mode until ready to publish? Find the whole JS space fascinating atm, and be interested to see whether Angular2 gains the popularity of Angular 1.x or whether React continues to gain traction. Also, have you taken a look at React Native?

        1. Hi Adam,

          I have a number of courses in the works, but haven’t decided which one I’m going to publish yet. I tend to take a couple months off to recuperate after each publish. 🙂

          I suspect Angular 2 will be extremely popular since there’s a large group of people who prefer frameworks over libraries. Angular 2 appears to resolve many weaknesses, though from what I’ve seen, I still prefer React’s JavaScript centric philosophy and ecosystem. Next year will certainly be exciting!

          1. Great, look forwards to PS in 2016. Have already paid a year subscription in advance so all good to go until December 2016 😀

Comments are closed.