Skip to content

Instantly share code, notes, and snippets.

@amirouche
Last active August 29, 2015 14:12
Show Gist options
  • Save amirouche/bbbd65a664d0f05a8674 to your computer and use it in GitHub Desktop.
Save amirouche/bbbd65a664d0f05a8674 to your computer and use it in GitHub Desktop.
Getting started with react
  • Install npm and nodejs (on debian I had to link /usr/bin/nodejs to /usr/bin/node
  • At the root of your project create package.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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment