How to create a React/Grommet TypeScript application

Create a react application project called cards:

npx create-react-app cards --template typescript

Install the grommet packages and dependencies:

cd cards
npm install grommet grommet-icons styled-components@5.3.11 --save

Or, if yarn is installed:

cd cards
yarn add grommet grommet-icons styled-components@5.3.11 --save

Delete files App.css, App.test.tsx, logo.svg from the src folder.

rm src/App.css src/App.test.tsx src/logo.svg

If you are using Grommet Designer, just replace the content of App.tsx and try your application with npm start or yarn start.

Otherwise, remove the corresponding imports in App.tsx.

Optionally, delete also files index.css, reportWebVitals.ts from the src folder.

rm src/index.css src/reportWebVitals.ts

And remove the corresponding imports in index.tsx.

Your App.tsx file should look like this:

import React from 'react';
function App() {
    return (
        <div className="App">
        </div>
    );
}
export default App;

And your index.tsx file should look like this:

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

ReactDOM.render(<App />, document.getElementById('root'));

Try your application with npm start or yarn start.

Change the content of App.tsx with:

import React from 'react';
import { Grommet } from 'grommet'
function App() {
    return (
        <Grommet className="App">
        </Grommet>
    );
}
export default App;

Add some text content:

import React from 'react';
import { Grommet } from 'grommet'
function App() {
    return (
        <Grommet className="App">
        Hello world!
        </Grommet>
    );
}
export default App;

Add a Heading.

import React from 'react';
import { Grommet, Heading } from 'grommet'
function App() {
    return (
        <Grommet className="App">
            <Heading level='1'>Hello world!</Heading>
        </Grommet>
    );
}
export default App;

Add the grommet theme:

import React from 'react';
import { Grommet, grommet, Heading } from 'grommet'
function App() {
    return (
        <Grommet className="App" theme={grommet}>
            <Heading level='1'>Hello world!</Heading>
        </Grommet>
    );
}
export default App;

Replace by the following:

import React from 'react';
import { Grommet, grommet, Box, Button } from 'grommet'
function App() {
    return (
        <Grommet theme={grommet}>
            <Box align="center">
                <Button
                    label="hello world"
                    primary
                    onClick={() => alert('hello, world')}
                />
            </Box>
        </Grommet>
    );
}
export default App;