This is an step by step article on how to create, setup and deploy a simple React App using React.js, and Tailwind CSS.

Built With 🔑

This project was developed using

Projects

Project	Github	Demo	Other
Data Landing	Repo	Landing Page	Youtube Tutorial
Brothers Landing	Repo	Responsive LP	Figma

Content 🚦

1. Create a React Project

npx create-react-app my-project

• Getting Started with React.js

2. Modify the React App

A. Delete the App.css and the logo.svg

• Warning: I will get some error if I start the server (thats ok)

B. Edit App.js by deleting the <header>, delete the import App.css, import logo and add import React from react; (Try changing the HTML content and save the file.)

C. Create components:

• Create the components folder inside src
• Create the FileComponents.jsx inside the components folder.

3. Install Tailwind CSS

• Free libraries of Tailwind CSS Components Free Tailwind CSS Templates, Components and Resources Fully responsive libraries, multi-purpose UI kits, built with Tailwind CSS, for start-ups and products of any kind. Build beautiful interfaces without reinventing the wheel.

FloatUI	a17t	Headless UI	Tailwind Components	Treact	Mamba UI
Tailwind Awesome	Kometa UI Kit	Tailwind UI Kit	Meraki UI	Tailwind Starter Kit	Kutty
HyperUI	Tailwind Toolbox	DaisyUI	Flowbite	PostSrc	Tailblocks

Tailwind Elements

4. Install additional functionalities

Icons

Install react-icons to the project

npm install react-icons --save

• npm install @headlessui/react

• npm install @heroicons/react

  • Add React-icon to the fileComponent.jsx: - Import react-icons to file.jsx

  Example

  import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
  <AiOutlineMenu />
  <AiOutlineClose />
  

Animation

Install Framer Motion to the project (learn more)

npm install framer-motion

• Add framer-motion to the fileComponent.jsx: - Import framer-motion to file.jsx

  Example

  import framer-motion from "react";
  

  Project example: Animated expandable cards with Tailwind CSS and Framer Motion

Change the Title and Metadata (title, icon, description, url, …)

Making your site SEO friendly.

1. Install Helmet to the project

   npm install --save react-helmet
   

• learn more

1. Import and Add the <Helmet> tag to the fileComponent.jsx:

   import React from "react";
   import { Helmet } from "react-helmet";
   
   class Application extends React.Component {
     render() {
       return (
         <div className="application">
           <Helmet>
             <meta charSet="utf-8" />
             <title>My Title</title>
             <link rel="canonical" href="http://mysite.com/example" />
             <meta name="description" content="Helmet application" />
           </Helmet>
           ...
         </div>
       );
     }
   }
   

   Work around

For the Icon App:

1. Create or Download your favicon. (download img as ico)
2. Replace the favicon.ico inside the public folder with yours.
3. Run the project.

Video: How to Add a Favicon and Title to React app

TypeWriter Effect

Install react-simple-typewriter to the project

npm i react-simple-typewriter

• Add react-simple-typewriter to the fileComponent.jsx:
  • import { Typewriter } from 'react-simple-typewriter'

Learn more

Example

import React from 'react'
import { Typewriter } from 'react-simple-typewriter'

const MyComponent = () => {

  const handleType = (count: number) => {
    // access word count number
    console.log(count)}
  }

  const handleDone = () => {
    console.log(`Done after 5 loops!`)
  }

  return (
    <div className='App'>
      <h1 style=>
        Life is simple{' '}
        <span style=>
          {/* Style will be inherited from the parent element */}
          <Typewriter
            words={['Eat', 'Sleep', 'Code', 'Repeat!']}
            loop={5}
            cursor
            cursorStyle='_'
            typeSpeed={70}
            deleteSpeed={50}
            delaySpeed={1000}
            onLoopDone={handleDone}
            onType={handleType}
          />
        </span>
      </h1>
    </div>
  )
}

Scroll Effect on landing page

Install React Scroll to the project

npm install react-scroll

• Add react-scroll to the fileComponent.jsx:
  • import { Link } from 'react-scroll'

Learn more

Example

  <Link
    activeClass="active"
    to="home"
    spy={true}
    smooth={true}
    offset={50}
    duration={500}
    onSetActive={handleSetActive}
  >
    Home
  </Link>

    <p name="home">Home Section</p>

Prettier Plugin Tailwind

Pre-requisites:

• Have Prettier already install in the project.

  npm install –save-dev –save-exact prettier

