上一节，我们使用 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>