👉 Click here to see on browser

yarn create react-app .  or npx create-react-app .

yarn add sass  or npm i sass

- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt

yarn start or npm start

OR

• Clone the Repo

  git clone

• Install NPM packages

  npm install or yarn

• Run the project

  npm start or yarn start

• Open the project on your browser

  http://localhost:3000/

• Enjoy! 🎉

 Appointment App (folder)
|
|----public (folder)
│     └── index.html
|----src (folder)
|    |--- components (folder)
│    │       ├── User.jsx
│    │
|    |--- assets (folder)
│    │       ├── email.svg
│    │       ├── location.svg
│    │       ├── phone.svg
│    │
│    ├--- App.js
│    |--- index.js
│
│
|-- .gitignore
|── package-lock.json
├── package.json
|── README.md
|── yarn.lock

• useEffect() hook

       // src/components/User.jsx

          const [loading, isLoading] = useState(true);
          const [userData, setUserData] = useState("");


   
            const getUser = () => {
           fetch("https://randomuser.me/api/")
               .then((res) => res.json())
               .then((data) => setUserData(data.results[0]))
               .catch((err) => console.log(err));
           isLoading(false);
       };
   
        useEffect(() => {
           getUser();
       }, []);

    <button onClick={getUser} className="btn btn-success">
                   New User
               </button>

• conditional rendering + cconditional Css

   if (loading) {
     return (
         <div className="d-flex justify-content-center align-items-center" style={{ height: "100vh" }}>
             <h1 className="text-danger">
                 Loading...
             </h1>
         </div>
     );
  }
  
  return (
     <div>
   <div/>
   )

• Optional Chaining?.

         {userData?.location?.city}- {userData?.location?.country}

• ECMAScript Internationalization API

     {new Date(userData?.dob?.date).toLocaleDateString("de-DE")}

• Semantic Commit Messages See how a minor change to your commit message style can make you a better programmer.

  Format: ():

  is optional

  • Example

               feat: add hat wobble
       ^--^  ^------------^
       |     |
       |     +-> Summary in present tense.
       |
       +-------> Type: chore, docs, feat, fix, refactor, style, or test.
   

• More Examples:
  • feat: (new feature for the user, not a new feature for build script)
  • fix: (bug fix for the user, not a fix to a build script)
  • docs: (changes to the documentation)
  • style: (formatting, missing semi-colons, etc; no production code change)
  • refactor: (refactoring production code, eg. renaming a variable)
  • test: (adding missing tests, refactoring tests; no production code change)
  • chore: (updating grunt tasks etc; no production code change)

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

⌛ Happy Coding ✍