Make first lesson

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["latest"],
+  "plugins": ["transform-react-jsx"]
+}

README.md

@@ -0,0 +1,6 @@
+# Reactive Lumberaxe
+> *Cutting fresh web logs!*
+
+ 
+
+This is a server rendering part of a simple blogging app created for the purpose of learning React.JS on Thinknetica courses.

components/App.js

@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import BlogPage from './BlogPage'
+
+class App extends Component {
+  render () {
+    return (<BlogPage />)
+  }
+}
+
+export default App

components/BlogItem.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import Image from './Image'
+import TextBox from './TextBox'
+
+class BlogItem extends React.Component {
+  render () {
+    return (
+      <div>
+        <Image
+          src={this.props.src}
+          width={this.props.width}
+          height={this.props.height}
+          alt={this.props.name}
+        />
+        <br />
+        <TextBox text={this.props.name} />
+        <br />
+        <TextBox text={this.props.title} />
+        <br />
+        <TextBox text={this.props.post} />
+      </div>
+    )
+  }
+}
+
+export default BlogItem

components/BlogList.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import R from 'ramda'
+import BlogItem from './BlogItem'
+
+class BlogList extends React.Component {
+  mapItems () {
+    const items = this.props.items
+    if (items) {
+      return R.addIndex(R.map)(
+        (item, i) => {
+          return (
+            <BlogItem
+              src={item.src}
+              width={item.width}
+              height={item.height}
+              name={item.name}
+              title={item.title}
+              post={item.post}
+              key={i}
+            />
+          )
+        },
+        items
+      )
+    } else {
+      return null
+    }
+  }
+  render () {
+    return (
+      <div>
+        {this.mapItems()}
+      </div>
+    )
+  }
+}
+
+export default BlogList

components/BlogPage.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import BlogList from './BlogList'
+
+const items = [
+  {
+    src: 'images/avatar_1.svg',
+    width: 100,
+    name: 'ReactJS Fan',
+    title: 'ReactJS is awesome!',
+    post: 'I think ReactJS can even cut web into clean logs!'
+  },
+  {
+    src: 'images/avatar_2.png',
+    height: 100,
+    name: 'Ramda Newbie',
+    title: 'I wanna try Ramda',
+    post: 'Hello. I want to learn Functional Programming and advanced concepts like currying by using Ramda library. Is it a good idea?'
+  },
+  {
+    src: 'images/avatar_3.png',
+    height: 100,
+    name: 'Wood Chopper',
+    title: 'Chop-chop-chop!',
+    post: 'Do you like to chop wood? I like it too! Let\'s chop together!'
+  }
+]
+
+class BlogPage extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = { items }
+  }
+
+  render () {
+    return (<BlogList items={this.state.items} />)
+  }
+}
+
+export default BlogPage

components/Image.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Image = ({src, width, height, alt}) => {
+  return (
+    <img
+      src={src}
+      width={width}
+      height={height}
+      alt={alt}
+      title={alt}
+    />
+  )
+}
+
+export default Image

components/TextBox.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const TextBox = ({text}) => {
+  return (<span>{text}</span>)
+}
+
+export default TextBox

index.js

@@ -0,0 +1,13 @@
+require('babel-register')
+
+let html = require('./render.js').default
+
+var express = require('express')
+var application = express()
+
+application.use(express.static('public'))
+application.get('/', function (req, res) {
+  res.send(html)
+})
+
+application.listen(8000)

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "reactive_lumberaxe",
+  "version": "0.0.1",
+  "main": "index.js",
+  "author": "StragaSevera",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.15.3",
+    "ramda": "^0.24.0",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-latest": "^6.24.1",
+    "babel-register": "^6.24.1"
+  },
+  "scripts": {
+    "start": "node index.js"
+  }
+}

render.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOMServer from 'react-dom/server'
+
+import App from './components/App'
+
+const html = ReactDOMServer.renderToString(<App/>)
+
+export default html