├── .github
└── FUNDING.yml
├── .gitignore
├── .travis.yml
├── README.md
├── dist
└── index.html
├── package-lock.json
├── package.json
├── src
├── Counter.js
└── index.js
└── webpack.config.js
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: rwieruch
4 | patreon: # rwieruch
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with a single custom sponsorship URL
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 |
3 | node_js:
4 | - stable
5 |
6 | install:
7 | - npm install
8 |
9 | script:
10 | - npm test
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-alternative-class-component-syntax
2 |
3 | [](https://travis-ci.org/the-road-to-learn-react/react-alternative-class-component-syntax) [](https://slack-the-road-to-learn-react.wieruch.com/) [](https://greenkeeper.io/)
4 |
5 | React Class Components can be made much more concise using the *class field declarations*. You can initialize local state without using the constructor and declare class methods by using arrow functions without the extra need to bind them.
6 |
7 | ```
8 | class Counter extends Component {
9 | state = { value: 0 };
10 |
11 | handleIncrement = () => {
12 | this.setState(prevState => ({
13 | value: prevState.value + 1
14 | }));
15 | };
16 |
17 | handleDecrement = () => {
18 | this.setState(prevState => ({
19 | value: prevState.value - 1
20 | }));
21 | };
22 |
23 | render() {
24 | return (
25 |
26 | {this.state.value}
27 |
28 |
29 |
30 |
31 | )
32 | }
33 | }
34 | ```
35 |
36 | ## Installation
37 |
38 | * `git clone git@github.com:the-road-to-learn-react/react-alternative-class-component-syntax.git`
39 | * cd react-alternative-class-component-syntax
40 | * npm install
41 | * npm start
42 | * visit `http://localhost:8080`
43 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | The Minimal React Webpack Babel Setup
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "minimal-react-webpack-babel-setup",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --progress --colors --config ./webpack.config.js",
8 | "test": "echo \"No test specified\" && exit 0"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "babel": {
14 | "presets": [
15 | "env",
16 | "react",
17 | "stage-2"
18 | ]
19 | },
20 | "devDependencies": {
21 | "babel-core": "^6.23.1",
22 | "babel-loader": "^8.0.4",
23 | "babel-preset-react": "^6.23.0",
24 | "babel-preset-stage-2": "^6.22.0",
25 | "react-hot-loader": "^4.3.11",
26 | "webpack": "^4.22.0",
27 | "webpack-dev-server": "^3.1.10"
28 | },
29 | "dependencies": {
30 | "babel-preset-env": "^1.6.1",
31 | "react": "^16.2.0",
32 | "react-dom": "^16.2.0"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/Counter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class Counter extends Component {
4 | state = { value: 0 };
5 |
6 | handleIncrement = () => {
7 | this.setState(prevState => ({
8 | value: prevState.value + 1
9 | }));
10 | };
11 |
12 | handleDecrement = () => {
13 | this.setState(prevState => ({
14 | value: prevState.value - 1
15 | }));
16 | };
17 |
18 | render() {
19 | return (
20 |
21 | {this.state.value}
22 |
23 |
24 |
25 |
26 | )
27 | }
28 | }
29 |
30 | export default Counter;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import Counter from './Counter';
5 |
6 | ReactDOM.render(
7 | ,
8 | document.getElementById('app')
9 | );
10 |
11 | module.hot.accept();
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 |
3 | module.exports = {
4 | entry: [
5 | 'react-hot-loader/patch',
6 | './src/index.js'
7 | ],
8 | module: {
9 | rules: [
10 | {
11 | test: /\.(js|jsx)$/,
12 | exclude: /node_modules/,
13 | use: ['babel-loader']
14 | }
15 | ]
16 | },
17 | resolve: {
18 | extensions: ['*', '.js', '.jsx']
19 | },
20 | output: {
21 | path: __dirname + '/dist',
22 | publicPath: '/',
23 | filename: 'bundle.js'
24 | },
25 | plugins: [
26 | new webpack.HotModuleReplacementPlugin()
27 | ],
28 | devServer: {
29 | contentBase: './dist',
30 | hot: true
31 | }
32 | };
--------------------------------------------------------------------------------