My first ReactJS app from scratch – LibreScript

ReactJS is a JavaScript library for developing user interfaces (UIs) which efficiently update when your data changes

ReactJS apps are very performant since ReactJS uses a virtual DOM which is a JavaScript object representing the regular DOM. The virtual DOM is much faster than the regular DOM

To install ReactJS on your computer open a command line and type:

$ npm install -g create-react-app

Proceed to create a new ReactJS project:

$ create-react-app myProject

Change to the directory where you just created your new ReactJS project and type:

$ cd myProject

$ npm start

to launch the developer server and open your localhost on port 3000 i.e. (http://localhost:3000)

Today we are going to write a small ReactJS app with a + and – button to add and to substract 1 to a counter:

import React, { Component } from 'react';

class Calculator extends Component { 
	constructor(props) { 
		super(props);
		this.state = { 
			count: 0
		}; 

	//ReactJS components don’t automatically bind this to the instance. We’ll have to explicitly use .bind(this) in the constructor
	this.minus = this.minus.bind(this);
	this.plus = this.plus.bind(this);

	} 
	minus() { 
		this.setState({ count: this.state.count - 1 });
	} 
	plus() { 
		this.setState({ count: this.state.count + 1 });
	}
	render() { 
		return ( 
      		<div>
			<h2>{ this.state.count }</h2>
			<button onClick={this.minus}>-</button>
			<button onClick={this.plus}>+</button>
      		</div>

		) 
	} 
} 

export default Calculator;

import React, { Component } from 'react';

class Calculator extends Component {

constructor(props) {

super(props);

this.state = {

count: 0

};

//ReactJS components don’t automatically bind this to the instance. We’ll have to explicitly use .bind(this) in the constructor

this.minus = this.minus.bind(this);

this.plus = this.plus.bind(this);

}

minus() {

this.setState({ count: this.state.count - 1 });

}

plus() {

this.setState({ count: this.state.count + 1 });

}

render() {

return (

<div>

<h2>{ this.state.count }</h2>

</div>

)

}

export default Calculator;

Leave a Reply Cancel Reply