https://github.com/tbhatti/status-management
Skelton
https://github.com/tbhatti/status-management
bable bootstrap4 less redux routers webpack
Last synced: 2 months ago
JSON representation
Skelton
- Host: GitHub
- URL: https://github.com/tbhatti/status-management
- Owner: tbhatti
- Created: 2020-08-07T00:41:54.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-10T00:51:30.000Z (almost 6 years ago)
- Last Synced: 2025-03-20T15:49:58.508Z (about 1 year ago)
- Topics: bable, bootstrap4, less, redux, routers, webpack
- Language: JavaScript
- Homepage:
- Size: 440 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Status management
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run create`
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
## `Setup webpack`
Create webpack.config.js at root folder and paste following contents for less, css etc.
```python
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './src/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : './public/index.html'
})
]
}
```
## `Setup bable`
Create babel.config.js at root folder and paste following contents
```python
module.exports = {
presets: [ "@babel/preset-env", "@babel/preset-react" ],
plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}
```
## `Setup Routs`
Install following two packages
```python
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0"
```
Then create routes.js file and have following contents in the file
```python
import App from '../App';
import Home from '../components/home';
import Contact from '../components/contact';
import About from '../components/about';
import React from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Header from '../components/header';
import Footer from '../components/footer';
function Routes() {
return (
)
}
export default Routes;
```
## `Setup Redux`
```python
npm i redux
npm i react-redux
npm i redux-thunk
```
### Create following folder structure
├── redux
│ ├── actions # All actions
│ ├── reducers # All reducers
│ └── types # All action types
│ └── store.js # Js file for store
└── ...
## `Setup Conditional routes`
Create a folder inside components
├── components
│ ├── auth
│ ├── index.js
└── ...
Paste the following contents to the file
```python
import React, { cloneElement, Children } from 'react'
import { Route, Redirect } from 'react-router-dom'
const PrivateRoute = ({ children, authed, ...rest }) =>
localStorage.getItem('name') === 'true' ?
{Children.map(children, child => cloneElement(child, { ...child.props }))}
:
}
/>
export default PrivateRoute
```
## `Setup Bootstrap`
```python
npm i bootstrap
```
In index.js add following lines
```python
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';
```