Video Tutorial Comment module: React


In this second chapter we will create the interface part of our comments module based on the React library.

Before you begin it is important to think about the reason behind the use of the library. For this comment module there will be a lot of user actions and their actions result in changes at the interface level. To simplify the transformations and manipulation of the DOM we will use React. It will allow us to represent our interface as a function of the state and we will thus be able to concentrate on the change of this state (it is React who will take care of synchronizing the dom and it will thus offer us an additional level of abstraction ). We could use Preact here if we want a lighter alternative and if we don't plan to use React in the rest of our application.

Hooks

For this kind of module we will need to communicate with the API and perform operations that are very generic. Typically we will call a URL, display a spinner while loading, and then display the results. This logic being very generic we will be able to extract it in layers that we can then reuse throughout our project.

function Comments ({post, user}) {
  // This hook allows to manage all the recovery part independently of the component
  const {items: comments, setItems: setComments, loading, count, hasMore} = usePaginatedFetch ('/ api / comments? post =' + post)

  // We manage the mutations specific to our component (but we could abstract it in a function if this logic is repeated)
  const addComment = useCallback (comment => {
    setComments (comments => (comment, ... comments))
  }, ())
  const deleteComment = useCallback (comment => {
    setComments (comments => comments.filter (c => c! == comment))
  }, ())
  const updateComment = useCallback ((newComment, oldComment) => {
    setComments (comments => comments.map (c => c === oldComment? newComment: c))
  }, ())

  // We make the component
  return 
{user && <CommentForm post={post} onComment={addComment}/>}     {comments.map (c => <Comment key={c.id} comment={c} canEdit={c.author.id === user} onDelete={deleteComment} onUpdate={updateComment} /> )}     {hasMore && <button disabled={loading} className="btn btn-primary" onClick={load}>Load more comment</button> } </div> } </code></pre> <p>The goal of hooks is to be able to separate the mutations of the state of the interface part.</p> </p></div> </p></div> </div> <footer> <div class="td-post-source-tags"> </div> <div class="td-post-sharing-bottom"><div class="td-post-sharing-classic"><iframe frameBorder="0" src="https://www.facebook.com/plugins/like.php?href=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:105px; height:21px; background-color:transparent;"></iframe></div><div id="td_social_sharing_article_bottom" class="td-post-sharing td-ps-bg td-ps-notext td-post-sharing-style1 "><div class="td-post-sharing-visible"><div class="td-social-sharing-button td-social-sharing-button-js td-social-handler td-social-share-text"> <div class="td-social-but-icon"><i class="td-icon-share"></i></div> <div class="td-social-but-text">Share</div> </div><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fmotivationjob.com%2Fadvices-skills%2Fdevelopper%2Fvideo-tutorial-comment-module-react%2F"> <div class="td-social-but-icon"><i class="td-icon-facebook"></i></div> <div class="td-social-but-text">Facebook</div> </a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-twitter" href="https://twitter.com/intent/tweet?text=Video+Tutorial+Comment+module%3A+React&url=https%3A%2F%2Fmotivationjob.com%2Fadvices-skills%2Fdevelopper%2Fvideo-tutorial-comment-module-react%2F&via=MotivationJob+-+Creativity%2C+Passion%2C+Possibilities"> <div class="td-social-but-icon"><i class="td-icon-twitter"></i></div> <div class="td-social-but-text">Twitter</div> </a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-pinterest" href="https://pinterest.com/pin/create/button/?url=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&media=https://motivationjob.com/wp-content/uploads/2020/05/Video-Tutorial-Comment-module-React.jpg&description=Video+Tutorial+Comment+module%3A+React"> <div class="td-social-but-icon"><i class="td-icon-pinterest"></i></div> <div class="td-social-but-text">Pinterest</div> </a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-whatsapp" href="whatsapp://send?text=Video+Tutorial+Comment+module%3A+React %0A%0A https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/"> <div class="td-social-but-icon"><i class="td-icon-whatsapp"></i></div> <div class="td-social-but-text">WhatsApp</div> </a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/&title=Video+Tutorial+Comment+module%3A+React"> <div class="td-social-but-icon"><i class="td-icon-linkedin"></i></div> <div class="td-social-but-text">Linkedin</div> </a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-mail" href="mailto:?subject=Video Tutorial Comment module: React&body=https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/"> <div class="td-social-but-icon"><i class="td-icon-mail"></i></div> <div class="td-social-but-text">Email</div> </a></div><div class="td-social-sharing-hidden"><ul class="td-pulldown-filter-list"></ul><a class="td-social-sharing-button td-social-handler td-social-expand-tabs" href="#" data-block-uid="td_social_sharing_article_bottom"> <div class="td-social-but-icon"><i class="td-icon-plus td-social-expand-tabs-icon"></i></div> </a></div></div></div> <div class="td-author-name vcard author" style="display: none"><span class="fn"><a href="https://motivationjob.com/author/admin/">admin</a></span></div> <span class="td-page-meta" itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="admin"></span><meta itemprop="datePublished" content="2020-05-20T22:33:21+00:00"><meta itemprop="dateModified" content="2020-05-20T22:33:21+10:00"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://motivationjob.com/advices-skills/developper/video-tutorial-comment-module-react/"/><span class="td-page-meta" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span class="td-page-meta" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://motivationjob.com/wp-content/uploads/2019/05/logo-1.png"></span><meta itemprop="name" content="MotivationJob - Creativity, Passion, Possibilities"></span><meta itemprop="headline " content="Video Tutorial Comment module: React"><span class="td-page-meta" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="https://motivationjob.com/wp-content/uploads/2020/05/Video-Tutorial-Comment-module-React.jpg"><meta itemprop="width" content="1920"><meta itemprop="height" content="1080"></span> </footer> <div class="td_block_wrap td_block_related_posts td_uid_2_5f01d2ac5ddeb_rand td_with_ajax_pagination td-pb-border-top td_block_template_4" data-td-block-uid="td_uid_2_5f01d2ac5ddeb" ><script>var block_td_uid_2_5f01d2ac5ddeb = new tdBlock(); block_td_uid_2_5f01d2ac5ddeb.id = "td_uid_2_5f01d2ac5ddeb"; block_td_uid_2_5f01d2ac5ddeb.atts = '{"limit":3,"ajax_pagination":"next_prev","live_filter":"cur_post_same_categories","td_ajax_filter_type":"td_custom_related","class":"td_uid_2_5f01d2ac5ddeb_rand","td_column_number":3,"live_filter_cur_post_id":2397,"live_filter_cur_post_author":"1","block_template_id":"","header_color":"","ajax_pagination_infinite_stop":"","offset":"","td_ajax_preloading":"","td_filter_default_txt":"","td_ajax_filter_ids":"","el_class":"","color_preset":"","border_top":"","css":"","tdc_css":"","tdc_css_class":"td_uid_2_5f01d2ac5ddeb_rand","tdc_css_class_style":"td_uid_2_5f01d2ac5ddeb_rand_style"}'; block_td_uid_2_5f01d2ac5ddeb.td_column_number = "3"; block_td_uid_2_5f01d2ac5ddeb.block_type = "td_block_related_posts"; block_td_uid_2_5f01d2ac5ddeb.post_count = "3"; block_td_uid_2_5f01d2ac5ddeb.found_posts = "141"; block_td_uid_2_5f01d2ac5ddeb.header_color = ""; block_td_uid_2_5f01d2ac5ddeb.ajax_pagination_infinite_stop = ""; block_td_uid_2_5f01d2ac5ddeb.max_num_pages = "47"; tdBlocksArray.push(block_td_uid_2_5f01d2ac5ddeb); </script><h4 class="td-related-title td-block-title"><a id="td_uid_3_5f01d2ac60912" class="td-related-left td-cur-simple-item" data-td_filter_value="" data-td_block_id="td_uid_2_5f01d2ac5ddeb" href="#">RELATED ARTICLES</a><a id="td_uid_4_5f01d2ac60916" class="td-related-right" data-td_filter_value="td_related_more_from_author" data-td_block_id="td_uid_2_5f01d2ac5ddeb" href="#">MORE FROM AUTHOR</a></h4><div id=td_uid_2_5f01d2ac5ddeb class="td_block_inner"> <div class="td-related-row"> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/video-tutorial-how-to-test/" rel="bookmark" class="td-image-wrap" title="Video Tutorial How to test?"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="Video Tutorial How to test?" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2020/07/Video-Tutorial-How-to-test-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/video-tutorial-how-to-test/" rel="bookmark" title="Video Tutorial How to test?">Video Tutorial How to test?</a></h3> </div> </div> </div> <!-- ./td-related-span4 --> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/react-tutorial-tp-recipes-introduction/" rel="bookmark" class="td-image-wrap" title="React Tutorial: TP Recipes: Introduction"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="React Tutorial: TP Recipes: Introduction" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2020/07/React-Tutorial-TP-Recipes-Introduction-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/react-tutorial-tp-recipes-introduction/" rel="bookmark" title="React Tutorial: TP Recipes: Introduction">React Tutorial: TP Recipes: Introduction</a></h3> </div> </div> </div> <!-- ./td-related-span4 --> <div class="td-related-span4"> <div class="td_module_related_posts td-animation-stack td_mod_related_posts"> <div class="td-module-image"> <div class="td-module-thumb"><a href="https://motivationjob.com/advices-skills/developper/video-tutorial-validate-properties/" rel="bookmark" class="td-image-wrap" title="Video Tutorial Validate properties"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAACWAQMAAACCSQSPAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABpJREFUWMPtwQENAAAAwiD7p7bHBwwAAAAg7RD+AAGXD7BoAAAAAElFTkSuQmCC" alt="" title="Video Tutorial Validate properties" data-type="image_tag" data-img-url="https://motivationjob.com/wp-content/uploads/2020/07/Video-Tutorial-Validate-properties-218x150.jpg" width="218" height="150" /></a></div> </div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="https://motivationjob.com/advices-skills/developper/video-tutorial-validate-properties/" rel="bookmark" title="Video Tutorial Validate properties">Video Tutorial Validate properties</a></h3> </div> </div> </div> <!-- ./td-related-span4 --></div><!--./row-fluid--></div><div class="td-next-prev-wrap"><a href="#" class="td-ajax-prev-page ajax-page-disabled" id="prev-page-td_uid_2_5f01d2ac5ddeb" data-td_block_id="td_uid_2_5f01d2ac5ddeb"><i class="td-icon-font td-icon-menu-left"></i></a><a href="#" class="td-ajax-next-page" id="next-page-td_uid_2_5f01d2ac5ddeb" data-td_block_id="td_uid_2_5f01d2ac5ddeb"><i class="td-icon-font td-icon-menu-right"></i></a></div></div> <!-- ./block --> <div class="comments" id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">LEAVE A REPLY <small><a rel="nofollow" id="cancel-comment-reply-link" href="/advices-skills/developper/video-tutorial-comment-module-react/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://motivationjob.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <div class="clearfix"></div> <div class="comment-form-input-wrap td-form-comment"> <textarea placeholder="Comment:" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> <div class="td-warning-comment">Please enter your comment!</div> </div> <div class="comment-form-input-wrap td-form-author"> <input class="" id="author" name="author" placeholder="Name:*" type="text" value="" size="30" aria-required='true' /> <div class="td-warning-author">Please enter your name here</div> </div> <div class="comment-form-input-wrap td-form-email"> <input class="" id="email" name="email" placeholder="Email:*" type="text" value="" size="30" aria-required='true' /> <div class="td-warning-email-error">You have entered an incorrect email address!</div> <div class="td-warning-email">Please enter your email address here</div> </div> <div class="comment-form-input-wrap td-form-url"> <input class="" id="url" name="url" placeholder="Website:" type="text" value="" size="30" /> </div> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2397' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> </div> <!-- /.content --> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <!-- .no sidebar --> </div> </div> </div> <!-- /.td-pb-row --> </article> <!-- /.post --> </div> <!-- /.td-container --> </div> <!-- /.td-main-content-wrap --> <!-- Instagram --> <!-- Footer --> <div class="td-footer-wrapper td-footer-container td-container-wrap td-footer-template-14 td_stretch_container td_stretch_content_1400"> <div class="td-container td-footer-bottom-full"> <div class="td-pb-row"> <div class="td-pb-span3"><aside class="footer-logo-wrap"><a href="https://motivationjob.com/"><img class="td-retina-data" src="https://motivationjob.com/wp-content/uploads/2019/05/logo-mobile.png" data-retina="https://motivationjob.com/wp-content/uploads/2019/05/logo-mobile-retina.png" alt="MotivationJob is focussed on empowering entrepreneurs worldwide to do greater things and build awesome companies. We do this by collecting and curating knowledge, inspiration and background business stories from around the web." title="MotivationJob : leading Business Inspiration and creativity Magazine, we provide a handpicked content, lists, infographics and more to help you TO SUCCESS in your business." width="140" /></a></aside></div><div class="td-pb-span5"><aside class="footer-text-wrap"><div class="block-title"><span>ABOUT US</span></div>MotivationJob is focussed on empowering entrepreneurs worldwide to do greater things and build awesome companies. We do this by collecting and curating knowledge, inspiration and background business stories from around the web.</aside></div><div class="td-pb-span4"><aside class="footer-social-wrap td-social-style-2"><div class="block-title"><span>FOLLOW US</span></div> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Facebook"> <i class="td-icon-font td-icon-facebook"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Instagram"> <i class="td-icon-font td-icon-instagram"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Twitter"> <i class="td-icon-font td-icon-twitter"></i> </a> </span> <span class="td-social-icon-wrap"> <a target="_blank" href="#" title="Youtube"> <i class="td-icon-font td-icon-youtube"></i> </a> </span></aside></div> </div> </div> </div> <!-- Sub Footer --> <div class="td-sub-footer-container td-container-wrap td_stretch_container td_stretch_content_1400"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span td-sub-footer-menu"> <div class="menu-footer-container"><ul id="menu-footer" class="td-subfooter-menu"><li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first td-menu-item td-normal-menu menu-item-125"><a href="https://motivationjob.com/about-us/">About us</a></li> <li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy td-menu-item td-normal-menu menu-item-126"><a href="https://motivationjob.com/privacy-policy/">Privacy Policy</a></li> <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page td-menu-item td-normal-menu menu-item-127"><a href="https://motivationjob.com/contact/">Contact us</a></li> </ul></div> </div> <div class="td-pb-span td-sub-footer-copy"> © MotivationJob - Creativity, Passion, Possibilities </div> </div> </div> </div> </div><!--close td-outer-wrap--> <!-- Theme: Newspaper by tagDiv.com 2019 Version: 9.7.1 (rara) Deploy mode: deploy uid: 5f01d2ac6a6e4 --> <script type='text/javascript' src='https://motivationjob.com/wp-content/plugins/td-composer/legacy/common/wp_booster/js_dev/tdModalPostImages.js?ver=9.7.1'></script> <script type='text/javascript' src='https://motivationjob.com/wp-includes/js/underscore.min.js?ver=1.8.3'></script> <script type='text/javascript' src='https://motivationjob.com/wp-content/plugins/td-cloud-library/assets/js/js_posts_autoload.min.js?ver=fd01b606eadffe2d142186a0c798c0e3'></script> <script type='text/javascript' src='https://motivationjob.com/wp-content/themes/Newspaper/js/tagdiv_theme.min.js?ver=9.7.1'></script> <script type='text/javascript' src='https://motivationjob.com/wp-includes/js/comment-reply.min.js?ver=5.2.7'></script> <script type='text/javascript' src='https://motivationjob.com/wp-content/plugins/td-cloud-library/assets/js/js_files_for_front.min.js?ver=fd01b606eadffe2d142186a0c798c0e3'></script> <script type='text/javascript' src='https://motivationjob.com/wp-includes/js/wp-embed.min.js?ver=5.2.7'></script> <!-- JS generated by theme --> <script> (function(){ var html_jquery_obj = jQuery('html'); if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) { var path = 'https://motivationjob.com/wp-content/themes/Newspaper/style.css'; jQuery.get(path, function(data) { var str_split_separator = '#td_css_split_separator'; var arr_splits = data.split(str_split_separator); var arr_length = arr_splits.length; if (arr_length > 1) { var dir_path = 'https://motivationjob.com/wp-content/themes/Newspaper'; var splited_css = ''; for (var i = 0; i < arr_length; i++) { if (i > 0) { arr_splits[i] = str_split_separator + ' ' + arr_splits[i]; } //jQuery('head').append('<style>' + arr_splits[i] + '</style>'); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) { return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm,''); }); splited_css += "<style>" + formated_str + "</style>"; } var td_theme_css = jQuery('link#td-theme-css'); if (td_theme_css.length) { td_theme_css.after(splited_css); } } }); } })(); </script> <script type='text/javascript' src='https://stats.wp.com/e-202027.js' async='async' defer='defer'></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:8.3',blog:'162277162',post:'2397',tz:'10',srv:'motivationjob.com'} ]); _stq.push([ 'clickTrackerInit', '162277162', '2397' ]); </script> </body> </html>