From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the React event system and register the click handler directly on the React

function Button(props) {
  return <button onClick={props.onClick}>Say Hello</button>;}

function HelloButton() {
  function handleClick() {    alert('Hello!');
  }
  return <Button onClick={handleClick} />;}

ReactDOM.render(
  <HelloButton />,
  document.getElementById('container')
);
…could be rewritten using a React component:

function Button() {
  return <button id="btn">Say Hello</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Hello!');
    });
  }
);
So the following jQuery implementation…

$('#container').html('<button id="btn">Say Hello</button>');
$('#btn').click(function() {
  alert('Hello!');
});

Recommend

Integrating with Other Libraries Integrating with Other View Libraries Replacing String-Based Rendering with React

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins Integrating with jQuery Chosen Plugin

React Integrating with Other Libraries Integrating with DOM Manipulation Plugins How to Approach the Problem

React Components and Props Props are Read-Only

React Components and Props Extracting Components

React Components and Props Composing Components

React Components and Props Rendering a Component

React Components and Props Function and Class Components

React Without ES6 Mixins

React Without ES6 Autobinding

React Without ES6 Setting the Initial State

React Without ES6 Declaring Default Props

React Without ES6

React Babel, JSX, and Build Steps How can I write comments in JSX?

React Styling and CSS How do I add CSS classes to components?

React JSX In Depth Children in JSX Booleans, Null, and Undefined Are Ignored

React JSX In Depth Children in JSX Functions as Children

React JSX In Depth Children in JSX JavaScript Expressions as Children

React JSX In Depth Children in JSX JSX Children

React JSX In Depth Children in JSX String Literals

React JSX In Depth Props in JSX Spread Attributes

React JSX In Depth Props in JSX Props Default to “True”

React JSX In Depth Props in JSX String Literals

React JSX In Depth Props in JSX JavaScript Expressions as Props

JSX In Depth Specifying The React Element Type Choosing the Type at Runtime

JSX In Depth Specifying The React Element Type User-Defined Components Must Be Capitalized

JSX In Depth Specifying The React Element Type Using Dot Notation for JSX Type

JSX In Depth Specifying The React Element Type React Must Be in Scope

React JSX In Depth

React Reconciliation The Diffing Algorithm Keys

React Reconciliation The Diffing Algorithm Recursing On Children

React Reconciliation The Diffing Algorithm DOM Elements Of The Same Type

React Reconciliation The Diffing Algorithm Elements Of Different Types

React Legacy Context How To Use Context Updating Context

React Legacy Context How To Use Context Referencing Context in Function Components

React Legacy Context How To Use Context Parent-Child Coupling

React Legacy Context How To Use Context

React How to Contribute Development Workflow

React Event Pooling

React Static Type Checking TypeScript Type Definitions

React Static Type Checking TypeScript Running TypeScript

React Static Type Checking TypeScript Configuring the TypeScript Compiler

React Static Type Checking TypeScript Adding TypeScript to a Project

Static Type Checking TypeScript Using TypeScript with Create React App

React Static Type Checking Flow Adding Flow Type Annotations

React Static Type Checking Flow Running Flow

React Static Type Checking Flow Stripping Flow Syntax from the Compiled Code Babel

React Static Type Checking Flow Adding Flow to a Project

Web Components Using React in your Web Components

Web Components Using Web Components in React