Install ReactJS on Windows with Webpack
I’m planning a big React web development course. In this video I cover how to set everything up on Windows 10 including : Node, HomeBrew, React, Express, Popper.js, JQuery, Bootstrap, MongoDB, WebPack, Babel and the directory layout for my upcoming tutorials.I attached links to everything I already have tutorials on.
All of the code used follows the video below. I showed how to Install ReactJS for MacOS and Linux here.
It is becoming extremely hard to cover my costs because of Ad Blockers. I only use one 5 second skippable ad in my videos. Please consider not using Ad Blockers so that I can continue making free tutorials.
Files for this Video
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
————— index.html ————— <!DOCTYPE html> <html> <head> <title>React Tutorial</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html> ————— index.js ————— import React from 'react'; import ReactDOM from ‘react-dom'; // Create a React element assign a name, any attributes // and a child element like the text Hello World var hW1 = React.createElement('h3', null, 'Hello World') var hW2 = React.createElement('h3', null, 'Nice to Meet You') // You can add child elements to another element var div1 = React.createElement('div', null, hW1, hW2); // Render element in the browser // You can only render 1 element at a time ReactDOM.render( div1, document.getElementById('app') ) ————— package.json ————— { "name": "react-tut", "version": "1.0.0", "description": "React Tutorial", "main": "index.js", "scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development" }, "author": "Derek Banas", "license": "ISC", "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, "dependencies": { "bootstrap": "^4.3.1", "express": "^4.16.4", "jquery": "^1.9.1", "mongodb": "^3.2.2", "popper.js": "^1.14.7", "react": "^16.8.6" }, "devDependencies": { "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1" } } ————— webpack.config.js ————— module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] } ] }, resolve: { extensions: ['*', '.js', '.jsx'] }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } }; |
Leave a Reply