React.js environment for development


Prepare docker container for development

Prepare docker container for development


React

$ npm install --save-dev eslint-config-react-app eslint-plugin-react
$ npm install --save-dev eslint-plugin-jsx-a11y
$ npm install --save-dev eslint-plugin-flowtype
$ npm install --save-dev babel-eslint


vscode

{
  "editor.fontSize": 26,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "terminal.integrated.fontSize": 26,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 10000,
  "gitlens.advanced.messages": {
    "suppressShowKeyBindingsNotice": true
  },
  "diffEditor.ignoreTrimWhitespace": false,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.requireConfig": true,
  "prettier.disableLanguages": ["js"]
}


.eslintrc

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "rules": {
    "no-extra-semi": "error",
    "semi": [2, "always"],
    "arrow-parens": [2, "always"]
  }
}


.eslintignore


/node_modules/


package.json

"lint": "./node_modules/.bin/eslint **/*.js",
"start": "npm run lint & nodemon server.js"


Prettier

$ npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier


package.json

"format": "prettier --write src/**/*.{js,jsx,css,json}",
"format:check": "prettier --list-different src/**/*.{js,jsx,css,json}"


.prettierrc

{ "arrowParens": "always" }


.prettierignore

node_modules
*.test.js
*.spec.js


Babel

$ npm install --save-dev babel-eslint babel-core babel-preset-env babel-plugin-transform-class-properties


.babelrc


{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions"]
        }
      }
    ]
  ],
  "plugins": ["transform-class-properties"]
}


.eslintrc

{
  
  "parser": "babel-eslint",
  
}


taken it here:


https://btholt.github.io/complete-intro-to-react-v4/async-and-events-in-react



Create simple react project manually

$ cd /project/
$ npm init -y

$ npm install --save react react-dom
$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

$ npm install --save-dev webpack webpack-dev-server


Babel config file


# echo '{ "presets": ["es2015", "react"] }' > .babelrc



$ mkdir -p public
$ mkdir -p src


$ vi public/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <title></title>
    </head>

    <body>

        <div id="root"></div>

        <script src="bundle.js"></script>

    </body>

</html>
    


$ vi src/App.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import ReactDOM from 'react-dom';

function App(){
return (

<div>
<h1>React</h1>
</div>
);
}

ReactDOM.render(<App />, document.getElementById('root'));


$ vi webpack.config.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var webpack = require('webpack');
const path = require('path');

module.exports = {

    entry: './src/App.jsx',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },

    devtool: 'eval-source-map',

    resolve: {
        EXTENSIONS: ['', '.js', '.jsx']
    }

};


$ vi package.json


1
2
3
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --port 8080 --inline --content-base ./public"
},


$ npm run start

http://localhost/