Last active
August 29, 2015 14:16
-
-
Save AllenFang/da2a2d1fc4f397e47047 to your computer and use it in GitHub Desktop.
It's my blogger article for http://programer-learn.blogspot.com/2015/03/reactjs-example-with-browserify-and.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require("react"); //use require(module_name) to load module. | |
React.render( | |
<p>Hello, World!</p>, | |
document.getElementById('hello') | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ cd react-browserify-demo # go into project root folder | |
$ browserify -t reactify -t debowerify public/js/src/app.js -o public/js/build/build.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var React = require('react'); | |
// or | |
var flux = require('flux'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
extends layout | |
block content | |
div(id="hello") | |
script(src="/js/build/build.js") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$ npm install browserify -g #install browserify to your systems first. But you can just install in you project only | |
$ express react-browserify-demo | |
$ cd react-browserify-demo | |
$ npm install debowerify --save-dev | |
$ npm install reactify --save-dev | |
# before use bower, plz prepare your bower.json, following is a basic format | |
# { | |
# "name": "react-browserify-demo", | |
# "version": "0.1.0" | |
# } | |
$ bower install react --save #Here I install react woth bower instead of npm |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"dependencies": { | |
"flux": "^2.0.1", | |
"keymirror": "~0.1.0", | |
"object-assign": "^1.0.0", | |
"react": "^0.12.0" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"browserify":{ | |
"transform":["reactify"] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment