Dev x Appwrite Hackathon: #2 UI with ReactJs & TailWindCSS
Tags: appwritehack, react, tailwindcss, javascript
Published: 2022-04-20 17:44:31

Welcome back 👋

If you've checked out part 1 of this series [here](https://dev.to/georgeisiguzo/devspaceforum-x-appwrite-part-1-introduction-1lda), you probably must have visited the GitHub repository.

Notice any changes?

I have added the code for a simple UI. Just a welcome page.

See it here below:

![DevSpace Forum Welcome Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jx44jzs8nljxu31s80b.png)

How did I do so?

## Here's a summary of how I did it

### #1 Create a new React Project

See this link [here](https://reactjs.org/docs/create-a-new-react-app.html) on how to create a new react project.

It's pretty straightforward.

### #2 Add Tailwind CSS to your React Project

See this link [here](https://tailwindcss.com/docs/guides/create-react-app) for quick steps to add tailwindcss to your app.

By now, when you run `npm start`, you should see something like this:

![Successfully add tailwindcss to reactjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/218bv6ea85esjtvnq2wb.png)

Hoping you did it properly and you've got no bugs, let's continue.

### #3 Creating files, adding contents

Before you proceed, I hope you know the following:

1. [How to import components in react](https://www.google.com/url?sa=t&source=web&rct=j&url=https://create-react-app.dev/docs/importing-a-component/&ved=2ahUKEwiBpNmWl6P3AhVCzBoKHR9nAfIQFnoECAQQAQ&usg=AOvVaw3JVa4lgUtkysXCgn5-pESu)

2. [How to split your react code into components for better readability](https://www.google.com/url?sa=t&source=web&rct=j&url=https://blog.logrocket.com/code-splitting-in-react-an-overview/&ved=2ahUKEwi2n9Hgl6P3AhVJqxoKHen3BY8QFnoECBkQAQ&usg=AOvVaw3GRrhXBF4PadEuPgSKmBB_)

Create a new folder inside the `src` folder, call it `Components`.

If you've built an app with ReactJs before, I'm sure you know ReactJs is all about creating components and reusing them. Hence the need to have a folder where all the components of our app should be.

Inside `Components`, create two files: `Welcome.js` and `Toggler.js`.

The `Welcome.js` components will hold the UI for the welcome page while `Toggler.js` handles state logic.

Toggler.js:
```
import React, {Component} from "react"

class Toggler extends Component {
    
    state = {
        on: this.props.defaultOnValue
    }
    
    static defaultProps = {
        defaultOnValue: false
    }
    
    toggle = () => {
        this.setState(prevState => ({on: !prevState.on}))
    }
    
    render() {
        return (
            <div>
                {this.props.children({
                    on: this.state.on, 
                    toggle: this.toggle
                })}
            </div>
        )
    }
}

export default Toggler
```
`Toggler.js` is a bit advanced ReactJs concept. It is a component that uses render props to pass state to another component.

[See info on render props](https://reactjs.org/docs/render-props.html)

To explain in simple terms, any component passed into `Toggler.js` as its child will have access to its `on` state and `toggle` method.

`Welcome.js`:

```
import React, { useState } from "react"
import Header from "./WelcomeComponents/Header"
import Main from "./WelcomeComponents/Content"
import Footer from "./SubComponents/Footer"

export default function Welcome() {
    /**
     * This welcome component will show for unauthenticated users
     */

    // this show modal state will determine welcome component UI behaviour when the modals in the <Header/> is active
    const [showModal, setShowModal] = useState(false)

    const showModalHandler = () => {
        setShowModal(prevState => !prevState)
    }

    return (
        // Add overflow-hidden to the welcome component UI when modal in <Header/> is active
        <div className={`${showModal ? "overflow-y-hidden h-screen" : " "} app-style`}>
            <Header showModalHandler={showModalHandler}/>
            <Main />
            <Footer />
        </div>
    )
}

```

In other not to make our `Welcome.js` too long, I created sub-components for a `Header`, `Main` and `Footer` section of the welcome page.

I placed these in two new folders inside the components directory. See the image below:

![code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tswdjig6j9ino6395aj.png)

You can see the [github repo here](https://github.com/Mr-Georgie/Dev-Space-Forum) to properly view the code structure.

### #4 How to use Tailwind CSS

Lastly, about Tailwind CSS.

Tailwind CSS gives you the freedom to specify how you want any part of your UI to look using utility classes.

To create mobile-first responsive designs, tailwind gives us 3 utilities: `sm:`, `md:`, `lg:` and `xl:`

These are prefixes that represent small screens, medium screens, large screens, and extra-large screens.

They are called prefixes because you put them just before other utility classes to specify on what screen that utility class should work e.g `md:border` means that on medium screens, there should be a border on that element.

In my app, the banner section of the welcome page contains two columns: a text and an image-side by side to each other (scroll up to see screenshot)

To create this, here's my code.

First for the row that will hold the two columns:
```
<div className="grid grid-col-1 px-16
                lg:grid-cols-12 
                xl:gap-10 xl:my-10 xl:px-24">
</div>
```
On mobile screens, I specified that the columns appear in a `grid`, each column should occupy full width `grid-col-1` and there should be padding both left and right `px-16`.

For large screens (desktop), I divided the columns into 12 `grid-cols-12`. I will have to share the 12 columns between the two contents in the row. I'll give the text 7 columns:
```
<div className="lg:col-span-7">Welcome to DevSpace Forum</div>
```

While the image 5 columns:
```
<img src="..." alt="..." className="lg:col-span-5" />
```

This means the text will occupy more space than the image

Then on extra-large screens, I specified the gap between the two contents as 10 `gap-10`, margin-top and bottom as 10 `my-10`, padding-left and right as 24 `px-24`. 

Okay. Hopefully, you get the gist now but you don't, no worries.

I will be writing a separate article focused on tailwind CSS.

For now, I will be integrating my react app (i.e DevSpace forum) with appwrite (backend).

I'm glad I don't have to write codes for the backend.

Appwrite console has everything I need.

Stay tuned for the next article in this series.

Bye! 👋