Skip to main content
Advanced Search
Search Terms
Content Type

Exact Matches
Tag Searches
Date Options
Updated after
Updated before
Created after
Created before

Search Results

211 total results found

Basic Navigation

Form Handling & Routing in React Navigation In React

You can read full guide and tutorial here Basic Navigation in React Page creation In page folder, we will have two page Home page and About page In main.tsx file, we will defined two paths "/" and "/about" when you direct to "localhost:5173/" , it wi...

Dynamic Routing

Form Handling & Routing in React Navigation In React

Dynamic routing is a powerful technique used in web development to handle navigation and rendering of pages based on changing parameters. Unlike traditional static routing, where pages are created and rendered component by component, dynamic routing allows for...

What is API ?

React fetching the data Fetching with API in React

API (Application Programming Interface) API stands for Application Programming Interface, it's a set of defined rules that acts as an intermediary layer that enables the exchange of information and functionality between different systems, such as between a ...

React Fetching

React fetching the data Fetching with API in React

In this course for the data, we have used is the API endpoint from https://reqres.in/api/users Fetch method The fetch() is a method in JavaScript is used to request to the server and load the information in the webpages. The request can be of any APIs th...

RESTful API

React fetching the data

REST (Representational State Transfer) What is RESTful API? RESTful API is an interface design based on REST architecture that enable two computer systems exchange information securely over the internet either used to fetch or give some information from a ...

Deck of Cards API

React fetching the data Public APIs

Shuffle the Cards: Add deck_count as a GET or POST parameter to define the number of Decks you want to use. Blackjack typically uses 6 decks. The default is 1. Draw a Card: The count variable defines how many cards to draw from the deck. Be sure to replac...

Free Dictionary API

React fetching the data Public APIs

Search word definition and some other details. with this request format it would provide many word's details such: word - how word spell phonetic - how to pronounce word according to the phonetic principle origin - source or beginning of this word partO...

Fetching via Axios

React fetching the data

Axios Axios package is a Javascript library not API. Axios use promise-based HTTP client designed for Node.js and browsers. so, we can easily send asynchronous HTTP requests to REST APIs and perform create, read, update and delete operations (CRUD). It is an ...

RPG theme TODO App

Introduction to Basic React React Exercise

Now we're gonna try to do some Lab about what we've learn so far. Please follow the given instruction until the end.  Objective: Understand the use of useState and Manage the state  Understand concept of Component in React Understand to import and export...

Simplest Calculator

Introduction to Basic React React Exercise

In this assessment, your goal is to build a simple calculator app. The app should be fully functional. For the CSS you don't need to do it by yourself, copy the code below and paste it on App.css in the src folder, before you paste it make sure you delete...

Bank App Home Page

Introduction to Basic React hands-on lab

Throughout this course we will try to create full stack bank app web application that fully functioning Creating Home Page The final result of this lab should look like this  The home page should consist of  Deposit/transfer/ withdraw card : original...

Introduce Flex box / Grid Layout Systems

Introduction MUI and Implement responsive CSS responsive design

Flex Box What is Flexbox? Flexbox is a layout model that allows you to distribute space and align elements within a container, even when the sizes of the elements are unknown or dynamic. Unlike traditional layout models, such as floats and positioning, F...

Bank Assignment Cont.

Introduction MUI and Implement responsive

History Page Example of large breakpoint view. (desktop) Example of Extra small , Medium breakpoint view (Mobile) 1.Create the History page (follow this User interface) create deposit component create withdraw component create the transaction...

CSS Unit

Introduction MUI and Implement responsive CSS responsive design

Absolute Lengths The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Relative Lengths Relative length units specify a length relative to another length property. Relative length units scale better b...

Form Handling Exercise

Form Handling & Routing in React

Instruction Create a form that receive the 2 input and 1 submit button 1. Email 2. Password The form should validate the data with this requirement. Email The valid email should follow the HTML standard email validation HTML Standard (whatwg.org) ...

React router component

Form Handling & Routing in React Navigation In React

Components in React Router V6 BrowserRouter BrowserRouter is main component to cover our React application to make it routable. Used for applications with a modern browser that supports the HTML5 history API. Allows you to use regular URLs (e.g., /about)...

Bank project Cont.

Form Handling & Routing in React

For this week, we going to continue on our bank project from last week by the following goals Goals Create a main page that contain a navbar menu for redirect to home page and history page. Routing between home page, history page, sign up page and sign in...

Routing exercise

Form Handling & Routing in React

Instruction Make a page call MainPage.jsx - In main page (Parent) there will be two button that will render HomePage (Child) or AboutPage (Child) For homepage and aboutpage, just use the one that you've done in previous chapter ** when you click "go ...

API Exercise

React fetching the data

Instruction In this exercise we would create web application to provide information about Food Dish by using MealDB API. By this page we have receive only 1 input with 1 button. Input: Dish name Button: Search A web application should provide user fol...

HTTP & HTTP request

React fetching the data

HTTP (Hypertext Transfer Protocol) HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web, and it is a client-server protocol. In HTTP there are four methods that are commonly used in a REST-base...