React Setup - Revision history

Bacchas at 17:37, 15 February 2021

2021-02-15T17:37:55Z

@@ Line 1: / Line 1: @@
 * Install Node
 * React dev tools for Chrome (optional)
@@ Line 86: / Line 98: @@
    },
 </pre>

2021-02-10T22:27:36Z

← Older revision		Revision as of 22:27, 10 February 2021
Line 86:		Line 86:
	},		},
	</pre>		</pre>
			= Create a react app with all the dependency needed =
			''' This is the easy way to start a react project '''

	npx create-react-app my-app # this does not install it globally		npx create-react-app my-app # this does not install it globally

2021-02-10T21:54:53Z

← Older revision		Revision as of 21:54, 10 February 2021
Line 81:		Line 81:
	"scripts": {		"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",		"test": "echo \"Error: no test specified\" && exit 1",
	"start": "webpack~~-dev-server --open --hot --mode development~~",		"start": "webpack serve",
	"build": "webpack --mode production"		"build": "webpack --mode production"

2021-02-10T21:48:45Z

Setting up a react project

← Older revision		Revision as of 21:48, 10 February 2021
Line 5:		Line 5:
	npm install react react-dom		npm install react react-dom
	npm install @babel/core babel-loader @babel/preset-env @babel/preset-react		npm install @babel/core babel-loader @babel/preset-env @babel/preset-react
	npm install webpack ~~webpack-cli~~ webpack-dev-server		npm install --save-dev webpack webpack-dev-server webpack-cli

	'''code . # will open visual studio code in that directory''' <br />		'''code . # will open visual studio code in that directory''' <br />

2021-02-10T21:22:09Z

@@ Line 56: / Line 56: @@
+}
 </pre>
   npx create-react-app my-app # this does not install it globally
   cd my-app

2021-02-10T20:12:40Z

Edit the webpack.config.js file

2021-02-10T20:12:05Z

Edit the webpack.config.js file

← Older revision		Revision as of 20:12, 10 February 2021
Line 25:		Line 25:
	<pre>		<pre>
	const HtmlWebPackPlugin = require("html-webpack-plugin")		const HtmlWebPackPlugin = require("html-webpack-plugin")
	module.exports = {		module.exports = {
	module:{		module:{
	rules:[		rules:[
Line 43:		Line 43:
	]		]
	}		}

	]		]

	}		}
	}
			}
	</pre>		</pre>
	npx create-react-app my-app # this does not install it globally		npx create-react-app my-app # this does not install it globally

2021-02-10T19:34:39Z

← Older revision		Revision as of 19:34, 10 February 2021
Line 23:		Line 23:
	npm install html-loader html-webpack-plugin		npm install html-loader html-webpack-plugin
	=== Edit the webpack.config.js file ===		=== Edit the webpack.config.js file ===
			<pre>
	const HtmlWebPackPlugin = require("html-webpack-plugin")		const HtmlWebPackPlugin = require("html-webpack-plugin")
	module.exports = {		module.exports = {
Line 45:		Line 46:
	}		}
	}		}
			</pre>
	npx create-react-app my-app # this does not install it globally		npx create-react-app my-app # this does not install it globally
	cd my-app		cd my-app

2021-02-10T19:33:59Z

← Older revision		Revision as of 19:33, 10 February 2021
Line 42:		Line 42:
	]		]
	}		}

	]		]

	}		}

	}		}
	npx create-react-app my-app # this does not install it globally		npx create-react-app my-app # this does not install it globally

2021-02-10T19:33:17Z

@@ Line 20: / Line 20: @@
+  }
 <br />
   npx create-react-app my-app # this does not install it globally
   cd my-app