├── dist
└── .keep
├── .gitignore
├── babel.config.js
├── src
├── index.js
├── components
│ └── App.js
└── server
│ └── server.js
├── webpack.config.js
├── .eslintrc.js
└── package.json
/dist/.keep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/main.js
3 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@babel/preset-env', '@babel/preset-react'],
3 | };
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import App from './components/App';
5 |
6 | ReactDOM.hydrate(
7 | ,
8 | document.getElementById('mountNode'),
9 | );
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | module: {
3 | rules: [
4 | {
5 | test: /\.js$/,
6 | exclude: /node_modules/,
7 | use: {
8 | loader: 'babel-loader',
9 | },
10 | },
11 | ],
12 | },
13 | };
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 |
3 | export default function App () {
4 | const [count, setCount] = useState(0);
5 | return (
6 |
7 | This is a sample stateful and
8 | server-side rendered React application.
9 |
10 | Here is a button that will track how many times you click it:
11 |
12 |
15 |
16 | );
17 | }
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: 'babel-eslint',
3 | env: {
4 | browser: true,
5 | commonjs: true,
6 | es6: true,
7 | node: true,
8 | jest: true,
9 | },
10 | extends: ['eslint:recommended', 'plugin:react/recommended'],
11 | parserOptions: {
12 | ecmaFeatures: {
13 | jsx: true,
14 | },
15 | sourceType: 'module',
16 | },
17 | plugins: ['react'],
18 | rules: {
19 | 'react/prop-types': ['off']
20 | },
21 | };
--------------------------------------------------------------------------------
/src/server/server.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import React from 'react';
3 | import ReactDOMServer from 'react-dom/server';
4 | import App from '../components/App';
5 |
6 | const server = express();
7 | server.use(express.static('dist'));
8 |
9 | server.get('/', (req, res) => {
10 | const initialMarkup = ReactDOMServer.renderToString();
11 |
12 | res.send(`
13 |
14 |
15 | Sample React App
16 |
17 |
18 | ${initialMarkup}
19 |
20 |
21 |
22 | `)
23 | });
24 |
25 | server.listen(4242, () => console.log('Server is running...'));
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fulljs",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev-server": "nodemon --exec babel-node src/server/server.js --ignore dist/",
8 | "dev-bundle": "webpack -wd"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "@babel/core": "7.2.2",
15 | "@babel/node": "7.2.2",
16 | "@babel/preset-env": "7.3.1",
17 | "@babel/preset-react": "7.0.0",
18 | "babel-loader": "8.0.5",
19 | "express": "4.16.4",
20 | "react": "16.8.1",
21 | "react-dom": "16.8.1",
22 | "webpack": "4.29.3",
23 | "webpack-cli": "3.2.3"
24 | },
25 | "devDependencies": {
26 | "babel-eslint": "10.0.1",
27 | "eslint": "5.13.0",
28 | "eslint-plugin-react": "7.12.4",
29 | "nodemon": "1.18.10"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------