search

mschwarzmueller / reactjs-basics

Source Code of my ReactJS Basics Series on YouTube (https://www.youtube.com/playlist?list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS)
MIT License
237 stars 269 forks source link

Solution for 2018: Webpack 4 and package.json #25

Open martinandersen3d opened 6 years ago

martinandersen3d commented 6 years ago

Video 1/2/3: https://www.youtube.com/watch?v=G40iHC-h0c0&list=PL55RiY5tL51oyA8euSROLjMFZbXaV7skS&index=4

This works in 2018, webpack 4:

webpack.config.js

const webpack = require('webpack');

module.exports = {
entry: './src/app/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'
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
],
devServer: {
    contentBase: './dist',
    hot: true
}
};

package.json


  {
    "name": "minimal-react-webpack-babel-setup",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --config ./webpack.config.js --mode development",
      "test": "echo \"No test specified\" && exit 0"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
      "babel-preset-env": "^1.7.0",
      "react": "^16.4.1",
      "react-dom": "^16.4.1"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "react-hot-loader": "^4.3.3",
      "webpack": "^4.15.1",
      "webpack-cli": "^3.0.8",
      "webpack-dev-server": "^3.1.4"
    }
  }

dist/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My React App</title>
</head>

<body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
</body>
</html>

npm start See: http://localhost:8080/

This is inspiration from: github.com/rwieruch/minimal-react-webpack-babel-setup

martinandersen3d commented 6 years ago

Video 5 - PropTypes Notes:

https://reactjs.org/docs/typechecking-with-proptypes.html

Note: React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. We provide a codemod script to automate the conversion.

https://www.npmjs.com/package/prop-types

npm install --save prop-types

import PropTypes from 'prop-types'; // ES6

var PropTypes = require('prop-types'); // ES5 with npm

example:

    Home.propTypes = {
        age: PropTypes.number,
        user: PropTypes.object
    };