Li Hui Blog

Li Hui Blog
在时代的层林尽染中书写时代的年华。效能(2022)
  1. 首页
  2. 未分类
  3. 正文

React 组件示例

1月 6, 2022 576点热度 0人点赞 0条评论

上一节,我们使用 create-react-app 生成示例程序的代码,这一节我们详细介绍下如何进行修改代码

看了一些 React 的书籍,其实 React 使用 JSX 语法,将程序的模块化和抽象做的很好。

我们新建立的程序的目录如下

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

关于目录结构的表述我这里直接引用 Mozilla 的描述

目录 src 是我们花费时间最多的地方,因为它是我们 React 应用源码存放的目录。

目录 public 包含了开发应用时浏览器会读取的文件,其中最重要的就是 index.html。React 将目录 src 中的代码嵌入这个文件,从而浏览器才能运行此文件。 index.html 中的有些内容关乎 create-react-app 的运作,因此除非你知道自己在做什么样的修改,否则不建议编辑这个文件。当然,你可以修改 index.html 中的 </a> 元素的内容来表现此应用程序通俗易懂的名称。</p> <p>package.json 与 react 工程并无直接关联,这个是 node modules 的管理的文件。其他的 node 版本管理的软件都会有这个文件。</p> <p>React 中最小的就是组件,那何为组件呢,组件的大小如何界定呢?</p> <h2 ><a name="toc-1"></a>何为组件</h2> <p>组件是组成应用程序的最小单元,使用组件可以大大减轻软件开发的工作,提高软件开发的效率,一般组件是实现单一功能的</p> <p>下面以《深入 React 技术栈》中的例子为例讲述组件元素的构建</p> <p>下面是一个带有 <code>btn btn-blue</code> 的按钮,且其中有 em 元素,且其中有字符串 Confirm</p> <pre><code class="language-bash line-numbers"><button class="btn btn-blue"> <em>Confirm</em> </button> </code></pre> <p>若转移为 Json 对象如下</p> <pre><code class="language-js line-numbers">{ type: 'button', props: { className: 'btn btn-blue', children: [{ type: 'em', props: { children: 'Confirm' } }] } } </code></pre> <p>转移为组件元素封装</p> <pre><code class="language-js line-numbers">const Button = ({color,text}) =>{ return { type: 'button', props: { className: `btn btn - $ { color }`, children: { type: 'em', props: { children: text, }, }, }, }; } </code></pre> <p>由此我们就有了第一个组件 <code>Button</code></p> <p>参考</p> <ol> <li><a class="wp-editor-md-post-content-link" href="https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started" title="Mozilla" target="_blank" rel="nofollow" >https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started</a></li> <li>《深入 React 技术栈》</li> </ol> </div> <div class="copyright"><span class="text-center">本作品采用 知识共享署名 4.0 国际许可协议 进行许可</span></div> <div class="footer clearfix"> <div class="tags float-left"> <span>标签:</span> <a href="https://lihui.net/tag/react" rel="tag">react</a> </div> <div class="tool float-right d-none d-lg-block"> <span>最后更新:1月 6, 2022</span> </div> </div> </div> <div class="toolbar clearfix"> <div class="meta float-md-left"> <img src="https://cn.gravatar.com/avatar/ab966a944a633e90f634ac479ad8ce84?s=96&d=mm&r=g"> <p class="name">Li Hui</p> <p class="motto mb-0">这个人很懒,什么都没留下</p> </div> <div class="share float-md-right text-center"> <a href="javascript:;" id="thumbs" data-action="love" data-id="124" role="button" class="btn btn-thumbs "><i class="kicon i-like"></i><span class="ml-1">点赞</span></a> </div> </div> <nav class="navigation post-navigation clearfix" role="navigation"> <div class="nav-previous clearfix"><a title="如何搭建第一个 React 程序" href="https://lihui.net/how-to-create-first-react-app.html">< 上一篇</a></div><div class="nav-next"><a title="React JSX语法再实践" href="https://lihui.net/react-jsx-re-action.html">下一篇 ></a></div> </nav> <div class="comments" id="comments"> <h3 class="title">文章评论</h3> <div class="list"> </div> <div id="commentpage" class="nav text-center my-3"> </div> <div id="respond" class="comment-respond mt-2"> <form id="commentform" name="commentform" action="https://lihui.net/wp-comments-post.php" method="post"> <div class="comment-form"> <div class="comment-info mb-3 row"> <div class="col-md-6 comment-form-author"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="kicon i-user"></i></span> </div> <input class="form-control" id="author" placeholder="昵称" name="author" type="text" value=""> </div> </div> <div class="col-md-6 mt-3 mt-md-0 comment-form-email"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="kicon i-cemail"></i></span> </div> <input id="email" class="form-control" name="email" placeholder="邮箱" type="email" value=""> </div> </div> <div class="col-md-6 mt-3 comment-form-author"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="kicon i-url"></i></span> </div> <input class="form-control" id="author" placeholder="网址" name="url" type="url" value=""> </div> </div> </div> <div class="comment-textarea"> <textarea class="form-control" id="comment" name="comment" rows="7" required="required"></textarea> <div class="text-bar clearfix"> <div class="tool float-left"> <a class="addbtn" href="#" id="addsmile"><i class="kicon i-face"></i></a> <div class="smile"> <div class="clearfix"> <a href="javascript:grin(':razz:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/razz.png" alt="" class="d-block"/></a> <a href="javascript:grin(':evil:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/evil.png" alt="" class="d-block"/></a> <a href="javascript:grin(':exclaim:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/exclaim.png" alt="" class="d-block"/></a> <a href="javascript:grin(':smile:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/smile.png" alt="" class="d-block"/></a> <a href="javascript:grin(':redface:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/redface.png" alt="" class="d-block"/></a> <a href="javascript:grin(':biggrin:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/biggrin.png" alt="" class="d-block"/></a> <a href="javascript:grin(':eek:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/eek.png" alt="" class="d-block"/></a> <a href="javascript:grin(':confused:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/confused.png" alt="" class="d-block"/></a> <a href="javascript:grin(':idea:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/idea.png" alt="" class="d-block"/></a> <a href="javascript:grin(':lol:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/lol.png" alt="" class="d-block"/></a> <a href="javascript:grin(':mad:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/mad.png" alt="" class="d-block"/></a> <a href="javascript:grin(':twisted:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/twisted.png" alt="" class="d-block"/></a> <a href="javascript:grin(':rolleyes:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/rolleyes.png" alt="" class="d-block"/></a> <a href="javascript:grin(':wink:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/wink.png" alt="" class="d-block"/></a> <a href="javascript:grin(':cool:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/cool.png" alt="" class="d-block"/></a> <a href="javascript:grin(':arrow:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/arrow.png" alt="" class="d-block"/></a> <a href="javascript:grin(':neutral:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/neutral.png" alt="" class="d-block"/></a> <a href="javascript:grin(':cry:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/cry.png" alt="" class="d-block"/></a> <a href="javascript:grin(':mrgreen:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/mrgreen.png" alt="" class="d-block"/></a> <a href="javascript:grin(':drooling:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/drooling.png" alt="" class="d-block"/></a> <a href="javascript:grin(':persevering:')"><img src="https://lihui.net/wp-content/themes/kratos-4.1.2/assets/img/smilies/persevering.png" alt="" class="d-block"/></a> </div> </div> </div> <div class="float-right"> <a rel="nofollow" id="cancel-comment-reply-link" href="/create-react-component.html#respond" style="display:none;">取消回复</a> <input name="submit" type="submit" id="submit" class="btn btn-primary" value="提交评论"> </div> </div> </div> </div> <input type='hidden' name='comment_post_ID' value='124' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> <p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="e69813e8f1" /></p><p style="display: none !important;"><label>Δ<textarea name="ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_1" name="ak_js" value="97"/><script>document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() );</script></p> </form> </div> </div> </div> <div class="col-lg-4 sidebar sticky-sidebar d-none d-lg-block"> <div class="widget w-about"><div class="background" style="background:url(https://cdn.seatonjiang.com/kratos/4.1.2/assets/img/about-background.png) no-repeat center center;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div><div class="wrapper text-center"><a href="https://lihui.net/wp-login.php"><img src="https://cn.gravatar.com/avatar/ab966a944a633e90f634ac479ad8ce84?s=300&d=mm&r=g"></a></div><div class="textwidget text-center"><p class="username">Li Hui</p><p class="about">这个人很懒,什么都没留下</p></div></div><div class="widget widget_archive"><div class="title">归档</div> <ul> <li><a href='https://lihui.net/2022/10'>2022年10月<span> / 1篇</span></a></li> <li><a href='https://lihui.net/2022/06'>2022年6月<span> / 1篇</span></a></li> <li><a href='https://lihui.net/2022/01'>2022年1月<span> / 6篇</span></a></li> <li><a href='https://lihui.net/2021/02'>2021年2月<span> / 1篇</span></a></li> <li><a href='https://lihui.net/2021/01'>2021年1月<span> / 8篇</span></a></li> <li><a href='https://lihui.net/2020/12'>2020年12月<span> / 1篇</span></a></li> <li><a href='https://lihui.net/2020/11'>2020年11月<span> / 2篇</span></a></li> <li><a href='https://lihui.net/2020/09'>2020年9月<span> / 23篇</span></a></li> </ul> </div><div class="widget widget_categories"><div class="title">分类</div> <ul> <li class="cat-item cat-item-7"><a href="https://lihui.net/category/git%e7%b3%bb%e5%88%97">Git系列<span> / 6篇</span></a> </li> <li class="cat-item cat-item-20"><a href="https://lihui.net/category/linux">Linux<span> / 10篇</span></a> <ul class='children'> <li class="cat-item cat-item-23"><a href="https://lihui.net/category/linux/cli%e5%ba%94%e7%94%a8">CLI应用<span> / 2篇</span></a> </li> <li class="cat-item cat-item-43"><a href="https://lihui.net/category/linux/docker">Docker<span> / 1篇</span></a> </li> </ul> </li> <li class="cat-item cat-item-16"><a href="https://lihui.net/category/shell">Shell<span> / 2篇</span></a> </li> <li class="cat-item cat-item-1"><a href="https://lihui.net/category/uncategorized">Uncategorized<span> / 1篇</span></a> </li> <li class="cat-item cat-item-27"><a href="https://lihui.net/category/%e4%bb%8e0%e5%88%b01">从0到1<span> / 1篇</span></a> </li> <li class="cat-item cat-item-3"><a href="https://lihui.net/category/%e5%8d%9a%e5%ae%a2%e4%bc%98%e5%8c%96">博客优化<span> / 3篇</span></a> </li> <li class="cat-item cat-item-18"><a href="https://lihui.net/category/%e5%90%84%e7%b3%bb%e5%88%97%e6%80%bb%e7%ab%a0%e8%8a%82">各系列总章节<span> / 1篇</span></a> </li> <li class="cat-item cat-item-5"><a href="https://lihui.net/category/%e5%91%a8%e5%b9%b4%e6%80%bb%e7%bb%93">周年总结<span> / 1篇</span></a> </li> <li class="cat-item cat-item-12"><a href="https://lihui.net/category/%e5%ae%89%e5%85%a8">安全<span> / 2篇</span></a> </li> <li class="cat-item cat-item-36"><a href="https://lihui.net/category/%e5%b9%b4%e5%ba%a6%e6%80%bb%e7%bb%93">年度总结<span> / 1篇</span></a> </li> <li class="cat-item cat-item-25"><a href="https://lihui.net/category/%e5%b9%b4%e5%ba%a6%e8%ae%a1%e5%88%92">年度计划<span> / 1篇</span></a> </li> <li class="cat-item cat-item-2"><a href="https://lihui.net/category/%e6%84%9f%e6%83%b3">感想<span> / 3篇</span></a> </li> <li class="cat-item cat-item-106"><a href="https://lihui.net/category/%e6%8a%80%e6%9c%af">技术<span> / 2篇</span></a> <ul class='children'> <li class="cat-item cat-item-110"><a href="https://lihui.net/category/%e6%8a%80%e6%9c%af/gocd">gocd<span> / 1篇</span></a> </li> </ul> </li> <li class="cat-item cat-item-30"><a href="https://lihui.net/category/%e6%95%8f%e6%8d%b7%e5%bc%80%e5%8f%91">敏捷开发<span> / 1篇</span></a> </li> <li class="cat-item cat-item-53"><a href="https://lihui.net/category/%e6%9c%aa%e5%88%86%e7%b1%bb-zh">未分类<span> / 6篇</span></a> </li> <li class="cat-item cat-item-97"><a href="https://lihui.net/category/%e7%9f%a5%e8%af%86">知识<span> / 1篇</span></a> </li> <li class="cat-item cat-item-9"><a href="https://lihui.net/category/%e8%af%bb%e4%b9%a6">读书<span> / 3篇</span></a> </li> </ul> </div> </div> </div> </div> </div> <div class="k-footer"> <div class="f-toolbox"> <div class="gotop "> <div class="gotop-btn"> <span class="kicon i-up"></span> </div> </div> <div class="search"> <span class="kicon i-find"></span> <form class="search-form" role="search" method="get" action="https://lihui.net/"> <input type="text" name="s" id="search-footer" placeholder="搜点什么呢?" style="display:none" /> </form> </div> </div> <div class="container"> <div class="row"> <div class="col-12 text-center"> <p class="social"> </p> <p>COPYRIGHT © 2021 lihui.net. ALL RIGHTS RESERVED.</p><p>Theme <a href="https://github.com/seatonjiang/kratos" target="_blank" rel="nofollow">Kratos</a> Made By <a href="https://seatonjiang.com" target="_blank" rel="nofollow">Seaton Jiang</a></p><p><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备2020048539号-3</a></p> </div> </div> </div> </div> <!-- Google Tag Manager (noscript) snippet added by Site Kit --> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NQ2T4D2" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript> <!-- End Google Tag Manager (noscript) snippet added by Site Kit --> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/ClipBoard/clipboard.min.js?ver=2.0.1' id='copy-clipboard-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/components/prism-core.min.js?ver=1.15.0' id='prism-core-js-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0' id='prism-plugin-autoloader-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/toolbar/prism-toolbar.min.js?ver=1.15.0' id='prism-plugin-toolbar-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/line-numbers/prism-line-numbers.min.js?ver=1.15.0' id='prism-plugin-line-numbers-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/show-language/prism-show-language.min.js?ver=1.15.0' id='prism-plugin-show-language-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.15.0' id='prism-plugin-copy-to-clipboard-js'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/jQuery/jquery.min.js?ver=1.12.4' id='jQuery-CDN-js'></script> <script type='text/javascript' id='Front_Style-js-extra'> /* <![CDATA[ */ var FrontStyle = {"openLinkInNewTab":"on"}; /* ]]> */ </script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/FrontStyle/frontstyle.min.js?ver=10.2.1' id='Front_Style-js'></script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/bootstrap.bundle.min.js?ver=4.5.0' id='bootstrap-bundle-js'></script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/layer.min.js?ver=3.1.1' id='layer-js'></script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/DPlayer.min.js?ver=4.1.4' id='dplayer-js'></script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/lightgallery.min.js?ver=1.4.0' id='lightgallery-js'></script> <script type='text/javascript' id='kratos-js-extra'> /* <![CDATA[ */ var kratos = {"site":"https:\/\/lihui.net","directory":"https:\/\/lihui.net\/wp-content\/themes\/kratos-4.1.2","alipay":"https:\/\/lihui.net\/wp-content\/themes\/kratos\/assets\/img\/200.png","wechat":"https:\/\/lihui.net\/wp-content\/themes\/kratos\/assets\/img\/200.png","repeat":"\u60a8\u5df2\u7ecf\u8d5e\u8fc7\u4e86","thanks":"\u611f\u8c22\u60a8\u7684\u652f\u6301","donate":"\u6253\u8d4f\u4f5c\u8005","scan":"\u626b\u7801\u652f\u4ed8"}; /* ]]> */ </script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/kratos.js?ver=4.1.4' id='kratos-js'></script> <script type='text/javascript' id='comment-js-extra'> /* <![CDATA[ */ var ajaxcomment = {"ajax_url":"https:\/\/lihui.net\/wp-admin\/admin-ajax.php","order":"asc","compost":"\u8bc4\u8bba\u6b63\u5728\u63d0\u4ea4\u4e2d","comsucc":"\u8bc4\u8bba\u63d0\u4ea4\u6210\u529f"}; /* ]]> */ </script> <script type='text/javascript' src='https://lihui.net/wp-content/themes/kratos-4.1.2/assets/js/comments.min.js?ver=4.1.4' id='comment-js'></script> <!-- Google Analytics snippet added by Site Kit --> <script type='text/javascript' src='https://www.googletagmanager.com/gtag/js?id=UA-147549842-4' id='google_gtagjs-js' async></script> <script type='text/javascript' id='google_gtagjs-js-after'> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('set', 'linker', {"domains":["lihui.net"]} ); gtag("js", new Date()); gtag("set", "developer_id.dZTNiMT", true); gtag("config", "UA-147549842-4", {"anonymize_ip":true}); gtag("config", "G-9Y0SCDKFQZ"); </script> <!-- End Google Analytics snippet added by Site Kit --> <script defer type='text/javascript' src='https://lihui.net/wp-content/plugins/akismet/_inc/akismet-frontend.js?ver=1666280829' id='akismet-frontend-js'></script> <script type="text/javascript"> Prism.plugins.autoloader.languages_path = "https://cdn.jsdelivr.net/wp/wp-editormd/tags/10.2.1/assets/Prism.js/components/"; </script> </body> </html>