/usr/bin/nodejs to /usr/bin/nodepackage.js file with the an empty json object:$ echo "{}" > package.js
In the same directory, install all the project dependencies with the following command:
$ npm install --save-dev browser-sync gulp gulp-util react reactify vinyl-source-stream
Then create the other files of this gist and when you are done run:
$ gulp compile
$ gulp
| // watch the project, compile and reload the browser on changes | |
| var browserify = require('browserify'); | |
| var gulp = require('gulp'); | |
| var source = require("vinyl-source-stream"); | |
| var reactify = require('reactify'); | |
| var browserSync = require('browser-sync'); | |
| gulp.task('compile', function(){ | |
| var b = browserify(); | |
| b.transform(reactify); // use the reactify transform | |
| b.add('./main.js'); | |
| return b.bundle() | |
| .pipe(source('./main.js')) | |
| .pipe(gulp.dest('./dist')); | |
| }); | |
| // start server | |
| gulp.task('browser-sync', function() { | |
| browserSync({ | |
| server: { | |
| baseDir: "./" | |
| } | |
| }); | |
| }); | |
| // use default task to launch BrowserSync and watch JS files | |
| gulp.task('default', ['browser-sync'], function () { | |
| // add browserSync.reload to the tasks array to make | |
| // all browsers reload after tasks are complete. | |
| gulp.watch(["*.js", "*.jsx", "index.html", "app.css"], ['compile', browserSync.reload]); | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>react demo</title> | |
| <!-- <link rel="stylesheet" href="normalize.css"> --> | |
| <!-- <link rel="stylesheet" href="app.css"> --> | |
| </head> | |
| <body> | |
| Héllo World! | |
| <div id="main"> | |
| </div> | |
| <script type="text/javascript" src="dist/main.js"></script> | |
| </body> | |
| </html> |
| var React = require('react'); | |
| var view = require('./myview.jsx'); | |
| React.render(view(), document.getElementById('main')); |
| var React = require('react'); | |
| var MyView = React.createClass({ | |
| render: function(){ | |
| return ( | |
| <div> | |
| Example React Project | |
| </div> | |
| ); | |
| } | |
| }); | |
| function render() { | |
| return <MyView />; | |
| } | |
| module.exports = render |