Commit fef4d7e

committed

init

0 parents commit fef4d7eCopy full SHA for fef4d7e

File tree

+7570

-0

lines changed

+7570

-0

lines changed

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+node_modules/`

Lines changed: 10 additions & 0 deletions

Lines changed: 42 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,42 @@`
	`1`	`+# react-alternative-class-component-syntax`
	`2`	`+`
	`3`	`+[![Build Status](https://travis-ci.org/rwieruch/react-alternative-class-component-syntax-setup.svg?branch=master)](https://travis-ci.org/rwieruch/react-alternative-class-component-syntax-setup)`
	`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`	`+ <div>`
	`26`	`+ {this.state.value}`
	`27`	`+`
	`28`	`+ <button onClick={this.handleIncrement}>+</button>`
	`29`	`+ <button onClick={this.handleDecrement}>-</button>`
	`30`	`+ </div>`
	`31`	`+ )`
	`32`	`+ }`
	`33`	`+}`
	`34`	+```
	`35`	`+`
	`36`	`+## Installation`
	`37`	`+`
	`38`	+* `git clone git@github.com:rwieruch/react-alternative-class-component-syntax-setup.git`
	`39`	`+* cd react-alternative-class-component-syntax-setup`
	`40`	`+* npm install`
	`41`	`+* npm start`
	`42`	+* visit `http://localhost:8080`

Lines changed: 10 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,10 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html>`
	`3`	`+ <head>`
	`4`	`+ <title>The Minimal React Webpack Babel Setup</title>`
	`5`	`+ </head>`
	`6`	`+ <body>`
	`7`	`+ <div id="app"></div>`
	`8`	`+ <script src="bundle.js"></script>`
	`9`	`+ </body>`
	`10`	`+</html>`

Comments

(0)