Welcome to the Part 4 of this new series reviewing Cory House’s Pluralsight course Building Applications with React and Flux.
Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.
He believes in clean code, pragmatic development, and responsive native UIs.
Building Applications with React and Flux is the prequel to Cory’s course Building Applications with React and Redux in ES6.
Also in this series:
In this 4th Part, we are reviewing the 4th module from the course, which is:
React: Creating Components Introduction
This is a demo heavy module, beginning with our first React component
Demo: First React Component
We create a components directory and create homePage.js in here.
In this file we use React.createClass with a render function inside it. Our JSX goes in our render function.
We set module.exports to the value of our new React component to make it available to other files, such as main.js where we require it in:
var Home = require('./components/homePage');
In main.js we call the render function like this:
React.render(<Home />, document.getElementById('app'));
This code takes our home component and attaches it to the DOM element with an id of ‘app’.
Included our index.html is the markup with the app id.
We run this by typing “gulp” and see that our new component works.
Note that if you are using a more modern version of React (this course currently uses v0.13), you might get
Uncaught TypeError: React.render is not a function
See this StackOverflow question for details
For more information on different Component approaches see React Component Approaches.
Demo: Simple Routing
We create an about directory inside components and in here we have aboutPage.js.
This new file contains our next component, and inside our new createClass object’s render function we add a switch statement.
The switch statement does the conditional logic for defining our child element: basically it’s either going to be the about page or the home page.
Next we get a bit cleverer, adding an event listener onhashchange, and defining another render function that gets the route using window.location.hash.substring(1).
Cory explains that we are creating an abstraction that sits above the homepage.
When we run our app, although there’s no navigation yet, we can update the URL to localhost:9005/#about and see our aboutPage component rendered in our browser.
Cory says he doesn’t recommend using this way in production, and that’s why we will be looking at React-Router later on in this course.
Cory also shows us how to use an Immediately Invoked Function Expression (IIFE) to allow us to “use strict” and also have some global variables in the same file.
Demo: Centralized Header
What we want to do is create links at the top of each page that allows us to navigate the different pages.
We create a common directory and in here have header.js. The code here is similar to what we’ve already seen, but with new JSX markup. This markup references the pluralsight logo, so we add that image to our project as well.
We update main.js to include the Header element as well as the Child.
Our navigation works, but we have a broken image, because we haven’t yet setup gulp to handle images.
In our gulp file, Cory updates config.paths adding images and setting it to pick up any files in our images directory with
images: './src/images/*'
Cory also shows us how to create a new gulp task for handling our images, and our favicon.ico.
We now see our logo rendered in the browser.
Naming React Components
There’s no required standard for react component names.
Cory discusses some of the different naming preferences, and gives the pros and cons of each of them.
Whether you use the .js or the .jsx extension is something that you should consider based on the arguments given here. However, whichever approach you choose the most important thing is to be consistent.
Zombie Code Kill 