{"id":16791,"date":"2017-04-03T12:15:54","date_gmt":"2017-04-03T09:15:54","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=16791"},"modified":"2017-03-31T11:35:23","modified_gmt":"2017-03-31T08:35:23","slug":"designing-user-interfaces-react","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/","title":{"rendered":"Designing User Interfaces With React"},"content":{"rendered":"

There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is React<\/a> . React is widely known mainly because of its backing by Facebook. As a result, it has a pretty big footprint on the web. Developers know it, trust it, and love its feature set.<\/p>\n

There are multiple tiers to what React can do, but I\u2019d love to focus on how React can enable any developer to design modular and functional user interfaces.<\/p>\n

What Exactly Is React?<\/h2>\n

Before we talk about creating things with React, let\u2019s explore what exactly what React is<\/em>.<\/p>\n

Facebook\u2019s definition of React looks something like:<\/p>\n

\u201cReact is a JavaScript library for building user interfaces.\u201d<\/p><\/blockquote>\n

While this billing could be dismissed as trendy jargon, I think it\u2019s actually an excellent description about what the framework actually does!<\/p>\n

React asks you to break up user interfaces into different state-driven components. We then leverage the library to help us transition between these component states. It\u2019s a noticeably different way of thinking when it comes to building the frontend of your application.<\/p>\n

Let\u2019s take a login flow for example:<\/p>\n

    \n
  1. A user visits your site and is presented with the login component.<\/li>\n
  2. If the user enters a correct email\/password, the component then submits that data for authentication.<\/li>\n
  3. Depending on the response it receives from the authentication API, the component responds accordingly.<\/li>\n<\/ol>\n

    When we break up an application into states, there\u2019s a need to also separate each piece of the view into components. Now, components aren\u2019t really a brand new idea in web development. Developers have been breaking their views into reusable pieces for years. In this context, React is simply executing the process of interacting with these reusable views really well.<\/p>\n

    There\u2019s also the matter of the JSX syntax that makes React unique. You can read a basic rundown on JSX here<\/a>. JSX helps us better digest and interact with variable data in our applications.<\/p>\n

    A Technical Example in Bb<\/h2>\n

    Remember that user login flow that I mentioned earlier? Let\u2019s build it!<\/p>\n

    To set up a pretty basic environment to run React in, there\u2019s an excellent piece of documentation<\/a> that I used. I prefer to utilize Facebook\u2019s create-react-app<\/code> package in this article, but you\u2019re free to roll your own solution as well!<\/p>\n

    Looking at App.js<\/h3>\n

    Now to get down to coding. We\u2019re going to start with a focus on App.js<\/code> . This file is where we\u2019re going to define a few classes and functions that will help us design and implement the login flow.<\/p>\n

    Initially, the file will look something like this:<\/p>\n

    App.js<\/code><\/p>\n

    import React, { Component } from 'react';\r\n\/\/ Importing in some of our styling assets.\r\nimport logo from '.\/logo.svg';\r\nimport '.\/App.css';\r\n\r\nclass App extends Component {\r\n    \/\/ When the component is rendered, this is what will appear\r\n  render() {\r\n    return (\r\n      <div className=\"App\">\r\n        <div className=\"App-header\">\r\n          <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n          <h2>React Login Flow<\/h2>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n}\r\n\/\/ Export this into the global namespace\r\nexport default App;<\/pre>\n
    In React, we can design components by declaring them as classes. In the example above, we\u2019re only leveraging the render()<\/code> function to create the HTML logic.<\/p>\n
    From here, we want to create another component that presents the user with a login form, assuming they\u2019re not authenticated.<\/p>\n
    Let\u2019s design the actual login form component first.<\/p>\n
    App.js<\/code><\/p>\n
    class LoginForm extends Component {\r\n  render() {\r\n    return (\r\n      <div className=\"login-form\">\r\n        <input type=\"text\" placeholder=\"email\"><\/input>\r\n        <input type=\"text\" placeholder=\"password\"><\/input>\r\n      <\/div>\r\n    )\r\n  }\r\n}<\/pre>\n
    At initial glance, our login form class is very simple. That\u2019s alright. We\u2019re going to make it a bit more robust in a second. First, we\u2019ll need to render it in our App<\/code> class.<\/p>\n
    App.js<\/code><\/p>\n
    class App extends Component {\r\n  render() {\r\n    return (\r\n      <div className=\"App\">\r\n        <div className=\"App-header\">\r\n          <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n          <h2>React Login Flow<\/h2>\r\n        <\/div>\r\n        <LoginForm \/>\r\n      <\/div>\r\n    );\r\n  }\r\n}<\/pre>\n
    The way we render classes or components in the React, follows the syntax of: <MyComponentClass \/><\/code>.<\/p>\n
    I really like this syntax because it\u2019s clean and pretty straightforward. We can pass in arguments too.<\/p>\n
    Example: <MyComponentClass argument_1=\u201cfoo\u201d argument_2=\u201cbar\u201d \/><\/code>.<\/p>\n
    Now we\u2019re going to add some functionality to our new component.<\/p>\n
    Adding more functionality to our views<\/h3>\n
    So far, we\u2019ve only mapped out classes that render certain sets of generated HTML. In this sense alone, React is an excellent tool for designing client-side views. However, there\u2019s so much more to the functionality that React offers.<\/p>\n
    Let\u2019s focus on updating the LoginForm<\/code> class that we just wrote.<\/p>\n
    App.js<\/code><\/p>\n
    \/\/ Previous code \r\nclass LoginForm extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    \/\/ Sets the default state of the Component.\r\n    this.state = {\r\n      email: '',\r\n      password: ''\r\n    };\r\n\r\n    \/\/ Tells the handleInputChange method to bind \/ listen for events on this\r\n    \/\/ Component.\r\n    this.handleInputChange = this.handleInputChange.bind(this);\r\n  }\r\n\r\n  \/\/ Takes a change event, looks for a target's value, then updates the Component\r\n  \/\/ state to reflect those event changes.\r\n  handleInputChange(event) {\r\n    const target = event.target;\r\n    const value = target.value\r\n    const name = target.name;\r\n\r\n    this.setState({\r\n      [name]: value\r\n    });\r\n  }\r\n\r\n  \/\/ Triggered when we submit our form. Taking values and letting us know\r\n  \/\/ what they are. Eventually should be extended to communicate with authentication\r\n  \/\/ API.\r\n  handleSubmit(event) {\r\n    console.log(\"Email: \" + event.target.email.value);\r\n    console.log(\"Password: \" + event.target.password.value);\r\n    event.preventDefault();\r\n  }\r\n\r\n  \/\/ Renders HTML markdown for our Login Form.\r\n  \/\/ Notice where we call the above methods within the HTML Markup. \r\n  render() {\r\n    return (\r\n      <div className=\"login-form\">\r\n        \r\n      <\/div>\r\n    );\r\n  }\r\n}<\/pre>\n
    There\u2019s a lot of talk about here, so we\u2019re going to break it down into small sections. First up: the constructor.<\/p>\n
    Constructors and you<\/h2>\n
    One aspect of React\u2019s functionality that might stick out to a lot of programmers is its unique use of constructors.<\/p>\n
    constructor(props) {\r\n    super(props);\r\n    \/\/ Sets the default state of the Component.\r\n    this.state = {\r\n      email: '',\r\n      password: ''\r\n    };\r\n\r\n    \/\/ Tells the handleInputChange method to bind \/ listen for events on this\r\n    \/\/ Component.\r\n    this.handleInputChange = this.handleInputChange.bind(this);\r\n  }<\/pre>\n
    If you\u2019ve never dealt with constructors before, don\u2019t panic! We simply leverage the constructor function to initialize our component class while also setting up the required logic to achieve the component\u2019s purpose. Think of it like booting up your phone. We\u2019re just setting things up for use! In our example, we\u2019re setting up handleInputChange<\/code> function.<\/p>\n
    Adding listeners on functionality<\/h2>\n
    With our component class initialized, let\u2019s explore the logic that it\u2019s going to depend on.<\/p>\n
    \/\/ Takes a change event, looks for a target's value, then updates the Component\r\n  \/\/ state to reflect those event changes.\r\n  handleInputChange(event) {\r\n    const target = event.target;\r\n    const value = target.value\r\n    const name = target.name;\r\n\r\n    this.setState({\r\n      [name]: value\r\n    });\r\n  }\r\n\r\n  \/\/ Triggered when we submit our form. Taking values and letting us know\r\n  \/\/ what they are. Eventually should be extended to communicate with authentication\r\n  \/\/ API.\r\n  handleSubmit(event) {\r\n    console.log(\"Email: \" + event.target.email.value);\r\n    console.log(\"Password: \" + event.target.password.value);\r\n    event.preventDefault();\r\n  }<\/pre>\n
    The comments in the code block explain a bit about the code\u2019s purpose. However, there are a few more things to note here: For one, there\u2019s this idea of an event<\/code> object. We\u2019re forwarding some form of a JavaScript event (be it a click, input change, hover, etc.) and probing it for information.<\/p>\n
    In the case of our example, we\u2019re seeing what the state of the email and password fields are at the time of submission. We need the event to track the changes of the input fields and then update the Component state to reflect that.<\/p>\n
    Trying things out<\/h2>\n
    By now, we should have the resources needed to input an email\/password combination and have the results printed in the console, upon submission. What we\u2019re wanting to exercise with this demonstration is that we\u2019re evaluating our LoginForm<\/code> Component state as we interact with it.<\/p>\n
    What\u2019s The Point of React?<\/h2>\n
    So, what\u2019s the big deal about all of this?<\/p>\n
    As we saw with our example, React can be a bit intimidating at first. There are a few new ideas presented, as well as refined old ones. While diving into the technical functionality can be a ton of fun, there are some common themes that emerge from usage.<\/p>\n
    React makes you think about design<\/h3>\n
    A lot of programmers aren\u2019t good at design. While not every programmer should be a designer (and vice versa), it\u2019s incredibly useful to think about designing something before implementing it.<\/p>\n
    React asks you to sit down and create each piece of your application in terms of HTML and functionality. This thought process helps you break down and design a step at a time. These designed components should hopefully be reusable in the long run as well. It could be said that designing in React takes longer, but you\u2019re gifted with concise and functional building blocks at the end.<\/p>\n
    React is really well engineered<\/h3>\n
    In the development community, it\u2019s no secret that React has been executing really well on all of its technical ideas. When I first explored the framework, I was frustrated with this lack of a application structure. However, awesome ideas like Redux have helped solve my frustrations.<\/p>\n
    React has also learned what they do best and how to somehow better execute on those strengths. So many frameworks and libraries live and die by responding to community feedback. React, in particular, has been able to thrive as time passes. As a social media user, I\u2019m a big fan of the current state of Facebook and Instagram\u2019s current web functionality. I believe a lot of that is due to the growth and continued success of React\u2019s engineering.<\/p>\n
    React is not the only option<\/h3>\n
    In this article, I\u2019ve written a lot of praise for React. The framework is a really unique and acquired taste. Its also not the only option out there. I\u2019m fairly involved with developing EmberJS applications. Ember is way different than React, and at times has been much slower<\/em> than React.<\/p>\n
    However, React\u2019s feature set has driven Ember to keep the pace with React. Other developers might say the same when comparing AngularJS to React. Either way, the prominence of React has lead to the development of better options in the JavaScript community.<\/p>\n
    Again, React isn\u2019t for everyone, but it\u2019s worth understanding. If the concepts and workflow that React encourages strikes a note with you, give it a shot! At the very least, you\u2019ll walk away with a better perspective on how to create awesome user interfaces.<\/p>\n
    \n\n\n\n
    Reference: <\/span><\/td>\nDesigning User Interfaces With React<\/a> from our WCG partner<\/a>\u00a0Taylor Jones at the Codeship Blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is React . React is widely known mainly because of its backing by Facebook. As a result, it has a pretty big footprint on the web. Developers know it, trust …<\/p>\n","protected":false},"author":189,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[463],"class_list":["post-16791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-react-js"],"yoast_head":"\nDesigning User Interfaces With React - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is\" \/>\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.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing User Interfaces With React - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-03T09:15:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-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=\"Taylor Jones\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Taylor Jones\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\"},\"author\":{\"name\":\"Taylor Jones\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/834a8ec3020fc24255939295e44ced69\"},\"headline\":\"Designing User Interfaces With React\",\"datePublished\":\"2017-04-03T09:15:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\"},\"wordCount\":1394,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"React.js\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\",\"name\":\"Designing User Interfaces With React - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2017-04-03T09:15:54+00:00\",\"description\":\"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Designing User Interfaces With React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/834a8ec3020fc24255939295e44ced69\",\"name\":\"Taylor Jones\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/153a5fe534873be386092f34ed78df90ff7208ed8ba34a09d63a9b0abbed4717?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/153a5fe534873be386092f34ed78df90ff7208ed8ba34a09d63a9b0abbed4717?s=96&d=mm&r=g\",\"caption\":\"Taylor Jones\"},\"description\":\"Taylor Jones is a software chef at IZEA\",\"url\":\"https:\/\/www.webcodegeeks.com\/author\/taylor-jones\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Designing User Interfaces With React - Web Code Geeks - 2026","description":"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is","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.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/","og_locale":"en_US","og_type":"article","og_title":"Designing User Interfaces With React - Web Code Geeks - 2026","og_description":"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-04-03T09:15:54+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Taylor Jones","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Taylor Jones","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/"},"author":{"name":"Taylor Jones","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/834a8ec3020fc24255939295e44ced69"},"headline":"Designing User Interfaces With React","datePublished":"2017-04-03T09:15:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/"},"wordCount":1394,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["React.js"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/","name":"Designing User Interfaces With React - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2017-04-03T09:15:54+00:00","description":"There are a lot of JavaScript frameworks to choose from in the modern development landscape. One of the most unique and popular of these frameworks is","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/designing-user-interfaces-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Designing User Interfaces With React"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/834a8ec3020fc24255939295e44ced69","name":"Taylor Jones","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/153a5fe534873be386092f34ed78df90ff7208ed8ba34a09d63a9b0abbed4717?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/153a5fe534873be386092f34ed78df90ff7208ed8ba34a09d63a9b0abbed4717?s=96&d=mm&r=g","caption":"Taylor Jones"},"description":"Taylor Jones is a software chef at IZEA","url":"https:\/\/www.webcodegeeks.com\/author\/taylor-jones\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=16791"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/16791\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=16791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=16791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=16791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}