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