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....
Top comments (0)