Georgie

Posted on Apr 20, 2022 • Updated on May 8, 2022

Dev x Appwrite Hackathon: #2 UI with ReactJs & TailWindCSS

#appwritehack #react #tailwindcss #javascript

Welcome back 👋

If you've checked out part 1 of this series here, 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:

How did I do so?

Here's a summary of how I did it

#1 Create a new React Project

See this link here on how to create a new react project.

It's pretty straightforward.

#2 Add Tailwind CSS to your React Project

See this link here for quick steps to add tailwindcss to your app.

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

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:

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

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:

You can see the github repo here 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! 👋