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
————— 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'
}
};