Codeigniter and React.JS setup
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.jsongulpfile.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-devnpm install gulp-plumber --save-devnpm install gulp-connect --save-devnpm install gulp-uglify --save-devnpm install gulp-concat --save-devnpm install gulp-react --save-devnpm install gulp-sass --save-devnpm 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