merlox · November 3, 2019 22:53
diff --git a/react.js b/react.js
 1. Learn to setup webpack.
 2. Learn to create react files.
 3. Setup package.json scripts.
 4. Setup a server.js server.
 5. Updating state, using effect and importing files.




 To learn react:

 1. Learn to setup webpack.

 npm init -y
 npm i -g yarn
 yarn add --dev @babel/core @babel/polyfill @babel/preset-react @babel/preset-env babel-loader style-loader css-loader html-webpack-plugin react react-dom webpack webpack-cli
 yarn add express body-parser

 Create dist/ src/

 const HTMLPlugin = require('html-webpack-plugin')
 const { join } = require('path')
 module.exports = {
  entry: [
    '@babel/polyfill',
    join(__dirname, 'src', 'App.js'),
  ],
  output: {
    path: join(__dirname, 'dist'),
    filename: 'build.js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/,
      query: {
        presets: ['@babel/preset-env', '@babel/preset-react'],
      }
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader'],
    }]
  },
  plugins: [
    new HTMLPlugin({
      title: 'My React application',
      template: join(__dirname, 'src', 'index.ejs'),
      hash: true,
    })
  ]
 }

 index.ejs
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
  <div id="root"></div>
 </body>
 </html>

 2. Learn to create react files.

 App.js
 import React from 'react'
 import { render } from 'react-dom'
 function App () {
  return (
    <div>The app has been setup</div>
  )
 }
 render(<App />, document.querySelector('#root'))


 3. Setup package.json scripts:
 "scripts": {
  "watch": "webpack -dw",
  "compile": "webpack -p",
  "start": "node server.js"
 },

 4. Setup a server.js server:
 const express = require('express')
 const bodyParser = require('body-parser')
 const { join } = require('path')
 const app = express()
 const port = 8000

 app.use(bodyParser.json())
 app.use(bodyParser.urlencoded({extended: true}))
 app.use((req, res, next) => {
  // Logger
  let time = new Date()
  console.log(`${req.method} to ${req.originalUrl} at ${time.getHours()}:${time.getMinutes()}}`)
  next()
 })

 // app.get('/build.js', (req, res) => {
 // 	res.sendFile(join(__dirname, 'dist', 'build.js'))
 // })
 app.use(express.static('dist'))
 app.listen(port, '0.0.0.0', (req, res) => {
  console.log('The server has been started')
 })


 5. Updating state, using effect and importing files.
 import React, { useState, useEffect } from 'react'

 export default ({ props }) => {
  const [value, setValue] = useState('')
  useEffect(() => {
    setValue('Empty')
  }, [])

  return (
    <div className="input-box">
      <input
        type="text"
        value={value}
        onChange={e => {
          setValue(e.target.value)
          props.onChange(e.target.value)
        }}
      />
      <p>Your input is: {value}</p>
    </div>
  )
 }
	1. Learn to setup webpack.
	2. Learn to create react files.
	3. Setup package.json scripts.
	4. Setup a server.js server.
	5. Updating state, using effect and importing files.




	To learn react:

	1. Learn to setup webpack.

	npm init -y
	npm i -g yarn
	yarn add --dev @babel/core @babel/polyfill @babel/preset-react @babel/preset-env babel-loader style-loader css-loader html-webpack-plugin react react-dom webpack webpack-cli
	yarn add express body-parser

	Create dist/ src/

	const HTMLPlugin = require('html-webpack-plugin')
	const { join } = require('path')
	module.exports = {
	entry: [
	'@babel/polyfill',
	join(__dirname, 'src', 'App.js'),
	],
	output: {
	path: join(__dirname, 'dist'),
	filename: 'build.js',
	},
	module: {
	rules: [{
	loader: 'babel-loader',
	test: /\.js$/,
	exclude: /node_modules/,
	query: {
	presets: ['@babel/preset-env', '@babel/preset-react'],
	}
	}, {
	test: /\.css$/,
	exclude: /node_modules/,
	use: ['style-loader', 'css-loader'],
	}]
	},
	plugins: [
	new HTMLPlugin({
	title: 'My React application',
	template: join(__dirname, 'src', 'index.ejs'),
	hash: true,
	})
	]
	}

	index.ejs
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>

	2. Learn to create react files.

	App.js
	import React from 'react'
	import { render } from 'react-dom'
	function App () {
	return (
	<div>The app has been setup</div>
	)
	}
	render(<App />, document.querySelector('#root'))


	3. Setup package.json scripts:
	"scripts": {
	"watch": "webpack -dw",
	"compile": "webpack -p",
	"start": "node server.js"
	},

	4. Setup a server.js server:
	const express = require('express')
	const bodyParser = require('body-parser')
	const { join } = require('path')
	const app = express()
	const port = 8000

	app.use(bodyParser.json())
	app.use(bodyParser.urlencoded({extended: true}))
	app.use((req, res, next) => {
	// Logger
	let time = new Date()
	console.log(`${req.method} to ${req.originalUrl} at ${time.getHours()}:${time.getMinutes()}}`)
	next()
	})

	// app.get('/build.js', (req, res) => {
	// res.sendFile(join(__dirname, 'dist', 'build.js'))
	// })
	app.use(express.static('dist'))
	app.listen(port, '0.0.0.0', (req, res) => {
	console.log('The server has been started')
	})


	5. Updating state, using effect and importing files.
	import React, { useState, useEffect } from 'react'

	export default ({ props }) => {
	const [value, setValue] = useState('')
	useEffect(() => {
	setValue('Empty')
	}, [])

	return (
	<div className="input-box">
	<input
	type="text"
	value={value}
	onChange={e => {
	setValue(e.target.value)
	props.onChange(e.target.value)
	}}
	/>
	<p>Your input is: {value}</p>
	</div>
	)
	}