{"id":94513,"date":"2019-08-19T07:00:13","date_gmt":"2019-08-19T04:00:13","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/?p=94513"},"modified":"2019-08-14T08:34:00","modified_gmt":"2019-08-14T05:34:00","slug":"react-ui-components-example","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html","title":{"rendered":"React UI Components Example"},"content":{"rendered":"

In this article we take a look at some of the best free React UI Components. These are picked based on my experience over the years using widget libraries with various front end frameworks. The widgets or UI Components that we will take a look are available for free to use them in your projects. So lets saddle up and get started on the ride.<\/p>\n

First up we create a simple React Application before getting into details of UI Components. I have used the create-react-app npm package to generate a skeletal project. To do it yourself, run the following command. <\/p>\n

> npx create-react-app my-react-app\n<\/pre>\n
The structure of our application generated using above command looks like below:<\/p>\n
\n
\"React
Project Structure<\/figcaption><\/figure>\n<\/div>\n
I will use Visual Studio Code IDE to work through the example in this code. But you are free to use any editor of your choice. Lets move on to take a look at the first UI Components library.<\/p>\n
1. React Bootstrap Dialog<\/h2>\n
React Bootstrap Dialog<\/a> Component is a replacement for window.alert, window.confirm and window.prompt dialogs. To use this component we can pull it from npm using the below command:<\/p>\n
> npm i react-bootstrap-dialog --save \n<\/pre>\n
In addition to the above we need to install react-bootstrap and bootstrap itself. We can do that by executing below command<\/p>\n
> npm i react-bootstrap bootstrap --save\n<\/pre>\n
Now we are all set to use this component. Let us create a new component called DialogDemo in a file named Dialog.js as below:<\/p>\n
Dialog.js<\/em><\/span><\/p>\n
import Dialog from 'react-bootstrap-dialog';\nimport React from 'react';\nimport { Button } from 'react-bootstrap';\n\nclass DialogDemo extends React.Component {\n    dialogComponent;\n    constructor(props) {\n        super(props);\n    }\n    showDialog = () => {\n        this.dialogComponent.show({\n            title: 'JavaCodeGeeks',\n            body: 'Hello there! How are you?',\n            actions: [\n              Dialog.CancelAction(),\n              Dialog.OKAction()\n            ],\n            bsSize: 'medium',\n            onHide: (dialog) => {\n              dialog.hide();\n            }\n          });\n    }\n    showAlert = () => {\n        this.dialogComponent.showAlert('Hello from JavaCodeGeeks!');\n    }\n    render = () => {\n        return <div className=\"container\" >\n            <h2>React Dialog Demo<\/h2>\n            <Button onClick={this.showDialog}>Show Dialog<\/Button>\n            <Button onClick={this.showAlert}>Show Alert<\/Button>\n            <Dialog ref={(ele) => {this.dialogComponent = ele }} \/>\n            <\/div>;\n    }\n}\nexport default DialogDemo;\n<\/pre>\n
Now running our project and clicking Show Dialog and Show Alert buttons yields the below results:<\/p>\n
\n
\"React
Dialog Demo<\/figcaption><\/figure>\n<\/div>\n
\n
\"React
Alert Demo<\/figcaption><\/figure>\n<\/div>\n
2. React Autosuggest<\/h2>\n
To start using React Autosuggest<\/a> component we need to pull it down from npm using the below command:<\/p>\n
> npm install react-autosuggest --save\n<\/pre>\n
Once done, We start using it in an example by creating a file with the below code:<\/p>\n
AutoSuggest.js<\/em><\/span><\/p>\n
import Autosuggest from 'react-autosuggest';\nimport React from 'react';\nconst languages = [{\n    name: 'German',\n    greeting: 'Hallo'\n}, {\n    name: 'French',\n    greeting: 'Bonjour'\n}, {\n    name: 'English',\n    greeting: 'Hello'\n}, {\n    name: 'Spanish',\n    greeting: 'Hola'\n}];\n\/\/ Teach Autosuggest how to calculate suggestions for any given input value.\nconst getSuggestions = (value) => {\n    const inputValue = value.trim().toLowerCase();\n    const inputLength = inputValue.length;\n\n    return inputLength === 0 ? [] : languages.filter(lang =>\n        lang.name.toLowerCase().slice(0, inputLength) === inputValue\n    );\n};\n\n\/\/ When suggestion is clicked, Autosuggest needs to populate the input\n\/\/ based on the clicked suggestion. Teach Autosuggest how to calculate the\n\/\/ input value for every given suggestion.\nconst getSuggestionValue = suggestion => suggestion.name;\n\n\/\/ Use your imagination to render suggestions.\nconst renderSuggestion = suggestion => (\n   <span>{ suggestion.name }<\/span>\n);\nclass AutoSuggestDemo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { greeting: '', language: '', suggestions: [] };\n    }\n    onChange = (event, { newValue }) => {\n        this.setState({\n            language: newValue,\n            greeting: getSuggestions(newValue)[0] ? \ngetSuggestions(newValue)[0].greeting: ''\n        });\n    };\n    \/\/ Autosuggest will call this function every time you need to update suggestions.\n    \/\/ You already implemented this logic above, so just use it.\n    onSuggestionsFetchRequested = ({ value }) => {\n        this.setState({\n            suggestions: getSuggestions(value)\n        });\n    };\n\n    \/\/ Autosuggest will call this function every time you need to clear suggestions.\n    onSuggestionsClearRequested = () => {\n        this.setState({\n            suggestions: [],\n            greeting: ''\n        });\n    };\n    render = () => {\n        const { language, suggestions, greeting } = this.state;\n\n        \/\/ Autosuggest will pass through all these props to the input.\n        const inputProps = {\n            placeholder: 'Type a programming language',\n            value: language,\n            onChange: this.onChange\n        };\n        return <div> <Autosuggest\n            suggestions={suggestions}\n            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}\n            onSuggestionsClearRequested={this.onSuggestionsClearRequested}\n            getSuggestionValue={getSuggestionValue}\n            renderSuggestion={renderSuggestion}\n            inputProps={inputProps}\n        \/><span>{greeting}<\/span><\/div>\n    }\n}\nexport default AutoSuggestDemo;\n<\/pre>\n
We can now run our code and see the below output in the browser:
 
