fix hooks in server code, change descripton

Author: Kallenju

config/webpack.server.config.js

@@ -7,7 +7,7 @@ const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const { NODE_ENV } = process.env;
 
 module.exports = {
-  entry: path.resolve(__dirname, '../src/server/server.ts'),
+  entry: path.resolve(__dirname, '../src/server/server.tsx'),
 
   output: {
     path: path.resolve(__dirname, '../dist/server'),

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "template-for-react-ts-ssr-hmr",
-  "version": "1.0.0",
-  "description": "Template for a project with React, TypeScript, SSR, HMR",
+  "version": "1.0.1",
+  "description": "Template for a project with React, TypeScript, SSR, HMR. Template imply using CSS Modules and Stylus. But it can be easily changed.",
   "repository": {
     "type": "git",
     "url": "https://github.com/Kallenju/template-for-react-ts-ssr-hmr.git"

package.json

@@ -1,5 +1,6 @@
 import express from 'express';
-import ReactDOM from 'react-dom/server';
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import Header from '../shared/Header';
 import indexTemplate from './indexTemplate';
 
@@ -8,7 +9,7 @@ const app = express();
 app.use('/static', express.static('./dist/client'));
 
 app.get('/', (req, res) => {
-  res.send(indexTemplate(ReactDOM.renderToString(Header())));
+  res.send(indexTemplate(ReactDOMServer.renderToString(<Header />)));
 });
 
 app.listen(3000);

src/server/server.ts renamed to src/server/server.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './header.module.styl';
 
 export default function Header(): React.ReactElement {
+  const [count, setCount] = useState(0);
+  function handleClick() {
+    setCount(count + 1);
+  }
   return (
     <header>
       <h1 className={styles.example}>Hello React</h1>
+      <button className={styles.example} onClick={handleClick}>
+        Clicked {count} times
+      </button>
     </header>
   );
 }