Codeigniter and React.JS setup

Question

Im planning to have Codeigniter and ReactJS for my new project,

I need to know how to setup the project folders and the build process for the .jsx files to be .js

Answer 1

Try Gulp instead

I might suggest you use gulp instead, it's much more beginner friendly IMO.

If I was setting up such a project I might start with a folder structure like this, and install my node_modules. I quite like to use (sass,jade-php,livereload) but these are optional.

Folder structure

package.json
gulpfile.js

/application
  | views/
  | ...
/public
  | index.php
  | css/
  | js/
/vendor/codeigniter
/node_modules
/src
  | react
      app.jsx
  | sass
      app.scss
      _variables.scss
  | jade
    views/ // this mimic's codeigniter's view folder structure
      layouts/
        index.jade
      welcome
        welcome_message.jade

Requirements

node.js

You will need to install gulp globally first.

npm install gulp -g 

CD into your project folder

cd c:/xampp/htdocs/project

Generate package.json

npm init

Generate gulpfile

touch gulpfile.js

Install Tools

npm install gulp --save-dev
npm install gulp-plumber --save-dev
npm install gulp-connect --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-react --save-dev
npm install gulp-sass --save-dev
npm install gulp-jade-php --save-dev

gulpfile.js

var gulp, plumber, connect, views, assets, root; 

gulp = require('gulp');

plumber = require('gulp-plumber');

connect = require('gulp-connect');

views = './application/views';

assets = './public';

root = assets + '/index.php';
/*
 * ---------------------------------------
 * Jade PHP
 * ---------------------------------------
**/
var jade = require('gulp-jade-php');

gulp.task('jade', function(){
    return gulp.src('./src/jade/**/*.jade')
               .pipe(plumber())
               .pipe(jade({pretty: true}))
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(views));
});

/*
 * ---------------------------------------
 * React
 * ---------------------------------------
**/
var react = require('gulp-react');
var uglify = require('gulp-uglify');

gulp.task('react', function(){
    return gulp.src('./src/react/**/*.jsx')
               .pipe(plumber())
               .pipe(react())
               .pipe(uglify())
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(assets + '/js'));
});

/*
 * ---------------------------------------
 * Sass
 * ---------------------------------------
**/
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src('./src/sass/app.scss')
               .pipe(plumber())
               .pipe(sass({outputStyle:'compressed'}))
               .pipe(plumber.stop())
               .pipe(connect.reload())
               .pipe(gulp.dest(assets + '/css'));
});

/*
 * ---------------------------------------
 * Watch
 * ---------------------------------------
**/
gulp.task('watch', function(){
    gulp.watch('./src/jade/**/*.jade', ['jade']);
    gulp.watch('./src/react/**/*.jsx', ['react']);
    gulp.watch('./src/sass/**/*.scss', ['sass']);
});

/*
 * ---------------------------------------
 * Connect(livereload)
 * ---------------------------------------
**/
gulp.task('connect', function(){
    connect.server({
        root: [root],
        port: 9000,
        livereload: true
    });
});

/*
 * ---------------------------------------
 * Default Task
 * runs the array of tasks we provide it
 * ---------------------------------------
**/
gulp.task('default', ['jade', 'react', 'sass', 'watch', 'connect']);

To initialize just run gulp and it will call it's default task

gulp