https://github.com/the-road-to-learn-react/react-alternative-class-component-syntax

An alternative/future way of React Class Component with Class Field Declarations
https://github.com/the-road-to-learn-react/react-alternative-class-component-syntax

class-properties es6-classes javascript-class react reactjs

Last synced: 6 months ago
JSON representation

An alternative/future way of React Class Component with Class Field Declarations

• Host: GitHub
• URL: https://github.com/the-road-to-learn-react/react-alternative-class-component-syntax
• Owner: the-road-to-learn-react
• Created: 2018-02-05T13:25:01.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-06-12T08:31:38.000Z (over 5 years ago)
• Last Synced: 2025-07-21T22:09:33.399Z (7 months ago)
• Topics: class-properties, es6-classes, javascript-class, react, reactjs
• Language: JavaScript
• Homepage: https://roadtoreact.com
• Size: 719 KB
• Stars: 60
• Watchers: 4
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
# react-alternative-class-component-syntax

[![Build Status](https://travis-ci.org/the-road-to-learn-react/react-alternative-class-component-syntax.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/react-alternative-class-component-syntax) [![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/the-road-to-learn-react/react-alternative-class-component-syntax.svg)](https://greenkeeper.io/)

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.

```

class Counter extends Component {

  state = { value: 0 };

  handleIncrement = () => {

    this.setState(prevState => ({

      value: prevState.value + 1

    }));

  };

  handleDecrement = () => {

    this.setState(prevState => ({

      value: prevState.value - 1

    }));

  };

  render() {

    return (

      


        {this.state.value}


        +

        -

      

    )

  }

}

```


## Installation

* `git clone git@github.com:the-road-to-learn-react/react-alternative-class-component-syntax.git`

* cd react-alternative-class-component-syntax

* npm install

* npm start

* visit `http://localhost:8080`