Skip to content

Commit 7cbf617

Browse files
fxnoobfxnoob
authored
Merge pull request #2 from fxnoob/refactor
refactor.
2 parents 389e3dc + c76baf4 commit 7cbf617

File tree

19 files changed

+5312
-12573
lines changed

19 files changed

+5312
-12573
lines changed

‎.babelrc‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
{
2-
"presets": [ "@babel/preset-env" , "minify" , "@babel/preset-typescript" ]
3-
}
2+
"presets": [
3+
"@babel/preset-env",
4+
"@babel/preset-react"
5+
],
6+
"plugins": [
7+
"@babel/plugin-proposal-class-properties" ,
8+
"@babel/plugin-syntax-class-properties",
9+
"@babel/plugin-syntax-dynamic-import"
10+
]
11+
}

‎.cirrus.yml‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎.travis.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
language: node_js
2+
3+
node_js:
4+
- stable
5+
6+
install:
7+
- npm install
8+
9+
script:
10+
- npm test

‎README.md‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
# A Chrome extension boilerplate.
2-
3-
## Basic Usage
4-
5-
```
6-
npm install
7-
npm run build
8-
```
9-
10-
## features:
11-
> 1. Support for ES7 ( with Babel and polyfill)
12-
> 2. popup page with reactjs and material ui framework
13-
> 3. Content script with reactjs and material ui framework
14-
> 4. Bundling (webpack)
15-
16-
## directory structure
17-
> * `src/` is root directory for a chrome extension. it includes `manifest.json` file and other static stuff.
18-
19-
> * `src/background.js` is main background js file for the chrome extension.
20-
21-
> * `popup-page` is the directory which includes react js setup for popup page.
22-
23-
> * `content-scripts` is the directory directory which includes react js setup for content script.
24-
25-
> * `src/utils` is the directory for utilities that can be written in es6,es7 or es8...
26-
27-
## How to extend ?
28-
29-
> * Write chrome extension's background scripts code in `src/background.js`
30-
31-
> * Write chrome extension's popup page codes in `popup-page` Reactjs directory system.
32-
33-
> * Write chrome extension's content scripts codes in `content-scripts` Reactjs directory system.
1+
# minimal-react-webpack-babel-setup
2+
3+
[![Build Status](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup.svg?branch=master)](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/minimal-react-webpack-babel-setup.svg)](https://greenkeeper.io/)
4+
5+
Read how to set it up yourself: [React with Webpack Tutorial](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/).
6+
7+
[![Edit minimal-react-webpack-babel-setup](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rwieruch/minimal-react-webpack-babel-setup/tree/master/?fontsize=14)
8+
9+
## Features
10+
11+
* React 16
12+
* Webpack 4
13+
* Babel 7
14+
* Hot Module Replacement
15+
16+
## DIY Add-Ons
17+
18+
* [ESLint](https://www.robinwieruch.de/react-eslint-webpack-babel/)
19+
* [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/)
20+
* [Fonts Support](https://www.robinwieruch.de/webpack-font/)
21+
* [Images Support](https://www.robinwieruch.de/webpack-images/)
22+
23+
## Alternatives
24+
25+
* [Advanced React Webpack Babel Setup](https://github.com/rwieruch/advanced-react-webpack-babel-setup)
26+
27+
## Installation
28+
29+
* `git clone git@github.com:rwieruch/minimal-react-webpack-babel-setup.git`
30+
* cd minimal-react-webpack-babel-setup
31+
* npm install
32+
* npm start
33+
* visit `http://localhost:8080/`

‎content-scripts/components/index.jsx‎

100644100755
File mode changed.

‎option-page/App.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import Index from './components/'
4+
5+
const Element = document.createElement("div");
6+
Element.setAttribute("id" , "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
7+
document.body.appendChild(Element);
8+
ReactDOM.render(<Index />, document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf"));

‎option-page/components/index.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
export default class Index extends React.Component {
4+
constructor(props){
5+
super(props);
6+
}
7+
render() {
8+
return (
9+
<div></div>
10+
);
11+
}
12+
}

‎option-page/option.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
</style>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="option.bundle.js"></script>
10+
</body>
11+
</html>
12+

0 commit comments

Comments
 (0)