Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 50be715

Browse files
Example source code for Universal JavaScript with React, Node, and Redux [Video]
0 parents commit 50be715

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1404
-0
lines changed

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Build
2+
build
3+
4+
# Dependency directories
5+
node_modules

‎01_introduction/README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Concepts of Universal JavaScript
2+
In this section we define Universal JavaScript, understand why it is important, look at different categories of it and use abstractions to achieve it.
3+
4+
# Nomenclature
5+
* __Universal JavaScript__ is JavaScript code that is environment-agnostic and runs "universally" with no modifications to the code or the environment.
6+
* __Isomorphic JavaScript__ is JavaScript code that is "shimmed" for each environment and only runs in different environments if the environment itself is modified or an abstraction is created to hide the differences.
7+
8+
## Environment-agnostic code
9+
<img src="https://github.com/maximenajim/Universal-JavaScript-with-React-Node-and-Redux/blob/master/images/01_printlocations.png"/>
10+
11+
## Environment-specific code
12+
<img src="https://github.com/maximenajim/Universal-JavaScript-with-React-Node-and-Redux/blob/master/images/01_printlocations_env_specific.png"/>
13+
14+
# Sample Universal JavaScript Code
15+
```javascript
16+
const printLocations = function (response) {
17+
const randomUsers = JSON.parse(response).results;
18+
const locations = randomUsers.map(({location}) => `${location.street}, ${location.city}, ${location.state}`);
19+
console.log(locations.join("\n"));
20+
};
21+
22+
if (typeof window !== 'undefined') {
23+
const request = new XMLHttpRequest();
24+
request.open('GET', 'https://randomuser.me/api/?results=10&inc=name,location&nat=us');
25+
request.onload = () => printLocations(request.response);
26+
request.send()
27+
} else {
28+
const request = require('request');
29+
request('http://api.randomuser.me/?nat=US&results=10',
30+
function (error, response, body) {
31+
printLocations(body);
32+
}
33+
);
34+
}
35+
```
36+
*Run Code*
37+
```
38+
$ node -v
39+
v6.11.0
40+
$ node isomorphic-printlocation.js
41+
```
42+
43+
## Other Sample Code
44+
* set-cookie (https://github.com/spikebrehm/set-cookie)
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const printLocations = function (response) {
2+
const randomUsers = JSON.parse(response).results;
3+
const locations = randomUsers.map(({location}) => `${location.street}, ${location.city}, ${location.state}`);
4+
console.log(locations.join("\n"));
5+
};
6+
7+
if (typeof window !== 'undefined') {
8+
const request = new XMLHttpRequest();
9+
request.open('GET', 'https://randomuser.me/api/?results=10&inc=name,location&nat=us');
10+
request.onload = () => printLocations(request.response);
11+
request.send()
12+
} else {
13+
const request = require('request');
14+
request('http://api.randomuser.me/?nat=US&results=10',
15+
function (error, response, body) {
16+
printLocations(body);
17+
}
18+
);
19+
}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const printLocations = function (response) {
2+
const randomUsers = JSON.parse(response).results;
3+
const locations = randomUsers.map(({location}) => `${location.street}, ${location.city}, ${location.state} ${location.postcode}`);
4+
console.log(locations.join("\n"));
5+
};

‎02_node_npm/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Setting Up an Universal JavaScript App Development Environment
2+
In this section we review Node.js and NPM, the node package manager. We also setup a basic application and install dependencies, then configure Babel and Webpack to build and run a simple javascript application.
3+
4+
# Basics
5+
Here are a few basic examples of using Node.js and NPM.
6+
7+
## Hello World with Node.js
8+
9+
__Interactive Shell__
10+
```
11+
$ node
12+
> console.log('Hello World');
13+
Hello World
14+
```
15+
__Executing JavaScript file__
16+
```
17+
$ echo "console.log('Hello World');" > hello.js
18+
$ node hello.js
19+
Hello World
20+
```
21+
22+
## Basic HTTP Server
23+
__Plain Node__
24+
```
25+
$ node basic_web_server.js
26+
Server running on port 8080.
27+
```
28+
__with Express__
29+
```
30+
$ npm install express
31+
$ node static_file_server.js
32+
Server running on port 8080.
33+
```
34+
# HelloWorld Application
35+
```
36+
$ cd helloworld-example
37+
$ npm install
38+
$ npm run build
39+
$ npm run start
40+
Server running on port 3000.
41+
```

‎02_node_npm/basic_web_server.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
var http = require('http');
2+
3+
http.createServer(function (req, res) {
4+
res.writeHead(200, {'Content-Type': 'text/plain'});
5+
res.end('Hello World\n');
6+
}).listen(8080);
7+
8+
console.log('Server running on port 8080.');
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { Component } from 'react';
2+
3+
class App extends Component {
4+
render() {
5+
return (
6+
<h1>Hello World!</h1>
7+
);
8+
}
9+
}
10+
11+
export default App;
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(
6+
<App />,
7+
document.getElementById('container')
8+
);
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "my-helloworld-app",
3+
"version": "0.1.0",
4+
"dependencies": {
5+
"express": "^4.15.2",
6+
"react": "^15.4.2",
7+
"react-dom": "^15.4.2"
8+
},
9+
"devDependencies": {
10+
"babel-core": "^6.24.0",
11+
"babel-loader": "^6.4.1",
12+
"babel-preset-es2015": "^6.24.0",
13+
"babel-preset-react": "^6.23.0",
14+
"webpack": "^2.3.2"
15+
},
16+
"scripts": {
17+
"start": "node server/index.js",
18+
"build": "webpack --config webpack.config.js"
19+
},
20+
"babel": {
21+
"presets": [
22+
"es2015",
23+
"react"
24+
]
25+
}
26+
}
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const express = require('express');
2+
const fs = require('fs');
3+
const template = require('./template');
4+
5+
const server = express();
6+
server.use('/', express.static('build/client'));
7+
server.get('*', (req, res) => res
8+
.send(template));
9+
server.listen(3000, function () {
10+
console.log('Server running on port 3000.');
11+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /