DevSpaceForum X AppWriteパート2 : REACTJSとTarWindCSSによるUI

歓迎する👋
あなたがこのシリーズのパート1をチェックアウトしたならば、あなたは多分GITUBリポジトリを訪問したにちがいありません.
任意の変更に注目?
私は、簡単なUIのコードを追加しました.ちょうど歓迎ページ.
下記の図を参照してください.

どうやってやったの?

私がそれをした方法の要約は、ここにあります

新しい反応プロジェクトを作成する

このリンクhere 新しい反応プロジェクトを作成する方法について.
それはかなりまっすぐ進む.

あなたの反応プロジェクトに

このリンクhere クイックステップあなたのアプリケーションにTarwindCSSを追加します.
現在、あなたが走るときnpm start , 次のようになります.

あなたが適切にそれをして、あなたがバグを持っていないことを望んで、続けましょう.

ファイルを作成する

進む前に、次のことをご存知ですか

How to import components in react

How to split your react code into components for better readability

新しいフォルダを作成するsrc フォルダ、呼び出しComponents .
あなたはreactjsを前にアプリをブットしている場合は、私はreactjs知っているすべてのコンポーネントを作成し、それらを再利用することを知っている.したがって、我々のアプリのすべてのコンポーネントが必要なフォルダーを持つ必要があります.
内部Components , つのファイルを作成しますWelcome.js and Toggler.js .
The Welcome.js コンポーネントは、ウェルカムページのUIを保持しますToggler.js ハンドルステートロジック.
トグル.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 ビット高度なreactjsコンセプトです.レンダリングプロップを使用して別のコンポーネントに状態を渡すコンポーネントです.
See info on render props
簡単な用語で説明するためにToggler.js それが子供であるので、そのon 状態とtoggle メソッド.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>
    )
}

我々のものを作らないためにWelcome.js あまりにも長い間、私はHeader , Main and Footer 歓迎ページのセクション.
私は、これらをコンポーネントディレクトリの中の2つの新しいフォルダに置きました.下記の画像を見てください.

あなたはgithub repo here コード構造を適切に表示するには

どのように風を使用する

最後に、風上CSSについて.
Cookwind CSSでは、UIの任意の部分をどのようにしてユーティリティクラスを使用するかを指定できます.
モバイル最初の応答設計を作成するには、Tailwindは3つのユーティリティを提供します.sm: , md: , lg: and xl:これらは接頭語と呼吸小スクリーン、媒体スクリーン、大きなスクリーンと余分の大きなスクリーンです.
他のユーティリティークラスの直前に、そのユーティリティクラスがどのような画面で動作するかを指定する前に、それらをプリフィックスと呼びますmd:border 小さな画面では、その要素に境界があることを意味します.
私のアプリでは、ウェルカムページのバナーセクションには、2つの列が含まれています.テキストと画像側の側には
これを作成するには、ここにコードがあります.
最初に、2つのカラムを保持する行を指定します.

<div className="grid grid-col-1 px-16
                lg:grid-cols-12 
                xl:gap-10 xl:my-10 xl:px-24">
</div>

モバイル画面では、カラムがgrid , 各列は完全な幅を占めるgrid-col-1 そして、左と右の両方をパディングする必要がありますpx-16 .
大きなスクリーン(デスクトップ)のために、私はコラムを12に分けましたgrid-cols-12 . 私は、列の2つの内容の間で12のコラムを共有しなければなりません.テキストを7列にします.

<div className="lg:col-span-7">Welcome to DevSpace Forum</div>

画像5列の間:

<img src="..." alt="..." className="lg:col-span-5" />

これは、テキストがイメージより多くのスペースを占めることを意味します
その後、余分な大画面で、私は2つのコンテンツ間のギャップを10として指定しましたgap-10 , マージントップ10my-10 , 24として左と右のパディングpx-24 .
わかりました.うまくいけば、あなたは今GISTを得るが、あなたは心配しないでください.
私は、風変わりなCSSに集中したSeperate記事を書いています.
今のところ私はAppWrite(バックエンド)と私の反応アプリ(I . E . Devspaceフォーラム)を統合されます.
私は、私がバックエンドのためにコードを書かなければならないことがうれしいです.
AppWriteコンソールは私が必要とするすべてを持っています.
このシリーズの次の記事をお楽しみください.
バイ!👋