punsaraprathibha/gdse-62-64-rad-react-app

Sample React App with Tailwind css

1. Previously we had below components in App.tsx wrapped by BrowserRouter <BrowserRouter> <Navbar/> <MainContent/> <Footer/> </BrowserRouter>

2. So, if we need to navigate to login page which don't have any of these common components, we need to do some small layout change of this current layout.

3. So, for that we need to extract these common set of components to a separate single component for easy to manage. Let's call it as DefaultLayout.tsx export class DefaultLayout extends Component { render() { return ( <> <Navbar/> <MainContent/> <Footer/> </> ); } }

4. Let's create new component called Login export class Login extends Component { render() { return ( <> <h1 className="text-4xl text-center text-tertiary">This is Login!</h1> </> ); } }

5. Then import and define this newly created DefaultLayout component and Login component inside App.tsx. <BrowserRouter> <Routes> <Route path="/*" Component={DefaultLayout}></Route> <Route path="/login" Component={Login}></Route> </Routes> </BrowserRouter

6. Then define a Link inside the Sign-In button like below to enable navigation to login page <Link to="/login">Sign In</Link>

7. Paste this code inside About.tsx `

   About Us

   At Organic Shop, we believe in the power of nature to nourish, heal, and inspire. Our journey began with a simple yet profound realization: the importance of embracing organic living for the well-being of both individuals and the planet.
   
   Mission: Our mission is to make organic living accessible to all, fostering a harmonious relationship between people and the environment. We are committed to offering a diverse range of high-quality, ethically sourced, and sustainable products that promote health, wellness, and a greener lifestyle.

   `

8. Then place this code inside Content.tsx `

   Contact Us

   Got a technical issue? Want to contact us? Please let us assist you..

   Your Email:

   Your Subject:

   Your Message: <textarea className="float-right border-[1px] border-green-200"></textarea>

   Send Message

   `

9. Replace the Login.tsx with this below code. `

   Sign In

   Email:

   Password:

   Sign In

   `

10. Add the below code to Home.tsx. `

    {/* First Row */}

    01

    02

    03

        {/* Second Row */}
        <div className="w-28 h-32 bg-blue-300 mr-2 mb-2 flex justify-center items-center">
          04
        </div>
        <div className="w-28 h-32 bg-blue-300 mr-2 mb-2 flex justify-center items-center">
          05
        </div>
        <div className="w-28 h-32 bg-blue-300 mr-2 mb-2 flex justify-center items-center">
          06
        </div>
    </div>
    

    `

11. Then create grid product items like below. `

    

    Spinach

    200 LKR

    Add to Cart

    ` `
    

    Tomato

    300 LKR

    {/*

    Available Items: 12

    */} Add to Cart
    ` `
    

    Beans

    250 LKR

    /*

    Available Items: 12

    */} Add to Cart
    `

12. Now let's see how to load these items dynamically through a json file by extracting this as a new component called "Product".

13. So, create a json file called product-data.json inside public folder and paste the below code inside it. [ {"id": 1, "name": "Spinach", "price": "200", "currency": "LKR", "image": "spinach.png" }, {"id": 2, "name": "Tomato", "price": "300", "currency": "LKR", "image": "tomato.png" }, {"id": 3, "name": "Beans", "price": "250", "currency": "LKR", "image": "beans.png" } ]

14. Extract the product section and create a new common component called Product. `import {Component} from "react";

    interface ProductProps { data: null }

    export class Product extends Component { render() { // @ts-ignore const {data} = this.props; const image = require('../../../images/products/' + data.image);

        return (
            <div className="w-28 h-32 mr-2 mb-2 justify-center items-center border-gray-500 border-[0.5px]">
                <div>
                    <img className="h-[88px] w-[88px]" src={image} alt=""/>
                </div>
                <div className="flex">
                    <div>
                        <h3 className="text-secondary text-[12px] pl-2">Spinach</h3>
                    </div>
                    <div className="bg-yellow-300 ml-1 p-[0.3px] rounded-lg pr-2">
                        <h3 className="text-[12px] pl-2">200 <small className="text-[7px]">LKR</small></h3>
                    </div>
                </div>
                <div className="flex justify-center">
                   <button className="w-full mt-1 p-[2.4px] bg-secondary text-[8px] border-gray-500 border-[0.5px]">Add to Cart</button>
                </div>
            </div>
       );
    

    } }`

15. Then replace the Home component with this code `export class Home extends Component {

    constructor(props: {} | Readonly<{}>) { super(props); this.state = { data: [], }; }

    componentDidMount() { this.fetchData(); }

    fetchData = async () => { try { const response = await fetch('./product-data.json'); const jsonData = await response.json(); this.setState({data: jsonData}); } catch (error) { console.error('Error fetching data:', error); } };

    render() { // @ts-ignore const {data} = this.state;

    return (
        <div>
            <div className="flex flex-wrap ml-[1px] mt-5 mb-5 justify-center items-center mx-auto">
                {data.map((product:any) => (
                   <Product key={product.id} data={product}/>
                ))}
            </div>
        </div>
    );
    

    } }`

16. Then you can see adding more data to .json file to reflect in the dashboard at realtime.