bradwestfall / css-tricks-react-series

A series of guides for an article at CSS-Tricks.com

** WARNING ***

If you're looking at the articles I wrote at CSS-Tricks and subsequently this code, they are pretty old at this point.

• React Router is currently on v5 and is going to be v6 soon (at the time I wrote this note in Oct 2019). I wrote a more updated article on v4 after this series at CSS-Tricks back in 2017: https://css-tricks.com/react-router-4/. FYI, v4 and v5 are practically the same API (see why) so reading v4 is still pretty good if you're on v5
• Reading on Container Components (Smart vs Dumb Components) might give you some good ideas but in general that pattern isn't very popular these days.
• The Redux article is still pretty good and relevant.

CSS-Tricks: Leveling Up With React, A Three-Part Series

This repo is for a CSS-Tricks series on React. The documentation in this repo will show you many things that weren't shown in the series, such as

• Steps for installing and running the code
• An explanation of the Webpack and Babel setup
• Extra Tips and Tricks
• New ES6 Syntax

Guide Documentation

Each series comes with its own guide in this repo. Each guide will have a README file for its specific documentation:

• Guide 1: React Router
• Guide 2: Container Components
• Guide 3: Redux

Installing and Running Code

Each of the three guides needs to be npm-installed and ran separately. Start by cloning this repo and installing the first guide for React Router:

cd path/to/guide-1-react-router
npm install
gulp

The server will be available at localhost:3000

To run the code from the other guides, cd to their folders and run the npm steps again from their folder.

If you want to edit the React code, you'll have to re-build the public/js/bundle.js file with Webpack. You'll probably want to open a new terminal tab so you can keep your server running. To rebuild with Webpack, type:

gulp watch

Also note that you'll need to globally install Gulp first if you haven't already

Implementation Details

The articles at CSS-Tricks will be focused on their respective topics. They don't cover 100% of the concepts and implementation details of the code in the GitHub Guides. However, each guide will come with its own README.md file that tries to cover some of the implementation details, especially for ES6 concepts.

It should also be noted that the guides leave out many formalities like validation, security (XSS, CSRF) and organizational details to stay focused on the topics. These guides are trying to convey the "bigger picture" of how React can work in a Single Page Application. They do not necessarily serve as a "best-practices" starting point.

Server

Each guide uses a very simple Express server which should take no configuration on your part to setup. The gulp step will launch the server so you can visit localhost:3000 in the browser to see the guide. Type CTRL+C to stop the server, and remember that only one guide can be ran at any given time since you'll cd to each guide and run its server separately.

Webpack

Webpack is a bundler that allows you to author multiple JavaScript files and have them bundled into one file for sending to the browser. If you're new to Webpack, here's a quick overview...

Your project (or in this case, each guide at this repo) will have a webpack.config.js file. This file tells Webpack about which JavaScript file is your main entry point. That entry file will "include" other JavaScript files that it needs, which are it's "dependencies". In turn, those files can "include" even more dependencies. Webpack takes all the files in this process and bundles them into one output file. You can define where Wepback saves that file also in webpack.config.js. These guides will bundle their code to /public/js/bundle.js.

The bundle.js file that Webpack creates will be the only JavaScript file sent to the browser. So the browser will start with all the JavaScript it needs for the application without making additional requests back to the server.

Webpack allows multiple ways to indicate dependencies in JavaScript files. One way you'll see commonly online uses require() statements. That's a pattern called CommonJS. But more recently, JavaScript is in the process of adopting a new syntax called "ES6 modules" which use include statements. The browser doesn't understand either of these approaches, so Webpack will convert code written with CommonJS or ES6 modules into ES5 which the browser does understand. But Webpack will need a third party tool called Babel to use ES6 modules -- which is what these guides use for the app.

If this all sounds chaotic and difficult to setup, don't worry, all the work is already done. All you need to do is run the npm install and then the gulp and/or gulp watch commands from the install instructions.

Note that simply running gulp will launch the Node server whereas gulp watch takes care of the React/Webpack part. So you'll want to run these commands in two separate tabs if you want to have the server running and to be making React code changes.

Babel

Babel will tell Webpack how to convert ES6 (and even ES7) code to ES5. You might ask why we would want to write in future versions of JavaScript that aren't even fully supported? Well, there's new JavaScript syntax which is really nice to use. Plus, ES6 was finalized in 2015, which is why it's also called ES2015. So why should we have to wait for all browsers to catch up to a standard that's from 2015?

Many React guides use ES6, so getting familiar with it will also help you learn React. Also note that the a common way to use Babel is to put it's list of desired "presets" in a .babelrc file. This is the strategy that we're using and this file is already created for you.

Extra Tips and Tricks

JSX with Sublime

If you use Sublime Text Editor, you may notice the JSX syntax highlighting is weird in .js files. That's because the JavaScript syntax highlighter isn't familiar with markup. You'll probably want to install the babel-sublime plugin which encourages you to use the JavaScript (Babel) syntax for your files over the JavaScript syntax.

You might also notice that Emmet shortcuts don't work in JSX. Wes Bos wrote a great guide for setting that up.

The multiple ways of creating components

For myself, I prefer the React.createClass way over the extends React.Component way. Pete Hunt (former Facebook React team developer) once wrote:

"You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using React.createClass()."

I'm not saying there's anything wrong with the ES6 way, I'm just saying you don't have to feel bad or behind if you do it the older React.createClass way.

More to come...

If you want to make more suggestions for this section that help beginners break through the hurdles, start a GitHub issue and perhaps we can add more tips here.

