Revision history [back]

You can utilize the export default function to construct buttons in React version 16 by creating a Button component and exporting it as the default export. Here's an example:

import React from 'react';

const Button = (props) => {
  const { onClick, text } = props;

  return (
    <button onClick={onClick}>{text}</button>
  );
}

export default Button;

In this example, the Button component accepts two props: onClick and text. It renders a button with the provided text and attaches the onClick event handler.

Now, in your main file, you can import the Button component and use it like this:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button';

ReactDOM.render(
  <Button onClick={() => console.log('Button clicked!')} text="Click me!" />,
  document.getElementById('root')
);

This will render the Button component with the text "Click me!" and attach a click event handler that logs "Button clicked!" to the console.