PHPREACTION UI Presentation
React Components
-
React Components are independent and reusable. They are similar to JavaScript components except that they work in isolation and return HTML.
-
There are 2 types:
- Class components
- Function components
-
Based on the site:
-
We add a “custom wrapper” for each component as an “Interface design pattern” to help future maintenance. \
-
We could change libraries use without needing to refactor everywhere.
React code example :
Interface Layout
-
Main root
- The HTML <html> element represents the root of an HTML or XHTML document. Any other element must be a descendant of this element.
-
Document metadata
- Document metadata contains information about the page, the styles, the scripts. Config and SEO are included in the main layout \
-
Sectioning root
- The <body> element represents the main content of the HTML document.
-
Content sectioning
- Content sectioning organizes the content elements in a logical structure with different sections
-
Header section
This element represents a group of introductory or navigational content. It can contain title elements, but also other elements such as a logo, a search form, etc. -
Menu section
This element is a semantic alternative to ul. It represents an unordered list of items, each of which represents a link or other command that the user can activate. \ -
Footer section
The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A <footer> typically contains author information, copyright data, or links to related materials.
-
- Content sectioning organizes the content elements in a logical structure with different sections
-
SVG and MathML
-
You can insert SVG and MathML content directly into HTML documents using the <svg> and <math> tags.
NOT Currently in use.
SEE icons ?
-
-
Non-classified components
- Tour and Second Page of the Multiple pages Tour
https://phpr-demo.vercel.app/components/Tours/tour (opens in a new tab)
https://phpr-demo.vercel.app/components/Tours/tour-second-page (opens in a new tab) - Disabled Red Line
- IDE Display
- Raw Display
- Review Default Flag
- Screenshot from 2022-02-23 22-22-10
- Tour and Second Page of the Multiple pages Tour