css-tricks-react-series's Issues

Mention .babelrc

Hi,
first of all thank you very much for this series of 3 tutorials. Great work and effort from your side.
I just started a brand new project based on your 2nd tutorial and needed some time to figure out
why i got an error message like this on startup:

import express from 'express';
^^^^^^
SyntaxError: Unexpected reserved word

A stackoverflow tip mentioned to create the file .babelrc in the root directory.
I would add a sentence on your main page too which mentions this aspect in order that Babel starts working.

Don't Call PropTypes Warning

Is there a simple solution to these PropTypes warnings to ensure that the code doesn't crash in future React versions?

Quick question

Is this intentionally not became a Stateless Functional Component?

Thank you

Porting to Material design little - mdl

Nice article, nice pictures, nice css ... nice all.

but i'd like go a little bit forward.
Just to ask if it will be a next article on porting your stuff to mdl, or any other material design css frameworks.
I am really frustrated on my own work to merge react-router with this framework.

I have change the index like this index

On main-layout i translated some of the samples in this, but i don't know how to link the menu with the Link component of react-router, and show the result in the 'container'

Thanks in advance

users not reachable to twitter issue in guide-2

Brad,

Appreciated your fix promptly in user-profile.js for typo error. However, i downloaded the fix again to find the problem still there. It looked as if the change was ignored by Webpack. After trying with installing gulp globally and running npm start and gulp watch in two terminals. The browser slowly reflected what it should be. However, i really not sure whether it needs these to Webpack to effect the change. I only know that doing gulp watch can rebuild the bundle.js from webpack for change made to any file as the bundle.js is necessary for browser to refresh after changes. Please suggest what i did is right or not. Thanks.

cannot use dispatch() on IE11

I try to run it on chrome and other browser and it works completely fine, but when I use IE the users and widgets on the list is zero, or no list of user/widget at all.

is there any other way to dispatch store using IE ?

"global" store

I'm concerned about the store variable export

https://github.com/bradwestfall/CSS-Tricks-React-Series/blob/master/guide-3-redux/app/store.js#L5

It is used, for example, here:

https://github.com/bradwestfall/CSS-Tricks-React-Series/blob/master/guide-3-redux/app/api/user-api.js#L36

where the dispatch function is not available.

Broadly speaking, this happens when, after a write operation, you want to refresh the application state, for example refreshing the user list.

Is this a good practice for large application?

Doesn't run local server

Hi,

I try to run your app Guide-3 on my local server, and it doesn't work at all. Any idea?

Thanks,

Can't start gulp

Hi i'm getting the following issue when attempting to run gulp on a mac. I think i've installed all the necessary dependencies. any tips ? thk

[09:42:25] Using gulpfile ~/Desktop/Projects/CSS-Tricks-React-Series/guide-3-redux/gulpfile.js
[09:42:25] Starting 'serve:node'...
[09:42:25] Starting 'restore-database'...
[09:42:25] [nodemon] 1.10.0
[09:42:25] [nodemon] to restart at any time, enter rs
[09:42:25] [nodemon] watching: server.js
[09:42:25] [nodemon] starting /Users/Nico/Desktop/Projects/CSS-Tricks-React-Series/guide-3-redux/node_modules/.bin/babel-node ./server.js
sh: /Users/Nico/Desktop/Projects/CSS-Tricks-React-Series/guide-3-redux/node_modules/.bin/babel-node: No such file or directory
[09:42:25] [nodemon] failed to start process, "/Users/Nico/Desktop/Projects/CSS-Tricks-React-Series/guide-3-redux/node_modules/.bin/babel-node ./server.js" exec not found
events.js:146
throw err;
^

Error: Uncaught, unspecified "error" event. (127)
at emit (events.js:144:17)
at ChildProcess. (/Users/Nico/Desktop/Projects/CSS-Tricks-React-Series/guide-3-redux/node_modules/gulp-nodemon/node_modules/nodemon/lib/monitor/run.js:116:11)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

Question About Passing Props to Stateless Components

I recently came across this series on css-tricks and I have to say it's one of the best React tutorials I've found. This isn't really an issue as it is more of a question. I'm currently working on converting my website over to React using this tutorial. I have a layout component with Nav, Header, Footer components all of which are stateless functional components. Some of my pages do not use the header, and the ones that do need to have a class on them designating a background image to use. My question is, without making a separate layout without the header component, what is the best way to pass props from the router to the header component to either add a class, or not show it at all? Or is passing props from the router not a viable approach?

Widgets Link missing '/' at the beggining

Its a little detail, but:

The line:

Widgets

should be:

Widgets

Because if not, if you navigate to users, click on an user, and then click on Widgets, you get an incorrect URL of the form:
/users/widgets.

Then if you hit Refresh (F5) you get an incorrect component.

api(json-server) not starting in windows if path has spaces

The json-server is not starting for windows if there are spaces in the path.

c:\program' is not recognized as a command

Errors are coming from the gulpfile.js. It's working for me at the moment if I'm adding quotes to the __dirname, but I guess that's not the right solution.
gulpfile.js:43&54 var serverPath = path.join('"'+__dirname+'"', 'node_modules/.bin/json-server');

Big thumps up for the tutorial/article! 👍

preferred starter kit for the final project

Would love to build the final project in guide 3 from scratch without using the code in the repo. Which start kit would you recommend for such undertaking?

Thanks a lot for the wonderful guide. It makes the redux bit much clearer in my head.