Course info
Oct 26, 2015
2h 51m

Do you feel a little bit overwhelmed by all of the other technology you need to decide on and learn in order to get your React app in production? You need to build JSX, and you probably want to use ES6 and ES7 too. How about flux, how does that work, and what library should you use to implement it? This course will show you what issues need to be addressed when you build React apps, what technology to address it, and how the technologies fit together.

About the author
About the author

In his day job Hendrik is a full stack coder from Cape Town. For a large part of his career he worked with .NET, but the last few years he spent most of his time with JavaScript.

More from the author
React Native: Getting Started
1h 49m
Jun 20, 2018
Using Redux to Manage State in Angular
1h 21m
Mar 20, 2017
More courses by Hendrik Swanepoel
Section Introduction Transcripts
Section Introduction Transcripts

Welcome. I'm Hendrik Swanepoel. Don't worry, I won't expect you to learn how to pronounce it. More importantly, I want to show you a cool stack for developing React apps. In this course you'll learn a lot about React, in case you don't already know it, and learn a lot about how to _____ it with other technologies to address issues like builds, flux architecture, material design, client side routing, and event hooking it up with a realtime backend. This course makes heavy use of E7 features, which I'll at least point out to you and oftentimes explain in more detail. Why would you want to learn all this stuff though? Well React is a library, it's not a full comprehensive framework where you color between the lines. React developers need to understand that they find themselves in an ever changing ecosystem where certain libraries lose favor to others as the community support reaches a sort of transient equilibrium.

Environment and Tools
In this module we are going to take a look at setting up an awesome environment for working with React. We're going to rely heavily on webpack throughout this course and this module quickly introduces you to it. We then configure it to transpile our JavaScript files using Babel, giving us access to a whole bunch of cool ES6 and even ES7 features. We add some React code to the mix, this is a React course after all, and I show you how to get your JSX compiled correctly. Webpack has loads of benefits, but the most mind blowing is the fact that you can hot swap your React components without reloading the whole page. I'll show you how to configure webpack to get this behavior for React apps. Another impressive thing about webpack is that it's not only for JavaScript, you can also pull CSS and SASS code into your bundle, just as you would JavaScript. I'll show you how to do this as well.

Styling with Material-UI
We've set up a pretty impressive stack for working with React. Now we're going to focus on making our app look impressive too. And what better way of sprucing up our app than using a material design framework. Material design is a visual language created and maintained by Google. It's quite popular and has spawned many community driven libraries that support it. There are even a few different ones out there to support React itself. The one we are going to use is material-UI. Material-UI is quite mature as a rich component library, supports themes, and has excellent documentation and examples. Just have a look at this excellent documentation site of theirs. As you can see, it's got examples with code samples right next to it. In this module we're going to take our sample chat app, which at the end of the previous module looked like this, some ugly blue text, and make it look like this, which I'm sure you'll agree looks much, much better. To achieve this, we'll chop up what we've done so far into components. This is always a good idea when working with React. We don't want to keep on building out our whole app in just one component, we'll install material-UI and start integrating it with our code. We'll also set up a theme using its theme manager. As soon as we've got material-UI integrated, we're going to style our existing message list to use material-UI components. We'll define some new components to introduce a channel list and we'll style that with the UI material, followed by a message box component, also styled with material-UI. After this module you'll know how to get material-UI installed and how to define and implement awesome looking React components with it.