{"id":239433,"date":"2016-03-18T06:46:05","date_gmt":"2016-03-18T13:46:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=239433"},"modified":"2017-02-04T07:12:50","modified_gmt":"2017-02-04T14:12:50","slug":"147-starting-react-powered-comment-form","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/147-starting-react-powered-comment-form\/","title":{"rendered":"#147: Starting a React-Powered Comment Form"},"content":{"rendered":"<p>In this pairing screencast, <a href=\"https:\/\/css-tricks.com\/author\/sdrasner\/\">Sarah Drasner<\/a> joins me and guides me through some of my very first learnings of React. We tackle some &#8220;real world&#8221; style functionality: a comment form. <\/p>\n<p>This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React (or at least, it seems to me). For example, a master &#8220;App&#8221; that deals with the <code>state<\/code> (our big &#8220;state&#8221; thing is the comments themselves) and components that deal with rendering the view (for example, the comment form is a component and each comment is a component). <\/p>\n<p>Then we got into lots of littler React thingies, but also huge things to understand in React-land, like:<\/p>\n<ul>\n<li><code>props<\/code> &#8211; a way to pass data between components. They looks like HTML attributes when you send them, and arrive as an object in the form of this.props.<\/li>\n<li><code>refs<\/code> &#8211; how you snag data out of the form element we created.<\/li>\n<li><code>keys<\/code> &#8211; a way to uniquely identify a component when it&#8217;s repeated. We&#8217;re repeating comments here (there can be multiple comments), so if we were to have functionality that could change any of them, having a key is what makes React efficient (it can just replace that single comment instead of all of them).<\/li>\n<\/ul>\n<p>Plus a ton more!<\/p>\n<p>Here&#8217;s the demo we worked on:<\/p>\n<p data-height=\"583\" style=\"height: 583px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"YqwXQG\" data-default-tab=\"js,result\" data-user=\"chriscoyier\" data-embed-version=\"2\" data-pen-title=\"Starting a React-Powered Comment Form\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/chriscoyier\/pen\/YqwXQG\/\" rel=\"noopener\">Starting a React-Powered Comment Form<\/a> by Chris Coyier  (<a href=\"http:\/\/codepen.io\/chriscoyier\" rel=\"noopener\">@chriscoyier<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>How do you level up your React learning beyond this? <a href=\"https:\/\/css-tricks.com\/learning-react-router\/\">Start here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this pairing screencast, Sarah Drasner joins me and guides me through some of my very first learnings of React. We tackle some &#8220;real world&#8221; style functionality: a comment form. This turned out to be a pretty useful bit of UI to work with, as it required a lot of things rather fundamental to React [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[689,557],"acf":[],"jetpack-related-posts":[{"id":283102,"url":"https:\/\/css-tricks.com\/video-screencasts\/170-watch-an-amateur-spin-up-a-react-babel-webpack-css-modules-project\/","url_meta":{"origin":239433,"position":0},"title":"#170: Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project","date":"March 4, 2019","format":false,"excerpt":"Fair warning! This isn't a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don't. Sometimes it's my fault.\u2026","rel":"","context":"In \"babel\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/react-and-friends.jpg?fit=1200%2C794&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330211,"url":"https:\/\/css-tricks.com\/video-screencasts\/199-messing-with-jsx\/","url_meta":{"origin":239433,"position":1},"title":"#199: Messing with JSX","date":"December 9, 2020","format":false,"excerpt":"I probably should have learned this long ago, but alas, here we are. Turns out you can tell what function you want JSX to use. Yep, JSX really only has one primary transformation that it does. It turns angle brackets in JavaScript into a function call. So, if you write\u2026","rel":"","context":"In \"jsx\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/jsx-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270730,"url":"https:\/\/css-tricks.com\/video-screencasts\/159-learning-vue\/","url_meta":{"origin":239433,"position":2},"title":"#159: Learning Vue","date":"May 12, 2018","format":false,"excerpt":"Sarah Drasner and I dig into Vue! Vue is a very popular JavaScript framework that is absolutely exploding. Sarah is on the core team and is about the most passionate fan of Vue I've ever known. Watchers of our videos might recall Sarah and I doing a video on React\u2026","rel":"","context":"In \"vue\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376813,"url":"https:\/\/css-tricks.com\/wordpress-block-theme-guide\/","url_meta":{"origin":239433,"position":3},"title":"WordPress Block Themes CSS and Style Settings Guide","date":"January 31, 2023","format":false,"excerpt":"Managing CSS in WordPress has dramatically changed since full-site editing features were introduced to block themes. This guide is geared toward block themes and how to configure them, from enabling editor features and controls to defining theme-wide CSS and customizaing the appearance of specific blocks.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":330863,"url":"https:\/\/css-tricks.com\/video-screencasts\/201-doing-booping\/","url_meta":{"origin":239433,"position":4},"title":"#201: Doing Booping","date":"December 21, 2020","format":false,"excerpt":"Joshua Comeau crowd-coined the term \"boop\" (high five, Adam Kuhn). These are sorta like hover\/focus states, except that they aren't. Your thingies \u2014 things like links, buttons, etc. \u2014 should still have those states. A \"boop\" is a more whimsical effect that runs once when the mouse enters it, finishes\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/boop-thumb.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":297910,"url":"https:\/\/css-tricks.com\/video-screencasts\/176-working-with-framer-motion\/","url_meta":{"origin":239433,"position":5},"title":"#176: Working with Framer Motion","date":"October 28, 2019","format":false,"excerpt":"Matt Perry from Framer and I take a look at the React animation library Framer Motion. First, we take a look at how simple the API is. You control everything very declaratively through props on elements in your JSX. Controlling animation at this layer is very intuitive and connected to\u2026","rel":"","context":"In \"animation\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/70574400-9e6a-11e9-8708-22d4bf4c3322.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/239433"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=239433"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/239433\/revisions"}],"predecessor-version":[{"id":250958,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/239433\/revisions\/250958"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=239433"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=239433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}