DHTML
Dynamic HTML, often known as DHTML, is a collection of technologies used to create interactive and animated web pages. It is a combination of HTML (Hypertext Markup Language). CSS (Cascading Style Sheets), and JavaScript. Which allow web developers to create web pages that can change and update in real time based on user interactions.
With DHTML, developers can create dynamic effects such as animated menus, interactive forms, and image sliders. Without the need to reload the entire page every time a change is made. This makes web pages more responsive and engaging for users.
Server-side technologies such as NodeJS,PHP, Python, Golang etc and used along with DHTML technologies. To create web applications that can interact with databases and provide personalised experiences for users.
Some popular DHTML frameworks include jQuery, React, and Angular, which provide pre-built components and libraries to simplify the process of creating dynamic web pages.
What is an SPA
An SPA (Single Page Application) is a web application that vital updates a single web page. Instead of loading new pages from a server, in response to user interactions. This means that the user can navigate and interact with the application without having to wait for new pages to load from the server. Resulting in a smooth and more seamless user experience.
SPAs mainly use technologies such as HTML, CSS, and JavaScript to create rich and interactive user interfaces. And rely heavily on APIs (Application Programming Interfaces) to interact with servers and data bases to retrieve and update data. Some popular frameworks for building SPAs include React, Angular, and Vue.js.
SPAs are popular for their ability to provide a desktop like experience in a web browser. And are commonly use for applications such as email clients, social media platforms, and productivity tools.
Using React.JS for your frontend development
ReactJS, commonly referred to as React, is an open source JavaScript library for building user interfaces (UIs). It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies.
React allows developers to create re usable UI components which can be brought together to built complex UIs for web and mobile applications. It uses a declarative approach to programming. Where developers describe how the UI should look and behave based on the current state of the application. And React takes care of updating the UI as the state changes.
React is often cast-off in combination with other library and frameworks such as Redux for state management. And React Native for building native mobile applications.
Some of the key features of React include:
- Virtual DOM: React uses a virtual representation of the DOM (Document Object Model) to raise updates and improve performance.
- Component based architecture: React encourages a modular approach to building UIs, where each component is responsible for a specific part of the UI and can be reuse across different applications.
- JSX: React uses a syntax called JSX, which allows developers to write HTML-like code in JavaScript, making it easier to create UI components and templates.
React has become one of the most popular libraries for building web applications, and is cast-off by companies such as Facebook, Instagram, Netflix, and Airbnb.
Exercise
Please go through React Tutorial get an understanding of Reactjs.
Card Game — Make an SPA with two screens
Screen 1
– Provide a select box to select the number of players Ranging from 1-10
– Add a button to shuffle the cards after adding names.
– After clicking on the button, the shuffle screen will change to screen 2
Screen 2
- Based on previous selection Player name input boxes should popup dynamically
- Shuffled cards should appear
- User should be able to select a card
