Page Comparison

...

1. Install the package Semantic-UI-React. The Semantic UI stylesheet reference will be use as now.
2. Import the elements you need from the semantic-ui-react package:
1. Search the current UI Element/Collection/View/... used in the Semantic UI Documentation from the className value.
2. Search in the Sermantic UI React Documentation the corresponding Element/Collection/View/...

3. Take into account that some style attributes of the components should be pass as props to the new react component. Searching among the examples in the documentation can help you to detect which ones. For example:

   Code Block
   language xml title code
   {/*semantic ui element*/} <div className="ui inverted blue menu"><div> --> import Menu from 'semantic-ui-react'; {/*Equivalent Semantic-UI-REact element*/} import {Menu} from 'semantic-ui-react'; <Menu inverted="true" color="blue" secondary>

   
   
   

4. Add the aria-labels and data tooltip attributes to the elements. For example, for a button: 
   
   

   Code Block
   language xml
   {/*semantic ui element*/} <button class="ui button" type="button" aria-label='Click Here' data-tooltp='Click Here'> Click Here</button> {/*Equivalent Semantic-UI-React element*/} import React from 'react'; import { Button } from 'semantic-ui-react'; <Button aria-label='Click Here' data-tooltp='Click Here'> Click Here </Button>

   
   
   
   
   

5.