13 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Chapter 08/8-auth/src/components/Repo.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class Repo extends React.Component {
4 |
5 | constructor(props){
6 | super(props);
7 | }
8 |
9 | render() {
10 | const { userName, repoName } = this.props.params;
11 | return (
12 | {userName} / {repoName}
14 |
13 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Chapter 07/7-routing/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 | import { BrowserRouter } from 'react-router-dom'
4 |
5 | import Root from './modules/Root'
6 |
7 | const initialData = JSON.parse(window.__INITIAL_STATE__);
8 |
9 | render((
10 | {userName} / {repoName}
14 |
13 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/sequelize.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import Sequelize from 'sequelize';
7 |
8 | const databaseUrl = process.env.DATABASE_URL || 'sqlite:database.sqlite';
9 | const sequelize = new Sequelize(databaseUrl, { define: { freezeTableName: true } });
10 |
11 | export default sequelize;
12 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/queries/viewer.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import User from '../models/User';
7 | import UserType from '../types/UserType';
8 |
9 | const viewer = {
10 |
11 | type: UserType,
12 |
13 | resolve({ user }) {
14 | return User.load(user && user.id);
15 | }
16 |
17 | };
18 |
19 | export default viewer;
20 |
--------------------------------------------------------------------------------
/Chapter 07/7-routing/modules/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class About extends React.Component {
4 |
5 | constructor(props){
6 | super(props);
7 | console.log(`about props: ${Object.keys(props)}`)
8 | }
9 |
10 | static loadData(){
11 | return Promise.resolve({
12 | data: 'Hello About'
13 | });
14 | }
15 |
16 | render() {
17 | return {userName} / {repoName}
14 |About
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/core/fetch/fetch.server.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import fetch, { Request, Headers, Response } from 'node-fetch';
7 |
8 | function localFetch(url, options) {
9 | return fetch(url.startsWith('http') ?
10 | url : `http://localhost:3000${url}`, options);
11 | }
12 |
13 | export { localFetch as default, Request, Headers, Response };
14 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/core/fetch/fetch.server.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import fetch, { Request, Headers, Response } from 'node-fetch';
7 |
8 | function localFetch(url, options) {
9 | return fetch(url.startsWith('http') ?
10 | url : 'http://localhost:3000' + url, options);
11 | }
12 |
13 | export { localFetch as default, Request, Headers, Response };
14 |
--------------------------------------------------------------------------------
/Chapter 07/7-routing/modules/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import routes from '../routesConfig'
3 | import RouteWithSubRoutes from './RouteWithSubRoutes'
4 |
5 | export default class Root extends React.Component {
6 |
7 | render() {
8 | return (
9 |
10 | {
11 | routes.map((route, i) => (
12 |
16 | )
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/Chapter 08/8-auth/src/components/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import routes from '../../routesConfig'
3 | import RouteWithSubRoutes from './RouteWithSubRoutes'
4 |
5 | export default class Root extends React.Component {
6 |
7 | render() {
8 | return (
9 |
10 | {
11 | routes.map((route, i) => (
12 |
16 | )
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/queries/greeting.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import { GraphQLString as StringType } from 'graphql';
7 |
8 | const greeting = {
9 |
10 | type: StringType,
11 |
12 | args: {
13 | name: {
14 | type: StringType,
15 | },
16 | },
17 |
18 | resolve(_, { name }) {
19 | return `Welcome, ${name || 'Guest'}!`;
20 | },
21 |
22 | };
23 |
24 | export default greeting;
25 |
--------------------------------------------------------------------------------
/Chapter 09/B05226_09_Code/src/components/Root.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import routes from '../../routesConfig'
3 | import RouteWithSubRoutes from './RouteWithSubRoutes'
4 |
5 | export default class Root extends React.Component {
6 |
7 | render() {
8 | return (
9 |
10 | {
11 | routes.map((route, i) => (
12 |
16 | )
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/routes/NotFound/NotFound.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | const path = '/404';
9 | const action = () =>
14 |
17 | );
18 | }
19 |
20 | export default { path, action };
21 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/routes/NotFound/NotFound.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | const path = '/404';
9 | const action = () => Page Not Found
15 |Sorry, but the page you were trying to view does not exist.
16 |
14 |
17 | );
18 | }
19 |
20 | export default { path, action };
21 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/routes/NotFound/NotFound.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | const path = '/404';
9 | const action = () => Page Not Found
15 |Sorry, but the page you were trying to view does not exist.
16 |
14 |
17 | );
18 | }
19 |
20 | export default { path, action };
21 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/routes/NotFound/NotFound.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | const path = '/404';
9 | const action = () => Page Not Found
15 |Sorry, but the page you were trying to view does not exist.
16 |
14 |
17 | );
18 | }
19 |
20 | export default { path, action };
21 |
--------------------------------------------------------------------------------
/Chapter 01/1-started/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig helps developers define and maintain consistent
2 | # coding styles between different editors and IDEs
3 | # http://editorconfig.org
4 |
5 | root = true
6 |
7 | [*]
8 |
9 | # Change these settings to your own preference
10 | indent_style = space
11 | indent_size = 2
12 |
13 | # We recommend you to keep these unchanged
14 | end_of_line = lf
15 | charset = utf-8
16 | trim_trailing_whitespace = true
17 | insert_final_newline = true
18 |
19 | [*.md]
20 | trim_trailing_whitespace = false
21 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/models/Tag.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import DataType from 'sequelize';
7 | import Model from '../sequelize';
8 |
9 | const Tag = Model.define('Tag', {
10 |
11 | id: {
12 | type: DataType.INTEGER,
13 | primaryKey: true,
14 | autoIncrement: true
15 | },
16 |
17 | slug: {
18 | type: DataType.TEXT
19 | },
20 |
21 | name: {
22 | type: DataType.TEXT
23 | }
24 |
25 | });
26 |
27 | export default Tag;
28 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/routes/Home/Hero.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | function Hero() {
9 | return (
10 | Page Not Found
15 |Sorry, but the page you were trying to view does not exist.
16 |
11 |
20 | );
21 | }
22 |
23 | export default Hero;
24 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/routes/Home/Hero.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | function Hero() {
9 | return (
10 | Rent Anything You Want
12 |From people around you
13 | 19 |
11 |
20 | );
21 | }
22 |
23 | export default Hero;
24 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/routes/Home/Hero.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | function Hero() {
9 | return (
10 | Rent Anything You Want
12 |From people around you
13 | 19 |
11 |
20 | );
21 | }
22 |
23 | export default Hero;
24 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/schema.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import {
7 | GraphQLSchema as Schema,
8 | GraphQLObjectType as ObjectType,
9 | } from 'graphql';
10 |
11 | import viewer from './queries/viewer';
12 | import greeting from './queries/greeting';
13 |
14 | const schema = new Schema({
15 | query: new ObjectType({
16 | name: 'Query',
17 | fields: {
18 | viewer,
19 | greeting
20 | }
21 | })
22 | });
23 |
24 | export default schema;
25 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/routes/Home/Hero.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 |
8 | function Hero() {
9 | return (
10 | Rent Anything You Want
12 |From people around you
13 | 19 |
11 |
21 | );
22 | }
23 |
24 | export default Hero;
25 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/queries/offer.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import {
7 | GraphQLID as ID,
8 | GraphQLNonNull as NonNull
9 | } from 'graphql';
10 |
11 | import Offer from '../models/Offer';
12 | import OfferType from '../types/OfferType';
13 |
14 | const viewer = {
15 |
16 | type: OfferType,
17 |
18 | args: {
19 | id: { type: new NonNull(ID) }
20 | },
21 |
22 | resolve(root, { id }) {
23 | return Offer.findById(id);
24 | }
25 |
26 | };
27 |
28 | export default viewer;
29 |
--------------------------------------------------------------------------------
/Chapter 08/8-auth/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {render} from 'react-dom'
3 | import {BrowserRouter} from 'react-router-dom'
4 | import {Provider} from 'react-redux'
5 | import {createStore} from 'redux'
6 | import reducers from './reducers';
7 |
8 | import Root from './components/Root'
9 |
10 | const initialData = JSON.parse(window.__INITIAL_STATE__);
11 |
12 | const store = createStore(reducers, initialData);
13 |
14 | render((
15 | Rent Anything You Want
12 |From people around you
13 | 20 |14 | Current time (timestamp in ms): {time} 15 |
16 | ); 17 | } 18 | 19 | export default CurrentTime; 20 | -------------------------------------------------------------------------------- /Chapter 05/5-react-server/components/CurrentTime/CurrentTime.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Learning Isomorphic Web Application Development 3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing 4 | */ 5 | 6 | import React from 'react'; 7 | import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; 8 | 9 | function CurrentTime() { 10 | const elem = canUseDOM && document.querySelector('.time[data-time]'); 11 | const time = elem ? +elem.dataset.time : Date.now(); 12 | return ( 13 |14 | Current time (timestamp in ms): {time} 15 |
16 | ); 17 | } 18 | 19 | export default CurrentTime; 20 | -------------------------------------------------------------------------------- /Chapter 01/1-started/client.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Learning Isomorphic Web Application Development 3 | * Copyright © 2015 Konstantin Tarkus, Packt Publishing 4 | * All rights reserved. 5 | */ 6 | 7 | import 'babel-core/register'; 8 | import React from 'react'; 9 | import ReactDOM from 'react-dom'; 10 | import App from './components/App'; 11 | 12 | function run() { 13 | ReactDOM.hydrate(
26 | {this.state.msg}
27 |
28 |
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/client.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import 'babel-core/register';
7 | import React from 'react';
8 | import ReactDOM from 'react-dom';
9 | import Router from './core/Router';
10 |
11 | function run() {
12 | const component = Router.match({ path: window.location.pathname });
13 | ReactDOM.hydrate(component, document.getElementById('app'));
14 | }
15 |
16 | const loadedStates = ['complete', 'loaded', 'interactive'];
17 |
18 | if (loadedStates.includes(document.readyState) && document.body) {
19 | run();
20 | } else {
21 | window.addEventListener('DOMContentLoaded', run, false);
22 | }
23 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/components/Layout/Layout.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 | import PropTypes from 'prop-types';
8 | import Header from '../Header';
9 |
10 | function Layout({ hero, children }) {
11 | return (
12 |
13 | {hero}
14 |
15 | {children}
16 |
17 |
20 |
21 | );
22 | }
23 |
24 | Layout.propTypes = {
25 | hero: PropTypes.element,
26 | children: PropTypes.element.isRequired
27 | };
28 |
29 | export default Layout;
30 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/core/Router.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | const routes = [
7 | require('../routes/Home').default,
8 | require('../routes/NotFound').default
9 | ];
10 |
11 | const router = {
12 | match(location) {
13 | const route = routes.find(x => x.path === location.path);
14 |
15 | if (route) {
16 | try {
17 | return route.action();
18 | } catch (err) {
19 | return routes.find(x => x.path === '/500').action();
20 | }
21 | } else {
22 | return routes.find(x => x.path === '/404').action();
23 | }
24 | }
25 | };
26 |
27 | export default router;
28 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/types/UserType.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import {
7 | GraphQLID as ID,
8 | GraphQLObjectType as ObjectType,
9 | GraphQLString as StringType,
10 | GraphQLNonNull as NonNull
11 | } from 'graphql';
12 |
13 | const UserType = new ObjectType({
14 |
15 | name: 'User',
16 |
17 | fields: {
18 |
19 | id: { type: new NonNull(ID) },
20 |
21 | username: { type: new NonNull(StringType) },
22 |
23 | email: { type: new NonNull(StringType) },
24 |
25 | displayName: { type: new NonNull(StringType) }
26 |
27 | }
28 |
29 | });
30 |
31 | export default UserType;
32 |
--------------------------------------------------------------------------------
/Chapter 09/B05226_09_Code/src/components/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export default class About extends React.Component {
4 |
5 | constructor(props){
6 | super(props);
7 | this.state = {
8 | msg: 'Hello'
9 | }
10 | }
11 |
12 | static loadData(){
13 | return Promise.resolve({
14 | data: 'Hello About'
15 | });
16 | }
17 |
18 | changeMsg(){
19 | this.setState({
20 | msg: 'World'
21 | })
22 | }
23 |
24 | render() {
25 | return
26 | {this.state.msg}
27 |
28 |
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/client.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import 'babel-core/register';
7 | import React from 'react';
8 | import ReactDOM from 'react-dom';
9 | import Router from './core/Router';
10 |
11 | function run() {
12 | const component = Router.match({ path: window.location.pathname });
13 | ReactDOM.hydrate(component, document.getElementById('app'));
14 | }
15 |
16 | const loadedStates = ['complete', 'loaded', 'interactive'];
17 |
18 | if (loadedStates.includes(document.readyState) && document.body) {
19 | run();
20 | } else {
21 | window.addEventListener('DOMContentLoaded', run, false);
22 | }
23 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/core/Router.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | const routes = [
7 | require('../routes/Home').default,
8 | require('../routes/NotFound').default
9 | ];
10 |
11 | const router = {
12 | match(location) {
13 | const route = routes.find(x => x.path === location.path);
14 |
15 | if (route) {
16 | try {
17 | return route.action();
18 | } catch (err) {
19 | return routes.find(x => x.path === '/500').action();
20 | }
21 | } else {
22 | return routes.find(x => x.path === '/404').action();
23 | }
24 | }
25 | };
26 |
27 | export default router;
28 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/data/types/OfferType.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import {
7 | GraphQLID as ID,
8 | GraphQLObjectType as ObjectType,
9 | GraphQLString as StringType,
10 | GraphQLNonNull as NonNull
11 | } from 'graphql';
12 |
13 | import UserType from './UserType';
14 |
15 | const OfferType = new ObjectType({
16 |
17 | name: 'Offer',
18 |
19 | fields: {
20 |
21 | id: { type: new NonNull(ID) },
22 |
23 | title: { type: new NonNull(StringType) },
24 |
25 | author: { type: new NonNull(UserType) },
26 |
27 | description: { type: new NonNull(StringType) }
28 |
29 | }
30 |
31 | });
32 |
33 | export default OfferType;
34 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 | import PropTypes from 'prop-types';
8 |
9 | function Header({ children }) {
10 | return (
11 |
13 | My App
14 | {
15 | !children &&
16 |
17 | }
18 |
23 | {children}
24 |
19 | Username
20 | 
21 |
22 |
13 | My App
14 | {
15 | !children &&
16 |
17 | }
18 |
23 | {children}
24 |
19 | Username
20 |
21 |
22 |
13 | My App
14 | {
15 | !children &&
16 |
17 | }
18 |
23 | {children}
24 |
19 | Username
20 |
21 |
22 |
13 | My App
14 | {
15 | !children &&
16 |
17 | }
18 |
23 | {children}
24 |
19 | Username
20 |
21 |
22 |
33 |
36 | );
37 | }
38 | }
39 |
40 | export default App;
41 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/components/Layout/Layout.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | @import '../variables.scss';
7 |
8 | .root {
9 | position: relative;
10 | display: flex;
11 | width: 100%;
12 | height: 100%;
13 | overflow-x: hidden;
14 | overflow-y: auto;
15 | -webkit-overflow-scrolling: touch;
16 | flex-direction: column;
17 | }
18 |
19 | .header {
20 | z-index: 3;
21 | display: flex;
22 | width: 100%;
23 | min-height: 64px;
24 | max-height: 1000px;
25 | box-sizing: border-box;
26 | padding: 0;
27 | margin: 0;
28 | color: white;
29 | flex-direction: column;
30 | background: url(./header.jpg) center / cover;
31 | border: none;
32 | box-shadow: $shadow-2dp;
33 | transition-timing-function: $animation-curve-default;
34 | transition-duration: $animation-duration-default;
35 |
36 | flex-wrap: nowrap;
37 | justify-content: flex-start;
38 | flex-shrink: 0;
39 | }
40 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/components/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import moment from 'moment';
8 |
9 | class App extends Component {
10 |
11 | constructor(props) {
12 | super(props);
13 | this.state = { time: null };
14 | }
15 |
16 | componentDidMount() {
17 | this.tick();
18 | this.interval = setInterval(this.tick.bind(this), 200);
19 | }
20 |
21 | componentWillUnmount() {
22 | clearInterval(this.interval);
23 | }
24 |
25 | tick() {
26 | this.setState({ time: new Date() });
27 | }
28 |
29 | render() {
30 | const time = this.state.time;
31 | const timeString = time && moment(time).format('h:mm:ss a');
32 | return (
33 | Sample Application
34 |Current date and time is {timeString}
35 |
34 |
37 | );
38 | }
39 |
40 | }
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/components/Layout/Layout.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | @import '../variables.scss';
7 |
8 | .root {
9 | position: relative;
10 | display: flex;
11 | width: 100%;
12 | height: 100%;
13 | overflow-x: hidden;
14 | overflow-y: auto;
15 | -webkit-overflow-scrolling: touch;
16 | flex-direction: column;
17 | }
18 |
19 | .header {
20 | z-index: 3;
21 | display: flex;
22 | width: 100%;
23 | min-height: 64px;
24 | max-height: 1000px;
25 | box-sizing: border-box;
26 | padding: 0;
27 | margin: 0;
28 | color: white;
29 | flex-direction: column;
30 | background: url(./header.jpg) center / cover;
31 | border: none;
32 | box-shadow: $shadow-2dp;
33 | transition-timing-function: $animation-curve-default;
34 | transition-duration: $animation-duration-default;
35 |
36 | flex-wrap: nowrap;
37 | justify-content: flex-start;
38 | flex-shrink: 0;
39 | }
40 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/components/Layout/Layout.scss:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | @import '../variables.scss';
7 |
8 | .root {
9 | position: relative;
10 | display: flex;
11 | width: 100%;
12 | height: 100%;
13 | overflow-x: hidden;
14 | overflow-y: auto;
15 | -webkit-overflow-scrolling: touch;
16 | flex-direction: column;
17 | }
18 |
19 | .header {
20 | z-index: 3;
21 | display: flex;
22 | width: 100%;
23 | min-height: 64px;
24 | max-height: 1000px;
25 | box-sizing: border-box;
26 | padding: 0;
27 | margin: 0;
28 | color: white;
29 | flex-direction: column;
30 | background: url(./header.jpg) center / cover;
31 | border: none;
32 | box-shadow: $shadow-2dp;
33 | transition-timing-function: $animation-curve-default;
34 | transition-duration: $animation-duration-default;
35 |
36 | flex-wrap: nowrap;
37 | justify-content: flex-start;
38 | flex-shrink: 0;
39 | }
40 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/components/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import moment from 'moment';
8 |
9 | class App extends Component {
10 |
11 | constructor(props) {
12 | super(props);
13 | this.state = { time: null };
14 | }
15 |
16 | componentDidMount() {
17 | this.tick();
18 | this.interval = setInterval(this.tick.bind(this), 200);
19 | }
20 |
21 | componentWillUnmount() {
22 | clearInterval(this.interval);
23 | }
24 |
25 | tick() {
26 | this.setState({ time: new Date() });
27 | }
28 |
29 | render() {
30 | const time = this.state.time;
31 | const timeString = time && moment(time).format('h:mm:ss a');
32 | return (
33 | Sample Application
35 |Current date and time is {timeString}
36 |
34 |
37 | );
38 | }
39 |
40 | }
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/Chapter 01/1-started/server.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2015 Konstantin Tarkus, Packt Publishing
4 | * All rights reserved.
5 | */
6 |
7 | import 'babel-core/register';
8 | import path from 'path';
9 | import express from 'express';
10 | import React from 'react';
11 | import ReactDOM from 'react-dom/server';
12 | import Html from './components/Html';
13 | import App from './components/App';
14 |
15 | const server = express();
16 | const port = process.env.PORT || 3000;
17 |
18 | server.use(express.static(path.join(__dirname, 'public')));
19 |
20 | server.get('*', (req, res) => {
21 | const body = ReactDOM.renderToString(Sample Application
35 |Current date and time is {timeString}
36 |
21 |
32 | );
33 | }
34 | }
35 |
36 | export default { path, action };
37 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/components/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import moment from 'moment';
8 |
9 | class App extends Component {
10 |
11 | constructor(props) {
12 | super(props);
13 | this.state = { time: null };
14 | }
15 |
16 | componentDidMount() {
17 | this.tick();
18 | this.interval = setInterval(this.tick.bind(this), 200);
19 | }
20 |
21 | componentWillUnmount() {
22 | clearInterval(this.interval);
23 | }
24 |
25 | tick() {
26 | this.setState({ time: new Date() });
27 | }
28 |
29 | render() {
30 | const time = this.state.time;
31 | const timeString = time && moment(time).format('h:mm:ss a');
32 | return (
33 | Popular things to rent
22 |
23 |
24 | Tools
25 |
26 |
27 | Books
28 |
29 | ...
30 |
31 |
34 |
37 | );
38 | }
39 |
40 | }
41 |
42 | export default App;
43 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/components/Html/Html.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React from 'react';
7 | import PropTypes from 'prop-types';
8 |
9 | function Html({ title, description, body }) {
10 | return (
11 |
12 |
13 |
14 |
15 | Sample Application
35 |Current date and time is {timeString}
36 |
21 |
32 | );
33 | }
34 | }
35 |
36 | export default { path, action };
37 |
--------------------------------------------------------------------------------
/Chapter 04/4-browsersync/routes/Home/Home.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import Layout from '../../components/Layout';
8 | import Hero from './Hero';
9 |
10 | const path = '/';
11 | const action = () => Popular things to rent
22 |
23 |
24 | Tools
25 |
26 |
27 | Books
28 |
29 | ...
30 |
31 |
21 |
32 | );
33 | }
34 | }
35 |
36 | export default { path, action };
37 |
--------------------------------------------------------------------------------
/Chapter 05/5-react-server/routes/Home/Home.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import Layout from '../../components/Layout';
8 | import Hero from './Hero';
9 |
10 | const path = '/';
11 | const action = () => Popular things to rent
22 |
23 |
24 | Tools
25 |
26 |
27 | Books
28 |
29 | ...
30 |
31 |
21 |
32 | );
33 | }
34 | }
35 |
36 | export default { path, action };
37 |
--------------------------------------------------------------------------------
/Chapter 06/6-graphql/components/LikeButton/LikeButton.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import React, { Component } from 'react';
7 | import PropTypes from 'prop-types';
8 |
9 | class LikeButton extends Component {
10 | static propTypes = {
11 | likes: PropTypes.number.isRequired,
12 | liked: PropTypes.bool.isRequired
13 | };
14 |
15 | state = { liked: this.props.liked };
16 |
17 | handleClick = (event) => {
18 | event.preventDefault();
19 | this.setState({ liked: !this.state.liked });
20 | };
21 |
22 | render() {
23 | const { likes, ...other } = this.props;
24 | const color = this.state.liked ? 'inherit' : 'grey';
25 | const count = likes + (this.state.liked ? 1 : 0);
26 |
27 | return (
28 |
31 | );
32 | }
33 | }
34 |
35 | export default LikeButton;
36 |
--------------------------------------------------------------------------------
/Chapter 01/1-started/components/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2015 Konstantin Tarkus, Packt Publishing
4 | * All rights reserved.
5 | */
6 |
7 | import React, { Component } from 'react';
8 | import moment from 'moment';
9 |
10 | class App extends Component {
11 |
12 | constructor(props) {
13 | super(props);
14 | this.state = { time: null };
15 | }
16 |
17 | componentDidMount() {
18 | this.tick();
19 | this.interval = setInterval(this.tick.bind(this), 200);
20 | }
21 |
22 | componentWillUnmount() {
23 | clearInterval(this.interval);
24 | }
25 |
26 | tick() {
27 | this.setState({ time: new Date() });
28 | }
29 |
30 | render() {
31 | const time = this.state.time;
32 | const timeString = time && moment(time).format('h:mm:ss a');
33 | return (
34 | Popular things to rent
22 |
23 |
24 | Tools
25 |
26 |
27 | Books
28 |
29 | ...
30 |
31 |
35 |
38 | );
39 | }
40 |
41 | }
42 |
43 | export default App;
44 |
--------------------------------------------------------------------------------
/Chapter 02/2-react/server.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Learning Isomorphic Web Application Development
3 | * Copyright © 2016 Konstantin Tarkus, Packt Publishing
4 | */
5 |
6 | import 'babel-core/register';
7 | import path from 'path';
8 | import express from 'express';
9 | import React from 'react';
10 | import ReactDOM from 'react-dom/server';
11 | import Router from './core/Router';
12 | import Html from './components/Html/Html';
13 |
14 | const server = express();
15 | const port = process.env.PORT || 3000;
16 |
17 | server.use(express.static(path.join(__dirname, 'public')));
18 |
19 | server.get('*', (req, res) => {
20 | const component = Router.match(req);
21 | const body = ReactDOM.renderToString(component);
22 | const html = ReactDOM.renderToStaticMarkup(Sample Application
36 |Current date and time is {timeString}
37 |