Install prettier-plugin-tailwindcss:

1. Install the plugin to the project:

   npm install -D prettier prettier-plugin-tailwindcss
   

2. Add the plugin to your the Prettier config file: .prettierrc, .prettierrc.json, prettier.config.js. Located in the root of the project.:

   // .prettierrc.json
   {
     "plugins": ["prettier-plugin-tailwind"]
   }
   

   This is how the file should look like:

   // .prettierrc.json
   {
     "semi": false,
     "singleQuote": true,
     "tabWidth": 2,
     "useTabs": false,
     "plugins": ["prettier-plugin-tailwind"]
   }
   // or:
   {
     "semi": true,
     "tabWidth": 2,
     "useTabs": false,
     "singleQuote": true,
     "trailingComma": "es5",
     "bracketSpacing": true,
     "jsxBracketSameLine": true,
     "arrowParens": "avoid",
     "plugins": ["prettier-plugin-tailwindcss"]
   }
   

3. Run the Prettier command to format the code with the new plugin:

   npx prettier --write "**/*.{js,ts,jsx,tsx}"
   

Prettier resources:

• NPM site
• Other
• Video

Tutorial To Change Style of NavBar On Scroll

Github Repo: React-scroll-position-hook

How To Make Nav Bar Styles In React Change On Scroll

• Add the sticky or fixed tailwind class to make the navbar stay on screen when scrolling.
• Add a shadow to separate navbar from the rest.

Create a Custom Hook to Track Scroll Position

I. Create a folder src/hooks/useScrollPosition.js

import { useEffect, useState } from "react";

export const useScrollPosition = () => {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener("scroll", updatePosition);

    updatePosition();

    return () => window.removeEventListener("scroll", updatePosition);
  }, []);

  return scrollPosition;
};

II. Use the Custom Hook on the Navbar Component

Example 1:

// ...your code

import { useScrollPosition } from "../hooks";
import { useState } from "react";

// ...your code

function classNamesNavBarScroll(...classes) {
  return classes.filter(Boolean).join(" ");
}
export default function navbar() {
  const scrollPosition = useScrollPosition();
  // console.log(scrollPosition);

  return (
    <header
      className={classNamesNavBarScroll(
        scrollPosition > 0
          ? "md:shadow md:bg-[#132577] md:-translate-y-6 md:h-auto"
          : "md:shadow-none md:bg-none md:translate-y-0 md:h-none",
        "absolute md:fixed top-0 inset-x-0 z-40 md:transition-shadow-xl md:shadow-black md:transition-color duration-500 md:-translate-y-6 md:h-20 lg:h-24"
      )}
    >
      {/* ...your code */}
    </header>
    // ...your code
  );
}

Example 2:

// ...your code

import { useScrollPosition } from "../hooks";
import { useState } from "react";

// ...your code

function classNamesNavBarScroll(...classes) {
  return classes.filter(Boolean).join(" ");
}
export default function navbar() {
  const scrollPosition = useScrollPosition();
  // console.log(scrollPosition);

  return (
    <header
      className={classNamesNavBarScroll(
        scrollPosition > 0 ? "shadow" : "shadow-none",
        "transition-shadow sticky top-0 bg-white z-20"
      )}
    >
      {/* ...your code */}
    </header>
    // ...your code
  );
}

Tutorial to Add Effects to NavBar

5. Run the App in Localhost

npm start
# Or
npm run dev

Go to localhost:3000

6. Deployment

There are multiple ways to deploy a React app in just minutes. Here is an article that explains 8 different ways to Deploy a React App.

• From a Github Repo
• From a new project on your machine

1. Install Firebase:

    npm install -g firebase-tools
   

2. Login with your Firebase or Google account.

   firebase login
   

3. Follow steps on blog

1. Make sure to have latest Node.js
2. Install Surge:

 npm install --global surge

1. Now, run surge from within any directory, to publish that directory onto the web.

From a Github Repo. Learn More

---

License 📜

Distributed under the MIT License. See LICENSE.txt for more information.

Projects 🚀

Courses & Certifications

For more information regarding my completed courses and certificates, please click on:

Acknowledgments 📚

Resources list that I find helpful and would like to give credit to.

• Tailwindcss.com
• Tailwind CSS Cheat Sheet
• Video: How To Use Tailwind CSS With React
• Create a Landing Page with React.JS and tailwind CSS
• Pesticides extension to check the layout of the page
• How to set React background Image