React Setup MacOS | New Think Tank

I’m planning a big React web development course. In this video I cover how to set everything up on MacOS 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. If enough people want me to do the same for Windows leave a request in the comments and I’ll make it.

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": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

————— 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 Cancel reply