If you haven’t completed part 1 of this tutorial, do so before starting part 2. Now that we’ve set up our using create-react-app, we can start writing some . Open your project into your editor of choice, and let’s start removing some of the boilerplate that create-react-app adds for you, since we won’t need it. project code Step 1: Remove create-react-app boilerplate When you go into your file, it will look something like this: App.js Go ahead and delete all of the code from and and replace it with the code below: App.js App.css React, { Component } 'react' './App.css' import from import App Component {render () { (<div className='button__container'><button className='button'>Click Me</button></div>)}} class extends return App export default You can also add this code to your file. App.css .button__container {margin-top: 200_px_;text-align: center;} .button {background-color:green;border: none;color: white;font-size: 16_px_;height: 40_px_;width: 200_px_;} You can also delete the file, since we won’t be using it. Now, when you run in your terminal, you should see this in your browser: logo.svg npm start Step 2: Wire up the handleClick function Our next step will be set up a function that is triggered when a user clicks the button. We’ll start by adding an event to our button, like this: onClick <button className='button' onClick={ .handleClick}>Click Me</button> this When the button is clicked, we will call a function called that is bound to . Let’s go ahead and bind to . First, we’ll need to create a function in our component. Then, we’ll bind to inside of it. handleClick this handleClick this constructor handleClick this constructor () {super() this.handleClick = this.handleClick.bind(this)} Now, our file should look like this: React, { Component } 'react' './App.css' import from import App Component { () { () class extends constructor super _this_.handleClick = _this_.handleClick.bind(_this_) } render () { (<div className='button__container'><button className='button' onClick={ .handleClick}>Click Me</button></div>)}} return this App export default Finally, we’ll need to define our function. Let’s start by making sure that everything is wired up correctly, by having the button ‘Success!’ when the button is clicked. handleClick console.log handleClick () {console.log('Success!')} Here’s what your code should look like now: React, { Component } 'react' './App.css' import from import App Component { () { () class extends constructor super _this_.handleClick = _this_.handleClick.bind(_this_) } handleClick () {console.log('Success!')} render () { (<div className='button__container'><button className='button' onClick={ .handleClick}>Click Me</button></div>)}} return this App export default You should see this in your browser after clicking the button: Make sure that when you click the button, you see ‘Success!’ appear in your console. If you do, it means that you’ve correctly wired up your function to the button, and you’re all set to move on to of this tutorial. handleChange part 3

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Tutorial: How to make HTTP Requests in React, Part 2

Too Long; Didn't Read

Company Mentioned

Mae Capozzi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Tutorial: How to make HTTP Requests in React, Part 2

Too Long; Didn't Read

Company Mentioned

Mae Capozzi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES