Include a react-geo component

Now that we have react-geo installed, we can use it's components in the my-app application. For demonstration purposes we'll now add a simple button to the application.

Please open a text editor (if not already done) and open the file App.js from the src directory of your my-app application. Now import the SimpleButton class with the following statement:

import {
  SimpleButton
} from '@terrestris/react-geo';

The style definitions of react-geo and antd need to be imported as well:

import 'antd/dist/antd.min.css';
import './react-geo.css';

If the react-geo.css file is not yet located in the src directory please paste it from here.

info Please note that we are importing css files with the ES6 import here. This needs a properly configured css-loader. create-react-app includes this.

Now make use of the imported class by integrating it to the render method inside the App div (e.g. within the <p>-element):

<SimpleButton>
  Hello world!
</SimpleButton>

Save the file, open the application in your browser. You should see the changes directly, otherwise reopen http://localhost:3000. A blue button labelled with the text Hello world will be rendered.

Congratulations! You just created a complete React application including your first react-geo component with a few commands! We will now enhance the button to alert once it has been clicked by implementing a onClick callback function:

<SimpleButton
  onClick={() => {alert('Hello World!');}}
>
  Hello world!
</SimpleButton>

Save the changes and test the results by clicking on the button. You should now see a simple alert message with a Hello World! message.

We can also replace the text of the button with an icon. Simply remove the Hello world text and add the icon property with the value "bars" to the component.

<SimpleButton
  onClick={() => {alert('Hello World!');}}
  iconName="bars"
/>

Voilá! You added a nice menu button to your app!

Your final solution should look like the following snippet:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import 'antd/dist/antd.min.css';
import './react-geo.css';

import {
  SimpleButton
} from '@terrestris/react-geo';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <SimpleButton
          onClick={() => {alert('Hello World!');}}
          iconName="bars"
        />
      </header>
    </div>
  );
}

export default App;