https://github.com/seonhyungjo/react-simple-server
:package: Basic wepack-dev-setting repo for making simple project
https://github.com/seonhyungjo/react-simple-server
babel react webpack-dev-server
Last synced: 3 months ago
JSON representation
:package: Basic wepack-dev-setting repo for making simple project
- Host: GitHub
- URL: https://github.com/seonhyungjo/react-simple-server
- Owner: SeonHyungJo
- License: mit
- Created: 2019-02-13T00:10:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:44:51.000Z (over 2 years ago)
- Last Synced: 2025-03-15T22:09:17.023Z (3 months ago)
- Topics: babel, react, webpack-dev-server
- Language: JavaScript
- Homepage:
- Size: 1.18 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-simple-server
Create very very Simple react repo for making library
## :zap: Start Server
```
npm run dev
```## :zap: Setting List
- .editorconfig
- eslint
- eslint-prettier
- webpack.config.js
- vscode / settings.json
- React, ReactDom## .editorconfig
Create `.editorconfig` file and setting this.
```js
root = true[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
```If you cooperate with other people. It is requied.
## eslint
As you know, `eslint` is pluggable linting utility for JavaScript and JSX
I use `eslint --init`
```
npx eslint --initUse a popular style guide // choose
Standard // choose
JSON // choose
Yes // choose
// And Download Dependencies and Create eslint file
```> npx is a very cool way to run Node code, and provides many useful features
We should use React, ReacDom, React-Hook
Add eslint-plugin-react
```js
{
"extends": ["standard", "plugin:react/recommended"],
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
}
}
```Create `.eslintignore` file
```
node_modules
public*.config.js
```## webpack.config.js
```js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},// You have to add this option
// none, development, production
mode: 'development',devServer: {
inline: true, //Hot Module
port: 3000,
contentBase: __dirname + '/public/'
},// We can use ES6
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
]
}
};
```## React, ReactDom
```
npm i react react-dom
```