antosan

Next isn't React.

Yes, this is correct. Next.js and React are different things. But from the grand scheme of things, these two are more similar than they are different. Next.js is a React meta-framework which means it's built on top of React. It's not a replacement for React. It's a framework that makes it easier to build React applications. So instead of saying "Next isn't React", we should say "Next isn't just React". It is all that is React plus additional features and optimizations.

And you won't get better performance if you use it the way you use React.

React was used to build client-side rendered (CSR) applications or single-page applications (SPA). I say "was" because the React team no longer recommends this anymore and they recommend using a framework instead (Next.js in this case). The reason for this is that CSR applications are slow to l

antosan

ECMAScript Modules (ESM)

• You should write modular JavaScript code.
• A modular application is composed of separate independent, interchangeable pieces of functionality stored in modules.
• A module is just a single JavaScript file.

Before 2015

• JS had no built-in support for modules (no import/export).
• Community-developed module systems were available, but they were not standardized.

antosan

const fs = require('fs');
const util = require('util');
const readFile = util.promisify(fs.readFile);

const getRowColumnSeatId = (boardingPassSeatNo) => {
  const rowData = boardingPassSeatNo.substring(0, 7).split('');
  const columnData = boardingPassSeatNo.substring(7).split('');
  const row = rowData.reduce(
    ({ start, end }, cur) => {
      const middle = Math.floor((start + end) / 2);

antosan

Folder Structure

Motivations

• Clear feature ownership
• Module usage predictibility (refactoring, maintainence, you know what's shared, what's not, prevents accidental regressions, avoids huge directories of not-actually-reusable modules, etc)

antosan

import React from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends React.Component {
    render() {
        return (
            <div className="app">
                <header className="app-header">
                    <img src={logo} className="app-logo" alt="logo" />

antosan

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/build/"
    },
    module: {

antosan

.app {
    text-align: center;
}

.app-header {
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
}

antosan

import React from "react";
import "./App.css";

class App extends React.Component {
    render() {
        return (
            <div className="app">
                <header className="app-header">
                    <h1 className="app-title">Welcome to React</h1>
                </header>

antosan

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";
import "./index.css";

ReactDOM.render(<App />, document.getElementById("root"));

antosan

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}