why developers choose semantic-ui , what is semantic-ui-react, installation, sample code with common components

1. Semantic-ui-react
natankrasney@gmail.com
1

2. What resources i am giving you
● This video - “Introduction to semantic-ui-react”
● Github project with semantic-ui-react samples i have
prepared up front (link1)
● Slides of this presentation at slideshare
● Github project with semantic-ui-react samples i will use in
the video (link2 , added after the video was done...)
● My react course “Learn React in a Better Way” @UDEMY
at reduced price (link3)
natankrasney@gmail.com
2
All links are on last slide

3. Why developers choose semantic-ui
Check Link4
npm of semantic-ui-react - Link5
natankrasney@gmail.com
3

4. What is semantic-ui-react
It's the official react integration of semantic-ui
natankrasney@gmail.com
4
Concept Description
JQuery free no direct dom access -> crucial for react
Declarative API <Rating rating={1} maxRating={5} /> -> known from react
Augmentation Element type to render as e.g. Menu.Item acts as react-router link
Shorthand props shorthand props generate markup for common use case- save you time. E.g. panel
of Accordion
Subcomponents Component can contain other components -> known from react
Auto Controlled state Stateful component use state internally e.g. Dropdown (need a sample code)

5. Introduction
● Documentation (Link6)
○ One of the best i have ever seen !!
○ Check left side - components : elements , collections , views , modules ,
behaviors , addons
○ Check per component right side and per sample (try it , html, …)
● One does not need to know css to use it , but you can combine both
natankrasney@gmail.com
5

6. Inner design
● Components are typescript class + interfaces e.g.
node_moudulessemantic-ui-reactsrcelementsButtonButton.d.ts is the
typescript class implementation of Button
● Check the html of e.g. Button and you will see that it is an html button element
with class “ui button” (use F12 elements)
● Go to definition of Button and you will see that it is react class component
● Button class has static data members e.g. Group
natankrasney@gmail.com
6

7. Installation
npm install semantic-ui-css semantic-ui-react
Add import "semantic-ui-css/semantic.min.css"; to index.js
natankrasney@gmail.com
7

8. Sample code
Link1
natankrasney@gmail.com
8

9. Components in the sample
natankrasney@gmail.com
9
Component Class static data members Remark
Button Content,Group,Or
Label Detail,Group
Message Content,Header,Item,List
Card Content,Description,Group,Header,Meta
Item Content,Description,Extra,Group,Header,Image,Meta Used e.g. as Menu , Dropdown
item

10. More components in the sample
natankrasney@gmail.com
10
Component Class static data members Remark
Form Button,
Checkbox,DropDown,Field,Group,Input,Radio,Select
, TextArea
List Content,Description,Header,Icon,Item.List
Menu Header,Item,Menu
Table Body,Cell,Footer,Header,HeaderCell,Row
Step Content,Description,Group,Title
Grid Row,Col Can be used for vertical and
horizontal alignment e.g. for
login form

11. More elements
natankrasney@gmail.com
11
Component Class static data members Remark
Container none Limit content to max width.
Header Content,Subheader Generalization of h1,h2,h3,...
Divider none Divide between segment. Most simple usage is a line
Placeholder Header,Image,Line,Paragraph Reserve space for content that can appear soon
Rail none Show accompanying content on the main view of the web site
Reveal Content Display additional content in place of other content
Segment Group,Inline Group related content,looks to be used as div. Looks like it
handle layout : TextAlignment , floated,color,padding, font size

12. Non self explanatory views
12
Component Class static data members Remark
Advertisement none Many ways to show ads e.g. google ads
Comment Action,Actions,Author,Avatar,Content,
Group,Metacontent
Human comment with image,name,content,..
Feed Content,Date,Event,Extra,Label,Like,
Meta,Summary,User
Shows human activity chronologically e.g. chat

13. Non self explanatory modules
13
Component Class static data members Remark
Embed none E.g. YouTube

14. Behaviors
14
Component Class static data members Remark
Visibility none Set of callback to be called when content appears
on the viewport (user visible area of the web
page)

15. Non self explanatory Addons
15
Component Class static data members Remark
MountNode none Use case is not clear yet
Portal inner Use case is not clear yet
Ref FindNode , Forward Handle react ref

16. Links
16
Link1 Github project with semantic-ui-react samples i have prepared up front
Link2 Github project with semantic-ui-react sample i will use in the video
Link3 My React course @ UDEMY
Link4 Why developers choose semantic-ui
Link5 npm of semantic-ui-react
Link6 semantic-ui-react documentation