Skip to content

Commit 1876dea

Browse files
deepumandaldeepumandal
authored
tutorial updated
1 parent c9983b5 commit 1876dea

File tree

1 file changed

+111
-48
lines changed

1 file changed

+111
-48
lines changed

‎README.md‎

Lines changed: 111 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,62 @@
11
# react-webpack-configuration
22

3-
create a folder
4-
cd folder
5-
6-
cmd : npm init -y
7-
8-
cmd yarn add
9-
"@babel/core": "^7.22.5",
10-
"@babel/preset-env": "^7.22.5",
11-
"@babel/preset-react": "^7.22.5",
12-
"@babel/preset-typescript": "^7.22.5",
13-
"@emotion/react": "^11.11.1",
14-
"@types/react": "^18.2.13",
15-
"@types/react-dom": "^18.2.6",
16-
"babel-loader": "^9.1.2",
17-
"css-loader": "^6.8.1",
18-
"dotenv": "^16.3.1",
19-
"html-webpack-plugin": "^5.5.3",
20-
"process": "^0.11.10",
21-
"react": "^18.2.0",
22-
"react-dom": "^18.2.0",
23-
"style-loader": "^3.3.3",
24-
"ts-loader": "^9.4.3",
25-
"typescript": "^5.1.3",
26-
"webpack": "^5.88.0",
27-
"webpack-cli": "^5.1.4",
28-
"webpack-dev-server": "^4.15.1"
29-
30-
tsc --init
31-
32-
go to tsconfig.ts file and uncomment "jsx": "preserve",
33-
34-
create a src folder inside folder
35-
create index.html
36-
paste this code there
3+
This repository provides a basic setup for a React project using webpack.
4+
5+
## Installation
6+
7+
1. Create a new folder:
8+
9+
```bash
10+
npm install my-project
11+
cd my-project
12+
```
13+
14+
15+
2. Initialize a new npm project:
16+
```bash
17+
yarn init -y
18+
```
19+
20+
3. Install the dependencies using yarn or npm
21+
22+
```bash
23+
"@babel/core": "^7.22.5",
24+
"@babel/preset-env": "^7.22.5",
25+
"@babel/preset-react": "^7.22.5",
26+
"@babel/preset-typescript": "^7.22.5",
27+
"@types/react": "^18.2.13",
28+
"@types/react-dom": "^18.2.6",
29+
"babel-loader": "^9.1.2",
30+
"css-loader": "^6.8.1",
31+
"dotenv": "^16.3.1",
32+
"html-webpack-plugin": "^5.5.3",
33+
"process": "^0.11.10",
34+
"react": "^18.2.0",
35+
"react-dom": "^18.2.0",
36+
"style-loader": "^3.3.3",
37+
"ts-loader": "^9.4.3",
38+
"typescript": "^5.1.3",
39+
"webpack": "^5.88.0",
40+
"webpack-cli": "^5.1.4",
41+
"webpack-dev-server": "^4.15.1"
42+
```
43+
44+
45+
4. Generate a TypeScript configuration file:
46+
```bash
47+
tsc --init
48+
```
49+
50+
51+
5. Open the `tsconfig.json` file and uncomment the line
52+
```bash
53+
"jsx": "preserve"
54+
```
55+
56+
6. Create a new folder named `src` inside the my-project.
57+
58+
7. Create an `index.html` file inside the `src` folder and paste the following code:
59+
```html
3760
<!DOCTYPE html>
3861
<html lang="en">
3962
<head>
@@ -46,21 +69,23 @@ paste this code there
4669
<div id="root"></div>
4770
</body>
4871
</html>
72+
```
73+
74+
8. Create an ```index.css``` file inside the src folder.
4975

50-
create index.css file inside src
51-
create index.tsx file inside src and paste this code
76+
9. Create an ```index.tsx``` file inside the src folder and paste the following code:
77+
```html
5278
import React from "react";
5379
import ReactDOM from "react-dom";
5480
import App from "./App";
5581
import "./index.css";
5682

57-
ReactDOM.render(
58-
<App />,
59-
document.getElementById("root")
60-
);
83+
ReactDOM.render(<App />, document.getElementById("root"));
6184

85+
```
6286

63-
create App.tsx file and paste this code here
87+
10. Create an```App.tsx``` file inside the src folder and paste the following code:
88+
```html
6489
import React from 'react'
6590

6691
const App: React.FC = () => {
@@ -70,10 +95,11 @@ const App: React.FC = () => {
7095
}
7196

7297
export default App
98+
```
7399

100+
11. Create a webpack.config.js file in the main folder and paste the following code:
74101

75-
at the last create webpack config.js
76-
and paste this code there
102+
```html
77103
const path = require("path");
78104
const htmlWebpackPlugin = require("html-webpack-plugin");
79105
const webpack = require("webpack");
@@ -131,10 +157,47 @@ module.exports = {
131157
hot: true,
132158
},
133159
};
160+
```
161+
12. modify package.json
162+
``` html
163+
{
164+
"name": "my-project",
165+
"version": "1.0.0",
166+
"main": "index.js",
167+
"license": "MIT",
168+
"scripts": {
169+
"start": "webpack-dev-server --mode development --open --hot",
170+
"build": "webpack --mode production"
171+
},
172+
"dependencies": {
173+
"@babel/core": "^7.22.5",
174+
"@babel/preset-env": "^7.22.5",
175+
"@babel/preset-react": "^7.22.5",
176+
"@babel/preset-typescript": "^7.22.5",
177+
"@chakra-ui/react": "^2.7.1",
178+
"@emotion/styled": "^11.11.0",
179+
"@types/react": "^18.2.13",
180+
"@types/react-dom": "^18.2.6",
181+
"@types/react-router-dom": "^5.3.3",
182+
"babel-loader": "^9.1.2",
183+
"css-loader": "^6.8.1",
184+
"dotenv": "^16.3.1",
185+
"framer-motion": "^10.12.16",
186+
"html-webpack-plugin": "^5.5.3",
187+
"process": "^0.11.10",
188+
"react": "^18.2.0",
189+
"react-dom": "^18.2.0",
190+
"react-router-dom": "^6.13.0",
191+
"style-loader": "^3.3.3",
192+
"ts-loader": "^9.4.3",
193+
"typescript": "^5.1.3",
194+
"webpack": "^5.88.0",
195+
"webpack-cli": "^5.1.4",
196+
"webpack-dev-server": "^4.15.1"
197+
}
198+
}
199+
```
134200

201+
## Authors
135202

136-
137-
138-
139-
140-
203+
- [@deepumandal](https://www.github.com/deepumandal)

0 commit comments

Comments
 (0)