├── server.js ├── src ├── app.js ├── model │ └── post.js ├── Comment.js ├── Wall.js └── Post.js ├── README.md ├── styles └── main.css ├── index.html └── package.json /server.js: -------------------------------------------------------------------------------- 1 | var connect = require('connect'); 2 | var serveStatic = require('serve-static'); 3 | connect().use(serveStatic(__dirname)).listen(8080); -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | var React = require('react'), 2 | Wall = require('./Wall'); 3 | 4 | var reactComponent = React.render( 5 | , 6 | document.getElementById('app') 7 | ); 8 | -------------------------------------------------------------------------------- /src/model/post.js: -------------------------------------------------------------------------------- 1 | var post = {}; 2 | post.createPost = function(id, text) { 3 | return { 4 | id: id || 0, 5 | text: text || '', 6 | comments: [] 7 | } 8 | } 9 | 10 | module.exports = post; 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-wall 2 | My reactJS first experiment 3 | 4 | To run this 5 | ----------- 6 | Browse to folder 7 | ``` 8 | npm install 9 | node server.js 10 | npm start 11 | ``` 12 | Now browse to `http://localhost:8080` url in the browser 13 | -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | #app .container { 2 | width: 850px; 3 | position: relative; 4 | margin: 0px auto; 5 | } 6 | 7 | textarea.comment { 8 | height: 4em !important; 9 | min-height: 2em !important; 10 | margin-bottom: 1em !important; 11 | } 12 | -------------------------------------------------------------------------------- /src/Comment.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var comment = React.createClass({ 4 | render: function() { 5 | return ( 6 |
7 | {this.props.data.text} 8 |
9 | ) 10 | } 11 | }) 12 | 13 | module.exports = comment; 14 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | My Wall 4 | 5 | 6 | 7 | 8 |
9 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-wall", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "watchify -t reactify src/app.js -o build/app.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "react-tools": "^0.12.2", 14 | "reactify": "^1.0.0", 15 | "watchify": "^2.3.0", 16 | "connect": "*", 17 | "serve-static": "*" 18 | }, 19 | "dependencies": { 20 | "react": "^0.12.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Wall.js: -------------------------------------------------------------------------------- 1 | var React = require('react'), 2 | Post = require('./Post'), 3 | modelPost = require('./model/post'); 4 | 5 | var Wall = React.createClass({ 6 | getInitialState: function() { 7 | return { 8 | title: 'Adi\'s Wall', 9 | posts: [{ 10 | id: 0, 11 | text: "Hello World", 12 | comments: [{ 13 | id: 1, 14 | text: 'plzz no' 15 | }] 16 | },{ 17 | id: 1, 18 | text: "Adi learning React", 19 | comments: [] 20 | },{ 21 | id: 2, 22 | text: "This is awesome", 23 | comments: [{ 24 | id: 1, 25 | text: "Yes. it Rocks" 26 | }] 27 | }] 28 | }; 29 | }, 30 | createPost: function(event) { 31 | var elemVal; 32 | if(event.charCode == 13) { 33 | elemVal = event.target.value; 34 | if(elemVal && elemVal != "") { 35 | var posts = this.state.posts, 36 | curId = posts.length ? posts[(posts.length)-1].id : -1; 37 | this.state.posts.push(modelPost.createPost(curId+1, elemVal)); 38 | event.target.value = ""; 39 | this.forceUpdate(); 40 | event.preventDefault(); 41 | } 42 | } 43 | }, 44 | deletePost: function(postObj) { 45 | var index = this.state.posts.indexOf(postObj); 46 | this.state.posts.splice(index,1); 47 | this.forceUpdate(); 48 | }, 49 | render: function() { 50 | var posts = this.state.posts.reverse().map(function(postObj) { 51 | return ; 52 | }.bind(this)); 53 | return ( 54 |
55 |

{this.state.title}

56 | 57 |
58 | { posts } 59 |
60 |
61 | ) 62 | } 63 | }); 64 | 65 | module.exports = Wall; 66 | -------------------------------------------------------------------------------- /src/Post.js: -------------------------------------------------------------------------------- 1 | var React = require('react'), 2 | Comment = require('./Comment'); 3 | 4 | var Post = React.createClass({ 5 | getInitialState: function() { 6 | return { 7 | editMode: false 8 | }; 9 | }, 10 | deleteHandler: function(event) { 11 | this.props.onDelete(this.props.data); 12 | }, 13 | editHandler: function() { 14 | this.setState({ 15 | editMode : true 16 | }); 17 | }, 18 | saveEditHandler: function(event) { 19 | var elemVal = event.target.value; 20 | if(event.which == 13 && elemVal.trim() != "") { 21 | this.props.data.text = elemVal; 22 | this.setState({ 23 | editMode : false 24 | }); 25 | event.stopPropagation(); 26 | } else if(event.which == 27) { 27 | this.setState({ 28 | editMode : false 29 | }); 30 | event.target.value = ""; 31 | event.stopPropagation(); 32 | } 33 | }, 34 | addComment: function(event) { 35 | var elemVal, 36 | curId, 37 | comments = this.props.data.comments; 38 | if(event.which == 13) { 39 | elemVal = event.target.value; 40 | if(elemVal.trim() != "") { 41 | curId = comments.length ? comments[(comments.length)-1].id : -1; 42 | comments.push({ 43 | id: curId+1, 44 | text: elemVal 45 | }); 46 | event.target.value = ""; 47 | this.forceUpdate(); 48 | event.preventDefault(); 49 | event.stopPropagation(); 50 | } 51 | } 52 | }, 53 | render: function() { 54 | var comments = this.props.data.comments.map(function(comment){ 55 | return ; 56 | }), 57 | content =

{ this.props.data.text }

; 58 | if(this.state.editMode) { 59 | content = ; 60 | }; 61 | return ( 62 |
63 | {content} 64 |
Edit
65 |
Delete
66 |

67 | Comments 68 |

69 |
70 | 71 |
72 | {comments} 73 |
74 | ); 75 | } 76 | }); 77 | 78 | module.exports = Post; 79 | --------------------------------------------------------------------------------