diff --git a/client/README.md b/client/README.md new file mode 100644 index 0000000000..b75516ce38 --- /dev/null +++ b/client/README.md @@ -0,0 +1,3 @@ +This is the entry point for the client +Code that should only run on the client should be put here. +NOTE(berks): For react specific stuff this should be the entry point diff --git a/client/index.js b/client/index.js new file mode 100644 index 0000000000..68baa7ec0a --- /dev/null +++ b/client/index.js @@ -0,0 +1,20 @@ +import BrowserHistory from 'react-router/lib/BrowserHistory'; +import debugFactory from 'debug'; +import { Cat } from 'thundercats'; + +import AppFactory from '../common/app/appFactory'; + +const debug = debugFactory('fcc:client'); +const DOMContianer = document.getElemenetById('#fCC'); +const fcc = new Cat(); + +// returns an observable +fcc.render(AppFactory(BrowserHistory), DOMContianer) + .subscribe( + function() { + debug('react rendered'); + }, + function(err) { + debug('an error has occured', err.stack); + } + ); diff --git a/common/app/App.jsx b/common/app/App.jsx new file mode 100644 index 0000000000..f3a77cae51 --- /dev/null +++ b/common/app/App.jsx @@ -0,0 +1,25 @@ +import React, { PropTypes } from 'react'; + +import Nav from './components/Nav'; +import Footer from './components/Footer'; + +export default class extends React.Component { + constructor(props) { + super(props); + } + + static displayName = 'FreeCodeCamp' + static propTypes = { + children: PropTypes.node + } + + render() { + return ( +
+
+ ); + } +} diff --git a/common/app/appFactory.jsx b/common/app/appFactory.jsx new file mode 100644 index 0000000000..b8732a89c6 --- /dev/null +++ b/common/app/appFactory.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Router, Route } from 'react-router'; + +// components +import App from './App.jsx'; +import Jobs from './screens/App/screens/Jobs'; + +module.exports = function appFactory(history) { + return ( + + + + + + ); +}; diff --git a/common/app/components/Footer/Footer.jsx b/common/app/components/Footer/Footer.jsx new file mode 100644 index 0000000000..f95e0e3adc --- /dev/null +++ b/common/app/components/Footer/Footer.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Col, Row, Grid } from 'react-bootstrap'; + +import links from './links.json'; + +export default class extends React.Component { + static displayName = 'Footer' + renderLinks(mobile) { + return links.map(link => { + return ( + + { this.renderContent(mobile, link.content) } + + ); + }); + } + + renderContent(mobile, content) { + if (mobile) { + return ( + + content; + + ); + } + return content; + } + + render() { + return ( + + + + { this.renderLinks() } + + + { this.renderLinks(true) } + + + + ); + } +} diff --git a/common/app/components/Footer/index.js b/common/app/components/Footer/index.js new file mode 100644 index 0000000000..c50e0cda87 --- /dev/null +++ b/common/app/components/Footer/index.js @@ -0,0 +1 @@ +export { default as Footer } from './Footer.jsx'; diff --git a/common/app/components/Footer/links.json b/common/app/components/Footer/links.json new file mode 100644 index 0000000000..54071917b4 --- /dev/null +++ b/common/app/components/Footer/links.json @@ -0,0 +1,44 @@ +[ + { + "className": "ion-speakerphone", + "content": " Blog  ", + "href": "http://blog.freecodecamp.com", + "target": "_blank" + }, + { + "className": "ion-social-twitch-outline", + "content": " Twitch  ", + "href": "http://www.twitch.tv/freecodecamp", + "target": "_blank" + }, + { + "className": "ion-social-github", + "content": " Github  ", + "href": "http://github.com/freecodecamp", + "target": "_blank" + }, + { + "className": "ion-social-twitter", + "content": " Twitter  ", + "href": "http://twitter.com/freecodecamp", + "target": "_blank" + }, + { + "className": "ion-social-facebook", + "content": " Facebook  ", + "href": "http://facebook.com/freecodecamp", + "target": "_blank" + }, + { + "className": "ion-information-circled", + "content": " About  ", + "href": "/learn-to-code", + "target": "_self" + }, + { + "className": "ion-locked", + "content": " Privacy  ", + "href": "/privacy'", + "target": "_self" + } +] diff --git a/common/screens/nav/Nav.jsx b/common/app/components/Nav/Nav.jsx similarity index 56% rename from common/screens/nav/Nav.jsx rename to common/app/components/Nav/Nav.jsx index 52a9a8728b..f5c339c2c1 100644 --- a/common/screens/nav/Nav.jsx +++ b/common/app/components/Nav/Nav.jsx @@ -1,31 +1,30 @@ -var React = require('react'), - bootStrap = require('react-bootstrap'), - Navbar = bootStrap.Navbar, - Nav = bootStrap.Nav, - NavItem = bootStrap.NavItem, - NavItemFCC = require('./NavItem.jsx'); +import React from 'react'; +import { Nav, Navbar, NavItem } from 'react-bootstrap'; +import NavItemFCC from './NavItem.jsx'; -var NavBarComp = React.createClass({ +export default class extends React.Component { + constructor(props) { + super(props); + } - propTypes: { signedIn: React.PropTypes.bool }, + static displayName = 'Nav' + static propTypes = { + signedIn: React.PropTypes.bool + } - getDefaultProps: function() { - return { signedIn: false }; - }, - - _renderBrand: function() { + renderBrand() { var fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'; return ( learn to code javascript at Free Code Camp logo + className='img-responsive nav-logo' + src={ fCClogo } /> ); - }, + } - _renderSignin: function() { + renderSignin() { if (this.props.signedIn) { return ( - Sign In + href='/login'> + Sign In ); } - }, - - render: function() { + } + render() { return ( + toggleNavKey={ 0 }>