├── .DS_Store
├── .babelrc
├── .gitignore
├── README.md
├── index.js
├── package-lock.json
├── package.json
├── public
├── index.html
├── main.js
└── main.js.LICENSE.txt
├── src
└── App.js
└── webpack.config.js
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kannanagasamy/react-app-without-cra/ec3490b73742b37a743c47b6a2ef51e575e82f59/.DS_Store
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | /*
3 | a preset is a set of plugins used to support particular language features.
4 | The two presets Babel uses by default: es2015, react
5 | */
6 | "presets": [
7 | "@babel/preset-env", //compiling ES2015+ syntax
8 | "@babel/preset-react" //for react
9 | ],
10 | /*
11 | Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
12 | */
13 | "plugins": [
14 | "@babel/plugin-transform-runtime"
15 | ]
16 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-app-without-cra
2 | # Documentation about this can be found here - https://blog.bitsrc.io/create-react-app-without-create-react-app-b0a5806a92
3 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import reactDom from "react-dom";
3 | import App from "./src/App"
4 |
5 | reactDom.render(, document.getElementById("root"));
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "new-react-app",
3 | "version": "1.0.0",
4 | "description": "A new react app without CRA",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server .",
8 | "build": "webpack .",
9 | "test": "test"
10 | },
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "@babel/core": "^7.17.2",
15 | "@babel/plugin-transform-runtime": "^7.17.0",
16 | "@babel/preset-env": "^7.16.11",
17 | "@babel/preset-react": "^7.16.7",
18 | "@babel/runtime": "^7.17.2",
19 | "babel-eslint": "^10.1.0",
20 | "babel-loader": "^8.2.3",
21 | "eslint": "^8.9.0",
22 | "eslint-config-airbnb-base": "^15.0.0",
23 | "eslint-config-prettier": "^8.3.0",
24 | "eslint-plugin-jest": "^26.1.0",
25 | "webpack": "^5.68.0",
26 | "webpack-cli": "^4.9.2",
27 | "webpack-dev-server": "^4.7.4"
28 | },
29 | "dependencies": {
30 | "@babel/cli": "^7.17.0",
31 | "path": "^0.12.7",
32 | "react": "^17.0.2",
33 | "react-dom": "^17.0.2"
34 | }
35 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Webpack React
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/public/main.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /** @license React v0.20.2
8 | * scheduler.production.min.js
9 | *
10 | * Copyright (c) Facebook, Inc. and its affiliates.
11 | *
12 | * This source code is licensed under the MIT license found in the
13 | * LICENSE file in the root directory of this source tree.
14 | */
15 |
16 | /** @license React v17.0.2
17 | * react-dom.production.min.js
18 | *
19 | * Copyright (c) Facebook, Inc. and its affiliates.
20 | *
21 | * This source code is licensed under the MIT license found in the
22 | * LICENSE file in the root directory of this source tree.
23 | */
24 |
25 | /** @license React v17.0.2
26 | * react.production.min.js
27 | *
28 | * Copyright (c) Facebook, Inc. and its affiliates.
29 | *
30 | * This source code is licensed under the MIT license found in the
31 | * LICENSE file in the root directory of this source tree.
32 | */
33 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const App = () =>{
4 | return (
5 |
6 | Welcome to React App thats build using Webpack and Babel separately
7 |
8 | )
9 | }
10 |
11 | export default App
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 |
3 | /*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve.
4 | After that apply all the rules in module.rules and produce the output and place it in main.js in the public folder.*/
5 |
6 | module.exports={
7 | /** "mode"
8 | * the environment - development, production, none. tells webpack
9 | * to use its built-in optimizations accordingly. default is production
10 | */
11 | mode: "development",
12 | /** "entry"
13 | * the entry point
14 | */
15 | entry: "./index.js",
16 | output: {
17 | /** "path"
18 | * the folder path of the output file
19 | */
20 | path: path.resolve(__dirname, "public"),
21 | /** "filename"
22 | * the name of the output file
23 | */
24 | filename: "main.js"
25 | },
26 | /** "target"
27 | * setting "node" as target app (server side), and setting it as "web" is
28 | * for browser (client side). Default is "web"
29 | */
30 | target: "web",
31 | devServer: {
32 | /** "port"
33 | * port of dev server
34 | */
35 | port: "9500",
36 | /** "static"
37 | * This property tells Webpack what static file it should serve
38 | */
39 | static: ["./public"],
40 | /** "open"
41 | * opens the browser after server is successfully started
42 | */
43 | open: true,
44 | /** "hot"
45 | * enabling and disabling HMR. takes "true", "false" and "only".
46 | * "only" is used if enable Hot Module Replacement without page
47 | * refresh as a fallback in case of build failures
48 | */
49 | hot: true ,
50 | /** "liveReload"
51 | * disable live reload on the browser. "hot" must be set to false for this to work
52 | */
53 | liveReload: true
54 | },
55 | resolve: {
56 | /** "extensions"
57 | * If multiple files share the same name but have different extensions, webpack will
58 | * resolve the one with the extension listed first in the array and skip the rest.
59 | * This is what enables users to leave off the extension when importing
60 | */
61 | extensions: ['.js','.jsx','.json']
62 | },
63 | module:{
64 | /** "rules"
65 | * This says - "Hey webpack compiler, when you come across a path that resolves to a '.js or .jsx'
66 | * file inside of a require()/import statement, use the babel-loader to transform it before you
67 | * add it to the bundle. And in this process, kindly make sure to exclude node_modules folder from
68 | * being searched"
69 | */
70 | rules: [
71 | {
72 | test: /\.(js|jsx)$/, //kind of file extension this rule should look for and apply in test
73 | exclude: /node_modules/, //folder to be excluded
74 | use: 'babel-loader' //loader which we are going to use
75 | }
76 | ]
77 | }
78 | }
--------------------------------------------------------------------------------