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 --init

  Use 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

```