A simple react starter kit

During my last semester @ USC, I took quite a few web-related courses. Almost all of them required a project to be completed - and I did all my projects on React. This was my first time using React but before making this selection, I browsed through all the frameworks out there. The JS landscape has changed completely, there are posts explaining top 250 frameworks in JS. The surprising part is the number 250 - how does one go about choosing the best tool.

Well, I simply made my selection based on the most popular JS framework out there now - and without a doubt it is React. I have tried my hand on Angular and I loved it, but this was quite a while back. I liked Angular due to the fact that you could build your ui in components with the help of directives. When I started learning React, I was blown away with the concept. I have always liked state machine, and the way you can structure react components feels so natural to me. It is very important that when you go about building a framework, that you make it easy for people to follow the design decisions. React is brilliant at this.

Below, is how I go about structuring React apps, and what I did was remove the common portions of my react apps and put it into one starter project.

I use gulp to build and pipe my react project and I use webpack to bundle all my react components. So, I put together a gulp file that helps me perform all this as I write my code. The repository can be found here and this blog post aims at explaining gulp and other code located in the repository.

The first thing I do is have two separate folders for my app (src) and deployment (build) directories. So all your code is structured in that way. Executing gulp automatically creates a build folder that can be uplaoded to your server.

So, how do I go about generating the CSS, HTML and JS scripts in the build folder. For that lets look at the script below

// html page
gulp.task('html', function() {
  return gulp.src(src + '/index.html')
    .pipe(gulp.dest(app+"/"));
});

// js files
gulp.task('js', function() {
  return gulp.src(src + '/js/main.js')
    .pipe(browserify({
      transform: 'reactify',
      debug: true
    }))
    .on('error', function(err) {
      console.error('Error!', err.message);
    })
    .pipe(gulp.dest(app + '/js'));
});

// css files
gulp.task('css', function() {
  return gulp.src(src+ '/css/**/*')
  .pipe(gulp.dest(app+'/css/'));
});

So, if you look at the above pieces of code, both CSS and HTML share the same functions, it takes the files from the src folder and pipes it into the app folder (The app folder in this case is the build directory).

For the JS files, we do something different, we use a plugin called reactify to transform the react files to something meaningful. This helps us create the required HTML, CSS and JS files.

In order to provide for a seamless development, where you are able to see your code immediately, I use the gulp webserver task that has live reload inbuilt in it and I use wacther task to check if there are any changes to my HTML, CSS and JS files. This way it makes it easier to develop and see the changes immediately. Below, you will find the code blocks to do the same I mentioned:

// watcher task
gulp.task('watch', function() {
  gulp.watch(src + '/js/**/*', ['js']);
  gulp.watch([src + '/**/*.html'], ['html']);
  gulp.watch( src + '/css/**/*.css', ['css']);
});

// webserver example
gulp.task('webserver', function() {
  gulp.src(app + "/")
    .pipe(webserver({
      livereload: true,
      open: true
    }));
});

And there you have it - you now have all the tools to setup a dev environment for building react apps. The other portions of the gulp files just includes initializations of a few variables and the task initializations.

I have a structured way of loading react components - and I go about doing that using the following directory strcuture:

/js
    main.js
    components/
        Navbar.js
        Footer.js
        LoadingScreen.js
        ...

This makes it easy to organize code and all your components in a single directory structure. For small and simple apps, I think having the structure similar to what I explained in this blog post is suitable.

Well, thats all for this post - It just goes about explaining my project to help bootstrap a simple and fast react app.