Configuring Codeigniter and React.JS

Question

I plan to have Codeigniter and ReactJS for my new project,

I need to know how to configure project folders and the process of building .jsx.js files

and then all the .js files that will be concatenated and reduced to min.js

I think about using GruntJS

Answer 1

Try Gulp instead

I would suggest that you use Gulp instead, it is much more IMO friendly.

If I set up such a project, I could start with a folder structure like this and set my node_modules. I really enjoy using (sass, jade-php, livereload), but this is 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 codeigniter view folder structure layouts/ index.jade welcome welcome_message.jade 

Requirements

 node.js 

First you need to install Gulp globally.

 npm install gulp -g 

CD to the 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 starting Gulp, and it will call it the default task

 gulp