<\/div> <\/div><\/p>\n
\n
\"React
AutoSuggest Demo<\/figcaption><\/figure>\n<\/div>\n
3. ReactJS Datepicker<\/h2>\n
As the name suggests ReactJS Datepicker<\/a> is a Date Picker component for React Applications. We will pull this down using npm command below:<\/p>\n
> npm install react-datepicker --save\n<\/pre>\n
Now we will build a sample menu using this component in our sample application. Like previously we will place our code in a  separate module for this example as well. The code would look like below:<\/p>\n
Datepicker.js<\/em><\/span><\/p>\n
import React from 'react';\nimport DatePicker from 'react-datepicker';\nimport \"react-datepicker\/dist\/react-datepicker.css\";\n\nclass DatepickerDemo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            startDate: new Date()\n        }\n    }\n    render = () => {           \n        return <DatePicker selected={this.state.startDate}\n        onChange={this.handleChange}  \/>;\n    }\n    handleChange = (value) => {\n        this.setState({\n            startDate: value\n        });\n    }\n}\nexport default DatepickerDemo;\n<\/pre>\n
Now when we run the application we can see the datepicker in action like below:<\/p>\n
\n
\"React
Datepicker Demo<\/figcaption><\/figure>\n<\/div>\n
4. React DnD<\/h2>\n
React Drag N Drop<\/a> is a library to enable drag and drop features in a React Application. We pull the precompiled version of this library like below:<\/p>\n
> npm install --save react-dnd\n> npm install --save react-dnd-html5-backend\n<\/pre>\n
Post installation, we would create a Todo Board application, wherein we will drag tasks to Today list or Not Today list. We use a sample dataset that looks like below:<\/p>\n
const Tasks = [{\n    id: 'TaskList-1',\n    desc: 'Tasks',\n    tasks: [{\n        id: 'Task-1',\n        desc: 'Take Out Garbage'\n    }, {\n        id: 'Task-2',\n        desc: 'Shave'\n    }, {\n        id: 'Task-3',\n        desc: 'Shower'\n    }, {\n        id: 'Task-4',\n        desc: 'Buy Groceries'\n    }\n    ]\n}, {\n    id: 'TaskList-2',\n    desc: 'Not Today',\n    tasks: []\n}, {\n    id: 'TaskList-3',\n    desc: 'Today',\n    tasks: []\n}];\n<\/pre>\n
We display the above dataset using three instances of our TaskList component. One each for every TaskList object. Furthermore each TaskList displays an instance of Task for every task in the tasks array. Our components and the code to enable drag n drop using React Drag And Drop library looks like below:<\/p>\n
reactdnd.tsx<\/em><\/span><\/p>\n
import React from 'react';\nimport TaskList from '.\/DnDTaskList';\nimport { DndProvider } from 'react-dnd';\nimport Html5Backend from 'react-dnd-html5-backend';\nconst Tasks = [{\n    id: 'TaskList-1',\n    desc: 'Tasks',\n    tasks: [{\n        id: 'Task-1',\n        desc: 'Take Out Garbage'\n    }, {\n        id: 'Task-2',\n        desc: 'Shave'\n    }, {\n        id: 'Task-3',\n        desc: 'Shower'\n    }, {\n        id: 'Task-4',\n        desc: 'Buy Groceries'\n    }\n    ]\n}, {\n    id: 'TaskList-2',\n    desc: 'Not Today',\n    tasks: []\n}, {\n    id: 'TaskList-3',\n    desc: 'Today',\n    tasks: []\n}];\n\nfunction ReactDnDDemo() {\n\n    return <DndProvider backend={Html5Backend}><div className=\"row\">{Tasks.map(t =>\n\n        <div className=\"col-3\" key={t.id}>\n            <TaskList title={t.desc} task={t} tasks={t.tasks}\n onMove={(item: any, tasks: Array<any>) => {\n                tasks = tasks.filter(tk => tk.id !== item.id);\n            }}\n            \/>\n        <\/div>\n    )}<\/div>\n    <\/DndProvider>;\n\n}\nexport default ReactDnDDemo;\n<\/pre>\n
In the above component we loop over the tasklist array and create an instance of TaskList component for each object. Additionally we pass the tasks array to the component through props. This would be used by individual TaskList component to render its tasks as we will see below:<\/p>\n
DnDTaskList.tsx<\/em><\/span><\/p>\n
import React from 'react';\nimport Task from '.\/DnDTask';\nimport { useDrop } from 'react-dnd';\nimport { ItemTypes } from '.\/CONSTANTS';\n\nfunction TaskList(props: any) {\n    const [collectedProps, drop] = useDrop({\n        accept: ItemTypes.TASKS,\n        collect: monitor => ({\n            isOver: !!monitor.isOver(),\n        }),\n        drop: (task: any) => {\n            props.tasks.push(task.task);\n        }\n    });\n\n    return <div ref={drop}>\n\n        <h2>{props.title}<\/h2>{\n            props.tasks.map((t: any) =>\n\n                <Task key={t.id} id={t.id} task={t} parentTask={props.task} onMove={(item: any, parentTask: any) => {\n                    for(let k = 0; k < parentTask.tasks.length; k++) {\n                        if(parentTask.tasks[k].id === item.id) {\n                            parentTask.tasks.splice(k, 1);\n                            return;\n                        }\n                    }\n                }}>\n\n                <\/Task>\n            )}\n    <\/div>;\n\n}\nexport default TaskList;\n<\/pre>\n
The TaskList component above renders a its description and in addition a Task Component for each task under tasks prop passed to it. Passing the details of the task to the individual Task component instances. This component is made droppable using React Drag n Drop library and it accepts objects of type TASKS.<\/p>\n
DnDTask.tsx<\/em><\/span><\/p>\n
import React from 'react';\nimport { ItemTypes } from '.\/CONSTANTS';\nimport { useDrag } from 'react-dnd';\nfunction Task(props: any) {\n    const [{ isDragging }, drag] = useDrag({\n        item: { type: ItemTypes.TASKS, task: props.task },\n        collect: monitor => ({\n            isDragging: !!monitor.isDragging(),\n        }),\n        end: (dropResult: any) => {\n            props.onMove(dropResult.task, props.parentTask);\n        }\n    });\n\n    return <div className=\"card\" ref={drag} style={{\n        opacity: isDragging ? 0.5 : 1,\n        cursor: 'move'\n    }} >\n        <div className=\"card-body\">\n            {props.task.desc}\n        <\/div>\n    <\/div>;\n}\nexport default Task;\n<\/pre>\n
This is the Task object and it displays the description of the task. We have made this item draggable using React Drag n Drop.<\/p>\n
The above code allows us to drag tasks between lists and move them like below:<\/p>\n
\n
\"React
Drag n Drop Example<\/figcaption><\/figure>\n<\/div>\n
5. Chartify<\/h2>\n
Chartify<\/a> is a lightweight charting component for React Application. So, lets learn to use it in our applications. First we need to pull it down from npm using<\/p>\n
> npm install chartify --save\n<\/pre>\n
Now that we have it installed lets get down to creating our first chart with chartify. Our new chart component would as usual reside in a separate file and it would look like below:<\/p>\n
\/*import '.\/chartify';*\/\nimport Chartify from 'chartify';\nimport React from 'react';\n\nlet data = [{\n    xValue: '20.11.2016',\n    yValue: 5,\n    title: '001'\n}, { \n    xValue: '12.03.2019', \n    yValue: 8, \n    title: '002' \n}, {\n    xValue: '20.11.2016',\n    yValue: 25,\n    title: '003'\n} ,{\n    xValue: '20.11.2016',\n    yValue: 35,\n    title: '004'\n}];\n\nlet config = {\n    theme: 'blue',\n    width: 1450,\t\t\t      \n    height: 10,\t\t\n    boxSize: 20,\n    isLineChart: false,\n    bordered: false\n};\nclass ChartDemo extends React.Component {\n    render = () => {\n        return \n    }\n}\nexport default ChartDemo;\n\n<\/pre>\n
\n
\"React
Chart Demo<\/figcaption><\/figure>\n<\/div>\n
6. Download the Source Code<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: React UI Components Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
In this article we take a look at some of the best free React UI Components. These are picked based on my experience over the years using widget libraries with various front end frameworks. The widgets or UI Components that we will take a look are available for free to use them in your projects. …<\/p>\n","protected":false},"author":82952,"featured_media":92051,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1903],"tags":[1923],"class_list":["post-94513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-ui-components"],"yoast_head":"\nReact UI Components Example - Java Code Geeks<\/title>\n<meta name=\"description\" content=\"Interested to learn more about React? Then check out our detailed example on React UI Components!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React UI Components Example - Java Code Geeks\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about React? Then check out our detailed example on React UI Components!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html\" \/>\n<meta property=\"og:site_name\" content=\"Java Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/javacodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-19T04:00:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@javacodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\"},\"headline\":\"React UI Components Example\",\"datePublished\":\"2019-08-19T04:00:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html\"},\"wordCount\":739,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"keywords\":[\"ui components\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html\",\"name\":\"React UI Components Example - Java Code Geeks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"datePublished\":\"2019-08-19T04:00:13+00:00\",\"description\":\"Interested to learn more about React? Then check out our detailed example on React UI Components!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#primaryimage\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/react-ui-components-example.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"React.js\",\"item\":\"https:\\\/\\\/www.javacodegeeks.com\\\/category\\\/web-development\\\/javascript\\\/react-js\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"React UI Components Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"name\":\"Java Code Geeks\",\"description\":\"Java Developers Resource Center\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\"},\"alternateName\":\"JCG\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.javacodegeeks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.javacodegeeks.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/javacodegeeks\",\"https:\\\/\\\/x.com\\\/javacodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.javacodegeeks.com\\\/#\\\/schema\\\/person\\\/09c54717e2cc7956aa8a2df61330f18c\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/siddharth-seth-240180\\\/\"],\"url\":\"https:\\\/\\\/www.javacodegeeks.com\\\/author\\\/siddharth_seth1980\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React UI Components Example - Java Code Geeks","description":"Interested to learn more about React? Then check out our detailed example on React UI Components!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html","og_locale":"en_US","og_type":"article","og_title":"React UI Components Example - Java Code Geeks","og_description":"Interested to learn more about React? Then check out our detailed example on React UI Components!","og_url":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html","og_site_name":"Java Code Geeks","article_publisher":"https:\/\/www.facebook.com\/javacodegeeks","article_published_time":"2019-08-19T04:00:13+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@javacodegeeks","twitter_site":"@javacodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#article","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c"},"headline":"React UI Components Example","datePublished":"2019-08-19T04:00:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html"},"wordCount":739,"commentCount":0,"publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","keywords":["ui components"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html","url":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html","name":"React UI Components Example - Java Code Geeks","isPartOf":{"@id":"https:\/\/www.javacodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#primaryimage"},"image":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#primaryimage"},"thumbnailUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","datePublished":"2019-08-19T04:00:13+00:00","description":"Interested to learn more about React? Then check out our detailed example on React UI Components!","breadcrumb":{"@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.javacodegeeks.com\/react-ui-components-example.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#primaryimage","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2019\/05\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.javacodegeeks.com\/react-ui-components-example.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.javacodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/www.javacodegeeks.com\/category\/web-development"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript"},{"@type":"ListItem","position":4,"name":"React.js","item":"https:\/\/www.javacodegeeks.com\/category\/web-development\/javascript\/react-js"},{"@type":"ListItem","position":5,"name":"React UI Components Example"}]},{"@type":"WebSite","@id":"https:\/\/www.javacodegeeks.com\/#website","url":"https:\/\/www.javacodegeeks.com\/","name":"Java Code Geeks","description":"Java Developers Resource Center","publisher":{"@id":"https:\/\/www.javacodegeeks.com\/#organization"},"alternateName":"JCG","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.javacodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.javacodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.javacodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/javacodegeeks","https:\/\/x.com\/javacodegeeks"]},{"@type":"Person","@id":"https:\/\/www.javacodegeeks.com\/#\/schema\/person\/09c54717e2cc7956aa8a2df61330f18c","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.linkedin.com\/in\/siddharth-seth-240180\/"],"url":"https:\/\/www.javacodegeeks.com\/author\/siddharth_seth1980"}]}},"_links":{"self":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/94513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/users\/82952"}],"replies":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/comments?post=94513"}],"version-history":[{"count":0,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/posts\/94513\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media\/92051"}],"wp:attachment":[{"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/media?parent=94513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/categories?post=94513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.javacodegeeks.com\/wp-json\/wp\/v2\/tags?post=94513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}