├── .babelrc
├── src
├── App.css
├── index.js
└── App.js
├── public
└── index.html
├── README.md
├── package.json
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/env", "@babel/preset-react"]
3 | }
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | margin: 1rem;
3 | font-family: Arial, Helvetica, sans-serif;
4 | }
5 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import App from "./App.js";
4 | ReactDOM.render(, document.getElementById("root"));
5 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 | import { hot } from "react-hot-loader";
3 | import "./App.css";
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
9 |
Hello, World!
10 |
11 | );
12 | }
13 | }
14 |
15 | export default hot(module)(App);
16 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | React Starter
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # creating-a-react-app-from-scratch
2 |
3 | This is a simple react implementation, as seen in [this article](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658)
4 |
5 | ## Getting Started
6 |
7 | _(Note: this project was created in Node v9.3.0)_
8 |
9 | Clone this repo and install dependencies with `npm install`.
10 |
11 | ### Starting The Dev Server
12 |
13 | To start the server and start hacking, run
14 |
15 | ```BASH
16 | npm start
17 | ```
18 |
19 | This starter uses webpack-dev-server to spin up an Express server with Hot-Reloading capability. Changes to code in `.src` should cause pages to reload.
20 |
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-react-app-from-scratch",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --mode development"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "@babel/cli": "^7.1.0",
14 | "@babel/core": "^7.1.0",
15 | "@babel/preset-env": "^7.1.0",
16 | "@babel/preset-react": "^7.0.0",
17 | "babel-loader": "^8.0.2",
18 | "css-loader": "^1.0.0",
19 | "style-loader": "^0.23.0",
20 | "webpack": "^4.41.2",
21 | "webpack-cli": "^3.1.1",
22 | "webpack-dev-server": "^3.9.0"
23 | },
24 | "dependencies": {
25 | "react": "^16.5.2",
26 | "react-dom": "^16.5.2",
27 | "react-hot-loader": "^4.3.11"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const webpack = require("webpack");
3 |
4 | module.exports = {
5 | entry: "./src/index.js",
6 | mode: "development",
7 | module: {
8 | rules: [
9 | {
10 | test: /\.(js|jsx)$/,
11 | exclude: /(node_modules|bower_components)/,
12 | loader: "babel-loader",
13 | options: { presets: ["@babel/env"] }
14 | },
15 | {
16 | test: /\.css$/,
17 | use: ["style-loader", "css-loader"]
18 | }
19 | ]
20 | },
21 | resolve: { extensions: ["*", ".js", ".jsx"] },
22 | output: {
23 | path: path.resolve(__dirname, "dist/"),
24 | publicPath: "/dist/",
25 | filename: "bundle.js"
26 | },
27 | devServer: {
28 | contentBase: path.join(__dirname, "public/"),
29 | port: 3000,
30 | publicPath: "http://localhost:3000/dist/",
31 | hotOnly: true
32 | },
33 | plugins: [new webpack.HotModuleReplacementPlugin()]
34 | };
35 |
--------------------------------------------------------------------------------