Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tbhatti/my-app
React app with web-pack, less css
https://github.com/tbhatti/my-app
babel less webpack
Last synced: about 3 hours ago
JSON representation
React app with web-pack, less css
- Host: GitHub
- URL: https://github.com/tbhatti/my-app
- Owner: tbhatti
- Created: 2020-04-01T03:42:50.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T18:13:36.000Z (about 2 years ago)
- Last Synced: 2024-11-25T20:12:12.879Z (2 months ago)
- Topics: babel, less, webpack
- Language: JavaScript
- Homepage:
- Size: 11 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactApp
This project is created without using create-react-app
## Steps to create my-app from terminal
```bash
mkdir my-app
cd my-app
npm init -y
npm install react react-dom
mkdir app
create index.js index.css inside app directory
```
## Copy following code into my-app\app\index.js
```python
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
Hello World
)
}
}
ReactDOM.render(, document.getElementById('app'))
```
So when you try to run this code in the browser it will give an error as the our code is written in JSX and browser does not understand it.
So this is the point where Babel and Webpack comes into play.
To install all required dependency for these two run following command from your terminal.
```bash
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
```
### Webpack configurations
Create webpack.config.js at root folder and paste following code into it
```python
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './app/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
filename: 'index_bundle.js'
},
module : {
rules : [
{test : /\.(js)$/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'app/index.html'
})
]
}
```
### In conjuction with out babel-loader works we have to add babel preset config to our package.json file
```python
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
}
```
### To run the build we have to add webpack to our script tag in our package.json
```python
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"create": "webpack"
},
```
So when i run npm run create from terminal it will run the webpack which will create the dist folder and our bundle file with index.html file.
It's hassle to run webpack every time. So you can start a webpack dev server. so it will start build your code as soon as you run it. modify your script in package.json with following.
```python
"scripts": {
"start": "webpack-dev-server --open"
}
```
Now when you run npm run start it will start the dev server and open your app in the browser.
# Use Less in the project
You need to do following changes to use less instead of simple CSS
```python
npm i less-loader
```
## Update webpack.config.js as follow
```python
{test : /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader' }
]
}
```
## Add styles.less inside app folder
Add path for styles.less in index.js as follow
import './styles.less';