OtayNacef

import React, { useState, useEffect } from "react";
const LEFT_PAGE = "LEFT";
const RIGHT_PAGE = "RIGHT";
const range = (from, to, step = 1) => {
  let i = from;
  const range = [];

  while (i <= to) {
    range.push(i);
    i += step;

OtayNacef

import { ChangeEvent, FC, useState } from "react";
import data from "./data.json";
import styled from "styled-components";
import { FaArrowDown } from "@react-icons/all-files/fa/FaArrowDown";

import {
  AutoCompleteContainer,
  AutoCompleteIcon,
  Input,
  AutoCompleteItem,

OtayNacef

import react, { ChangeEvent, FC, useState } from "react";
import styled from "styled-components";
import { FaArrowDown } from "@react-icons/all-files/fa/FaArrowDown";

import {
  AutoCompleteContainer,
  AutoCompleteIcon,
  Input,
  AutoCompleteItem,
  AutoCompleteItemButton

OtayNacef

import { Response, Request, NextFunction } from 'express';

import * as redis from 'redis';

const portRedis = process.env.PORT_REDIS || '6379';

const redisClient = redis.createClient(portRedis);

const isCached = (req: Request, res: Response, next: NextFunction) => {
  const { idUser } = req.params;

OtayNacef

import React from 'react'

const App = () => {
  return (
    <h1>
     Create React App Without CRA ☘️
    </h1>
  )
}

OtayNacef

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";
ReactDOM.render(<App />, document.getElementById("app"));
// hot reloading. It works by replacing a module of the application 
// during runtime with an updated one so that it’s available for instant use.
module.hot.accept();

OtayNacef

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,

OtayNacef

{
  "name": "react-without-cra",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development --port 3000"
  },
  "keywords": [],
  "author": "",

OtayNacef

{
    "compilerOptions": {
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "node",

OtayNacef

import path from "path";
import { Configuration, DefinePlugin } from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";

const webpackConfig = (): Configuration => ({
  entry: "./src/index.tsx",
  ...(process.env.production || !process.env.development
    ? {}