Primož Žnidar zprima

## app.js
function nextRandomKana() {
  const random = Math.floor(Math.random() * kana.length);
  const newKana = kana[random];

  document.getElementById('romaji').innerText = newKana.en;
  document.getElementById('h_tip').innerText = newKana.hiragana_info;
  document.getElementById('k_tip').innerText = newKana.katakana_info;
  document.getElementById('hiragana').innerText = newKana.hiragana;
  document.getElementById('katakana').innerText = newKana.katakana;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kana</title>

  <link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

## kana.js
const kana = [
  {
    "hiragana": "あ",
    "katakana": "ア",
    "en": "a",
    "hiragana_info": "apple",
    "katakana_info": "axe",
    "original_kana_eng": ""
  },
  {

## server.js
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('fs');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const httpsOptions = {

## index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div className="app">
    <h1>Hi from MyApp</h1>
  </div>
);

ReactDOM.render(<App />, document.getElementById('app'));

## index.html
<!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>MyApp</title>
</head>
<body>
  <div id="app"></div>

## .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

## webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './src/index.js', // default
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'

## packages install
// Webpack
npm i --save-dev webpack webpack-dev-server webpack-cli
npm i --save-dev copy-webpack-plugin
npm i --save-dev html-webpack-plugin

// Babel
npm i --save-dev @babel/core @babel/preset-env
npm i --save-dev babel-loader
npm i --save-dev @babel/preset-react

## medium_p9_c1
mkdir myapp
cd myapp
npm init -y

mkdir src
mkdir dist

touch src/index.html
touch src/index.js
touch webpack.config.js
	function nextRandomKana() {
	const random = Math.floor(Math.random() * kana.length);
	const newKana = kana[random];

	document.getElementById('romaji').innerText = newKana.en;
	document.getElementById('h_tip').innerText = newKana.hiragana_info;
	document.getElementById('k_tip').innerText = newKana.katakana_info;
	document.getElementById('hiragana').innerText = newKana.hiragana;
	document.getElementById('katakana').innerText = newKana.katakana;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kana</title>

	<link href="https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	</head>
	const kana = [
	{
	"hiragana": "あ",
	"katakana": "ア",
	"en": "a",
	"hiragana_info": "apple",
	"katakana_info": "axe",
	"original_kana_eng": ""
	},
	{
	const { createServer } = require('https');
	const { parse } = require('url');
	const next = require('next');
	const fs = require('fs');

	const dev = process.env.NODE_ENV !== 'production';
	const app = next({ dev });
	const handle = app.getRequestHandler();

	const httpsOptions = {
	import React from 'react';
	import ReactDOM from 'react-dom';

	const App = () => (
	<div className="app">
	<h1>Hi from MyApp</h1>
	</div>
	);

	ReactDOM.render(<App />, document.getElementById('app'));
	const webpack = require('webpack');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const CopyPlugin = require('copy-webpack-plugin');
	const path = require('path');

	module.exports = {
	entry: './src/index.js', // default
	output: {
	path: path.resolve(__dirname, 'dist'),
	filename: 'bundle.js'
	// Webpack
	npm i --save-dev webpack webpack-dev-server webpack-cli
	npm i --save-dev copy-webpack-plugin
	npm i --save-dev html-webpack-plugin

	// Babel
	npm i --save-dev @babel/core @babel/preset-env
	npm i --save-dev babel-loader
	npm i --save-dev @babel/preset-react
	mkdir myapp
	cd myapp
	npm init -y

	mkdir src
	mkdir dist

	touch src/index.html
	touch src/index.js
	touch webpack.config.js