Lessons Learned as a React Newbie

A version of this appears on Purple, Rock, Scissors.

A few months ago, I started a project for a big tech company that required the use of ReactJS. Looking back, there was a glaring lack of samples to reference on the internet, and there are several things that I wish I was able to understand more easily. To save you some grief, I’ll share what I’ve learned. I’ll be starting with compiling with Babel using Webpack and also some bonus Browserify sample files.

This was also my first time fully using ES6 so I’ll be dropping some ES6 tips throughout as well.

This doesn’t cover a start-to-finish React project. If anyone is interested in seeing a series of posts like this or has a specific question, please leave me a note in the comments!

Future topics I’d like to cover:

• Passing properties to child components
• Passing properties up the component tree
• Sideways loading method for vanilla React
• Using Context for localization / translations (or just plain old content)
• Building your JSX files so the browser can read it

Compiling JSX into ECMAScript 5 (ES5)

I’ve compiled using both Webpack and Browserify, and so far I find Webpack to be a quicker build. I do believe strongly that this is a matter of preference, however.

Using Babelify

Feel free to check out my sample Gulp file and package file.

Using Webpack

I recently started using Webpack to compile my JS, so feedback on the subject is always welcome. You could also use Webpack to compile SCSS or LESS, but in this case I needed to compile into a legacy CSS file, and I was already familiar with Gulp.

# Project Structure
app/
  dist/
   - build.js
   - layout.css
  app.js
  index.html
.babelrc
gulpfile.js
package.json
webpack.config.js

In this sample, Webpack is doing all of the heavy-lifting via NPM and Webpack using this config file:

Babel will look for a .babelrc file in the same directory or check parent directories to apply its settings. You can get more info on babelrc here.

// # .babelrc
{
 “presets” : [“es2015”, “react”, “stage-0”]
}

Compiling Webpack

If you’re using NPM, you can add this to your package.json

// # package.json
“scripts”: {
  “dev”: “webpack -d — watch — define process.env.NODE_ENV=’\”development\”’ — progress — colors”,
  “build”: “webpack -p — define process.env.NODE_ENV=’\”production\”’ — progress — colors”
}

Running npm run dev will watch for changes in your JSX files and compile them with a sourcemap, and running npm run build will process and uglify your build file into a distribution-ready file.

For a really thorough tutorial on setting up Webpack with Babel6 and NPM, check out this article over at CodeMentor.

Using Gulp with Webpack

Here’s where I got tied up for a little bit—trying to keep Webpack watching my JSX files while also wanting to utilize Gulp to watch and compile some legacy SCSS I had written. I use webpack-stream to integrate Webpack with Gulp.

// # gulpfile.js
// Require
var gulp = require('gulp');
var webpackStream = require('webpack-stream');
// Gulp Webpack Compiler
gulp.task(‘default’, function() {
  // Run Webpack
  return gulp.src(‘./app/app.js’)
   .pipe(webpackStream(config))
   .pipe(gulp.dest(‘./app/dist/’));
  });
});

Get the full sample gulpfile.js

Using environment variables

I used the Webpack definePlugin to specify this as a development build. Require webpack and add your custom definitions.

// # gulpfile.js
// Require
var gulp = require('gulp');
var webpack = require('webpack');
var webpackStream = require('webpack-stream');
config.watch    = true;
config.progress = true;
config.devtool  = ‘cheap-module-eval-source-map’;
config.plugins  = [
  new webpack.DefinePlugin({
    ‘process.env.NODE_ENV’: ‘”development”’
  })
];
...

Get the full sample gulpfile.js

Sprinkling in a little SASS

My final Gulp file with SASS preprocessing:

Additional resources

Getting Started With NPM
Gulp — Getting Started

Skip it: Quick setup method (no compiling)

Put this at the bottom of your page before the closing body tag and before your application’s JSX file.

Conclusion

Always use what’s comfortable for you. I will be writing more of these with guides with samples as I’ve mentioned, with the next topic covering what kind of properties should be passed down to children, and how we can thread information back to its parent in the rare case that we need to.

If you have any questions or feedback, feel free to hit me up in the comments!

If you enjoyed this article written for Orlando digital creative agency Purple, Rock, Scissors, please hit the heart below to recommend it to others!