Michael J. Stokes | Learning React ES6: Events, Attributes, and Data Mining


Today’s lesson was about creating listening events using special attributes and data mining for JSX. I have created buttons to click, for increment and decrement. It all started with creating arrow functions using const addOne= () => { count++;}, then creating html buttons <button>+1</button>. That’s not all! The buttons must have the onClick attribute and the way it has to be done in JSX is <button onClick="{addone}"> +1 </button>. Also we need to declare a variable to ignite the increment let count = 0;. That’s all we need to make the increment work, but it doesn’t end there!

There’s data mining in React, and how does that work? We have to render the JSX code to the screen by doing the following below:

let count = 0;
const addOne = () => {
	count++;
	renderCounterApp(); 
}


const appRoot = document.getElementById('app');


const renderCounterApp = () => {
	const templateTwo = (

	<div>
		<h1>Count: {count} </h1>
		<button onClick={addOne}> +1 </button>
	</div>

	);

ReactDOM.render(templateTwo, appRoot);


};

renderCounterApp();

The live increment will start to happen and that’s how data mining is done in React as well as creating event listeners using special html attributes.



No Comments Yet

You can be the first to comment!


Leave a Comment






Previous Post : « | Next Post : »