React-Router - Video#2

The below code base is a supporting article for my youtube reactjs series. Link.
My plan for creating the entire video series is listed at the end of this article.

Webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.svg$/i,
        use: [{loader: 'file-loader', options: {esModule: false}}],
      },
    ],
  },
};

App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import Home from './components/Home';
import Users from './components/Users';

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/home">Home</Link>
            </li>

            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>
      </div>

      <Switch>
        <Route path="/home" component={Home}></Route>
        <Route path="/users" component={Users}></Route>
      </Switch>
    </Router>
  );
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

I am planning to create a video tutorial series for ReactJs. Would you be interested ?? Please comment and let me know.

Following would be the plan

• Create a basic app with webpack babel. (Done) Link
• Add routing and get a simple react page ready.(Done) Link
• Adding Sass for css
• UseFetch Hooks
• Call jsonplaceholder API in the application.
• Input form Validations in react application.
• Firebase application for CRUD.
• Tomcat deployment for ReactJs.
• Advance Topics....

Subscribe my channel to watch the videos :-)