Create React app

Say “Hello World!” with the Create React App

1884 VIEWS

· ·

React has become one of the most influential and popular Javascript libraries since it first appeared on the scene. However, it can be quite overwhelming to get started with, due to abstract concepts and the fact that you need to know about a few other technologies aside from React itself, such as Babel (transpiler) or Webpack (module bundler), to be able to properly use it. Although Babel and Webpack play essential roles for React production, they may not be the first thing you want to learn when you decide to get your feet wet in the world of React.

If you are looking for an easier way to start a React project, I have good news for you, because there is a perfect tool that suits your needs. Give a round of applause to the Create React app! It installs and preconfigures whatever is needed for an optimal environment to build a React app, so you can jump into the coding stage right away.
In this article, we will go over installing the Create React App, up to saying Hello to the world.

Installation

The following commands will install the Create React app, and create a directory named “react-app.”

$ npm install -g create-react-app
// or
$ yarn global add create-react-app
$ create-react-app react-app

After the Create React app safely finishes its job, you will see brief descriptions of what it’s done, and npm commands that you can use inside the directory.

Figure 1–1

Let’s cd into react-app and run npm start. It will start the development server on port 3000 by default, and automatically open localhost:3000 in your browser (you will see a page like Figure 1–2). It will reload every time you make a change.

Figure 1–2

Editing

Before we move forward, we’ll take a quick look at the directory tree of react-app, with extra attention on highlighted files.

Figure 2–1

/public/index.html is the HTML file that all of your React files will be rendered into. You can change

</pre>
<p>, or add </p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><link></pre>
<p> or </p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic"><script></pre>
<p>, or edit DOM elements if needed. /src/index.js is the entry point of the project that React will be looking into before any other files. (Keep in mind that these two files should never be moved or renamed.) Last but not least, /src/App.js is what we need to work on to change the welcome page into a “Hello world” page.</p>
<p>Let’s open up /src/App.js to make some magic happen. This file is written in a HTML/XML-like language, which is called JSX. It is recommended to use JSX when working with React, because it performs faster and describes the UI better than plain JavaScript. The only downside is that JSX is not browser-friendly, so it needs to be transpiled with Babel. If you want to learn more about JSX as used in React, please visit <a href= https://facebook.github.io/react/docs/introducing-jsx.html>here</a>.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;</pre>
<p>/src/App.js contains a React component, “App.” A component is like an instruction you write to tell React what you want it to render on the screen. There are a few different built-in methods you can use in a component, or you can even make your own methods, but the most important and commonly used method is render. You can use render to return a React element: a description of how it should look on the screen. I made some changes in render so now App.js can display Hello World. (Note that if you want to return multiple elements, you must wrap them in an enclosed element like that below.)</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">import React, { Component } from 'react';
// Removed logo since we don't need it anymore
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello World!</h1>
        <p>I just created my first React App</p>
      </div>
    );
  }
}

export default App;</pre>
<p>I also sprinkled some styles in src/App.css.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">.container {
  text-align: center;
}

.container > h1 {
  color: steelblue;
}</pre>
<h2>Delivery</h2>
<p>The src/index.js file is responsible for App component delivery to the final destination. It imports App — We exported it at the end of the App.js file — and renders it into a container (DOM node) in public/index.html, using ReactDOM.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();</pre>
<p>ReactDOM.render accepts two arguments: a React element and a DOM node to render it. In this case, what we need to pass as an element is what the App component returns. To reference a component, we can use an HTML-like tag, like <App /> or <App></App>.</p>
<h2>Deployment</h2>
<p>If you kept localhost:3000 open in your browser, you might have noticed your screen is already showing you the updated page—and yes, we could say we are done for today. But when your app gets complicated and bigger, what you have right now won’t be quite ideal for deployment.<br />
Running npm run build will create a directory called “build” and produce optimized and minified builds of the app, ready to be served with the best performance. This is where Babel comes in and transpiles JSX into browser-compatible language, and Webpack bundles up the modules and dependencies.<br />
<img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1wi9eZq_bip-a9qjyHrsgjg-204x300.png" alt="" width="204" height="300" class="aligncenter size-medium wp-image-5036" srcset="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1wi9eZq_bip-a9qjyHrsgjg-204x300.png 204w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1wi9eZq_bip-a9qjyHrsgjg-250x368.png 250w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1wi9eZq_bip-a9qjyHrsgjg.png 299w" sizes="(max-width: 204px) 100vw, 204px" /><br />
Figure 2–2</p>
<p>To serve it on your localhost, you can run:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic">$ npm install -g serve
$ serve -s build // serving contents of "build" directory</pre>
<p>and it will show you the following message.<br />
<img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1It00X10tnkcTanmjOD30nw-300x137.png" alt="" width="300" height="137" class="aligncenter size-medium wp-image-5037" srcset="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1It00X10tnkcTanmjOD30nw-300x137.png 300w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1It00X10tnkcTanmjOD30nw-768x350.png 768w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1It00X10tnkcTanmjOD30nw-250x114.png 250w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/1It00X10tnkcTanmjOD30nw.png 794w" sizes="(max-width: 300px) 100vw, 300px" /><br />
Figure 2–3</p>
<p>Now let’s open localhost:5000 in your browser to check our result.<br />
<img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/15ii_LB7UkKWrfn5ekTXBTw-300x207.png" alt="" width="300" height="207" class="aligncenter size-medium wp-image-5038" srcset="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/15ii_LB7UkKWrfn5ekTXBTw-300x207.png 300w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/15ii_LB7UkKWrfn5ekTXBTw-768x531.png 768w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/15ii_LB7UkKWrfn5ekTXBTw-250x173.png 250w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/09/15ii_LB7UkKWrfn5ekTXBTw.png 800w" sizes="(max-width: 300px) 100vw, 300px" /><br />
Figure 2–4</p>
<p>Congratulations, you just Reacted “Hello World!”</p>
<p>Resources:<br />
<a href=https://facebook.github.io/react/>https://facebook.github.io/react/</a></p>
                                                <div class="clear"></div>

                        <div class="clear"></div>
                    </div><!-- end .entry --><div class="clear"></div>
            </div><!-- end #post -->
                    </article>

        <!-- author -->
                <div class="author-meta">
            <div class="entry">
                <img alt="" class="avatar avatar-100 photo avatar-default" height="100" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/11/avatar-jennie-chu-100x100.png" width="100">                <div class="author-info">
                    <strong><a href="https://sweetcode.io/author/klee/" title="Posts by Kina Lee" rel="author">Kina Lee</a></strong> › <a class="author-link" href="" target="_blank"></a><br />
                    <p>Kina Lee is a Front-End Engineer/Web Developer, trained as a Full-Stack Engineer at the Holberton School of Software Engineering at San Francisco. She enjoys traveling, taking photographs, reading or watching TV on her couch, and tasting good coffee and beer in her free time. Please visit her website at: http://www.kinalee.com
<a href="https://www.linkedin.com/in/kinalee/" /></a></p>
                </div><!-- end .autor-info -->
            </div><!-- end .entry -->
            <div class="clear"></div>
        </div><!-- end .author-meta -->
        
        <!-- Prev and Next articles -->
        <div class="prev-articles">
            <div class="one_half" style="text-align: right;">Previous Article  <br /><h2><a href="https://sweetcode.io/using-mustache-ruby-rails/" rel="prev">Using Mustache with Ruby on Rails</a> </h2></div>            <div class="one_half_last">Next Article <br /> <h2> <a href="https://sweetcode.io/javafx-an-overview/" rel="next">JavaFX: An Overview</a></h2></div><div class="clear"></div>        <div class="clear"></div>
        </div>
        <hr />

        <div class="clear"></div>
        <div class="entry-bottom">
            <!-- Related Posts -->
            <h3 class="title"><span>Discussion</span></h3>
            <div class="comments">
                

 


		<div id='comment-providers-select-message'>Click on a tab to select how you'd like to leave your comment</div>
		<div id='comment-providers'><a name='comments-plus-form'></a>
			<ul id='all-comment-providers'><li><a id='comment-provider-wordpress-link' href='#comment-provider-wordpress'><span>Sweetcode.io</span></a></li><li><a id='comment-provider-facebook-link' href='#comment-provider-facebook'><span>Facebook</span></a></li><li><a id='comment-provider-google-link' href='#comment-provider-google'><span>Google</span></a></li></ul><div class='comment-provider' id='comment-provider-facebook'><div class="comment-provider-login-button" id="login-with-facebook"><a href="#" title="Login with Facebook"><span>Login</span></a></div></div><div class='comment-provider' id='comment-provider-google'><div class="comment-provider-login-button" id="login-with-google"><a href="https://sweetcode.io/hello-world-create-react-app-java-script/" title="Login with Google"><span>Login</span></a></div></div><div class='comment-provider no-instructions' id='comment-provider-wordpress'>	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title"><div class"clear"></div><span>Leave a Comment</span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/hello-world-create-react-app-java-script/#respond" style="display:none;">Cancel reply</a></small></h3>			<form action="https://sweetcode.io/wp-comments-post.php" method="post" id="commentform" class="comment-form">
				<p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p>
            <div class="one_full_c">
               <label for="comment">Comment:<span>*</span></label>
               <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>     
            </div>
            <div class="one_half_c">
             <label for="author">Name:<span>*</span></label> 
             <input id="author" name="author" type="text" value="" size="30"  aria-required='true' />
            </div>

            <div class="one_half_last_c">
             <label for="email">Email:<span>*</span></label> 
             <input id="email" name="email" type="text" value="" size="30"  aria-required='true' />
            </div>
<p class="form-submit"><p class="comment-subscription-form"><input type="checkbox" name="subscribe_comments" id="subscribe_comments" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-label" for="subscribe_comments">Notify me of follow-up comments by email.</label></p><p class="comment-subscription-form"><input type="checkbox" name="subscribe_blog" id="subscribe_blog" value="subscribe" style="width: auto; -moz-appearance: checkbox; -webkit-appearance: checkbox;" /> <label class="subscribe-label" id="subscribe-blog-label" for="subscribe_blog">Notify me of new posts by email.</label></p><input name="submit" type="submit" id="sendemail" class="submit" value="Submit Comment" /> <input type='hidden' name='comment_post_ID' value='5030' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="1839b963b1" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="65"/></p>			</form>
			</div><!-- #respond -->
	</div> <!-- Wordpress provider --></div> <!-- #comment-providers -->            </div>
            <div class="clear"></div>
        </div><!-- end .entry-bottom -->

    </div><!-- end #main content -->


    <!-- Begin Sidebar (right) -->
    <div class="sidebar-wrapper">
<aside class="sidebar">
<div class="widget widget_text"><h3 class="title"><span>Subscribe</span></h3><div class="clear"></div>			<div class="textwidget"><script>(function() {
	if (!window.mc4wp) {
		window.mc4wp = {
			listeners: [],
			forms    : {
				on: function (event, callback) {
					window.mc4wp.listeners.push({
						event   : event,
						callback: callback
					});
				}
			}
		}
	}
})();
</script><!-- Mailchimp for WordPress v4.3.3 - https://wordpress.org/plugins/mailchimp-for-wp/ --><form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-912" method="post" data-id="912" data-name="Subscribe" ><div class="mc4wp-form-fields"><h3>
  Get Sweet Content!
</h3>
<p>
Sign-up here to get alerts about sweet swag, contests, polls, and more. 
</p>
<p>
	<input class="email-subscribe" type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p>
	<input class="email-submit" type="submit" value="Receive Sweetness by Email" />
</p></div><label style="display: none !important;">Leave this field empty if you're human: <input type="text" name="_mc4wp_honeypot" value="" tabindex="-1" autocomplete="off" /></label><input type="hidden" name="_mc4wp_timestamp" value="1553411341" /><input type="hidden" name="_mc4wp_form_id" value="912" /><input type="hidden" name="_mc4wp_form_element_id" value="mc4wp-form-1" /><div class="mc4wp-response"></div></form><!-- / Mailchimp for WordPress Plugin --></div>
		</div><div class="widget widget_text"><h3 class="title"><span>More sweetness…</span></h3><div class="clear"></div>			<div class="textwidget"><ul class="article_list">
                
                 

              <li><div class="rel-left"><a href="https://sweetcode.io/how-use-djang-react-ap/">
                                    <img width="80" height="80" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2019/03/1280px-Django_logo.svg-80x80.png" class="attachment-thumbnail-widget size-thumbnail-widget wp-post-image" alt="" srcset="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2019/03/1280px-Django_logo.svg-80x80.png 80w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2019/03/1280px-Django_logo.svg-150x150.png 150w, https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2019/03/1280px-Django_logo.svg-198x198.png 198w" sizes="(max-width: 80px) 100vw, 80px" />                  </a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/02/avatar-kurt-collins_360-30x30.png" width="30"></div>
                    <div class="an-display-time">2 weeks  ago</div>
                    <h3><a href="https://sweetcode.io/how-use-djang-react-ap/">How to Use Django with React</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 54</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/how-use-djang-react-ap/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

             

              <li><div class="rel-left"><a href="https://sweetcode.io/intro-kotlin-java-sweetcode/">
                  <img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/08/no-image-2.png" /></a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2018/03/avatar-sugu-sougoumarane-30x30.png" width="30"></div>
                    <div class="an-display-time">5 months  ago</div>
                    <h3><a href="https://sweetcode.io/intro-kotlin-java-sweetcode/">Introduction to Kotlin</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 188</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/intro-kotlin-java-sweetcode/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

             

              <li><div class="rel-left"><a href="https://sweetcode.io/java-10-var-sweetcode/">
                  <img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/08/no-image-2.png" /></a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/02/avatar-kurt-collins_360-30x30.png" width="30"></div>
                    <div class="an-display-time">7 months  ago</div>
                    <h3><a href="https://sweetcode.io/java-10-var-sweetcode/">Meet Java 10’s var</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 279</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/java-10-var-sweetcode/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

             

              <li><div class="rel-left"><a href="https://sweetcode.io/logisim-software-digital-clock/">
                  <img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/08/no-image-2.png" /></a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/02/avatar-kurt-collins_360-30x30.png" width="30"></div>
                    <div class="an-display-time">8 months  ago</div>
                    <h3><a href="https://sweetcode.io/logisim-software-digital-clock/">How to use the logisim software to design your first digital clock</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 676</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/logisim-software-digital-clock/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

             

              <li><div class="rel-left"><a href="https://sweetcode.io/dealing-nullpointerexception-java/">
                  <img src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/08/no-image-2.png" /></a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2017/02/avatar-kurt-collins_360-30x30.png" width="30"></div>
                    <div class="an-display-time">9 months  ago</div>
                    <h3><a href="https://sweetcode.io/dealing-nullpointerexception-java/">Dealing With NullPointerException In Java</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 390</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/dealing-nullpointerexception-java/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

             

              <li><div class="rel-left"><a href="https://sweetcode.io/productivity-resilience-kubernetes/">
                                    <img width="80" height="80" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2018/06/squarespace_feature-80x80.png" class="attachment-thumbnail-widget size-thumbnail-widget wp-post-image" alt="kubernetes" />                  </a></div>
                  <div class="rel-right">
                    <div class="widget-author-img"><img alt="" class="avatar avatar-30 photo avatar-default" height="30" src="https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/uploads/2016/08/avatar-sweetcode-30x30.png" width="30"></div>
                    <div class="an-display-time">9 months  ago</div>
                    <h3><a href="https://sweetcode.io/productivity-resilience-kubernetes/">Gaining Productivity and Resilience with Kubernetes</a></h3>
                    <div class="sub-article-widget">
                      <div class="an-display-view"><i class="fa fa-eye"></i> 161</div>
                      <div class="an-display-like"></div>
                      <div class="an-display-comm"><i class="fa fa-comments"></i> <a href="https://sweetcode.io/productivity-resilience-kubernetes/#respond">0</a></div><div class="clear"></div>
                    </div>
                  </div>
              </li>

                                          
            </ul></div>
		</div></aside>
</div>    <!-- end #sidebar  (right) -->


    <div class="clear"></div>
</section><!-- end .wrap -->

<div id="single-share">
        <a class="fbbutton" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://sweetcode.io/hello-world-create-react-app-java-script/"><i class="fa fa-facebook-official"></i></a>
        <a class="twbutton" target="_blank" href="https://twitter.com/home?status=Check%20out%20this%20article:%20Say “Hello World!” with the Create React App%20-%20https://sweetcode.io/hello-world-create-react-app-java-script/"><i class="fa fa-twitter"></i></a>
            <a class="pinbutton" target="_blank" href="https://pinterest.com/pin/create/button/?url=https://sweetcode.io/hello-world-create-react-app-java-script/&media=https://sweetcode.io/wp-content/uploads/2017/09/Picture1.png&description=Say “Hello World!” with the Create React App"><i class="fa fa-pinterest"></i></a>
        <a class="googlebutton" target="_blank" href="https://plus.google.com/share?url=https://sweetcode.io/hello-world-create-react-app-java-script/"><i class="fa fa-google-plus-square"></i></a>
        <a class="emailbutton" target="_blank" href="mailto:?subject=Say “Hello World!” with the Create React App&body=https://sweetcode.io/hello-world-create-react-app-java-script/ React has become one of the most influential and popular Javascript libraries since it first appeared on the scene. However, it can be quite .."><i class="fa fa-envelope"></i></a>
</div><!-- end #single-share -->

<div id='fb-root'></div><script>
			FB.init({
				appId: '301780950195623',
				status: true,
				cookie: true,
				xfbml: true,
				oauth: true
			});
			</script><script type="text/javascript">jQuery(function () { if ("undefined" != typeof twttr && twttr.anywhere && twttr.anywhere.config) twttr.anywhere.config({ callbackURL: "https://sweetcode.io/hello-world-create-react-app-java-script/" }); });</script><!-- Begin Footer -->
<footer> 
    
<div class="wrap">
        <!-- footer menu -->
        <nav class="menu-footer-menu-container"><ul id="menu-footer-menu" class="footer-menu"><li id="menu-item-525" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-525"><a href="https://sweetcode.io/tag-index/">TAG INDEX</a></li>
<li id="menu-item-523" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-523"><a href="https://sweetcode.io/about/">ABOUT</a></li>
<li id="menu-item-1742" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1742"><a href="https://sweetcode.io/privacy-policy/">PRIVACY POLICY</a></li>
<li id="menu-item-911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-911"><a href="https://sweetcode.io/contribute-to-sweetcode/">CONTRIBUTE</a></li>
</ul></nav>  

        <!-- footer social icons. -->
                    <ul class="footer-social">
<li><a target="_blank" href="https://twitter.com/SweetCodeHQ"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="https://www.facebook.com/SweetCodeHQ"><i class="fa fa-facebook-square"></i></a></li>
<li><a target="_blank" href="[site_url]?feed=rss"><i class="fa fa-rss-square"></i></a></li>
</ul>        

        <!-- copyright -->
        <div class="clear"></div>
        <div class="copyright">
                        © 2018-2019 <a class="copy-link"  href="[site_url]">Sweetcode.io</a> and <a class="copy-link" href="http://fixate.io">Fixate.io</a>                    
        </div>

<div class="clear"></div>
</div>
</footer><!-- end #footer -->

	<div style="display:none">
	<div class="grofile-hash-map-a9a608a746b75d2974f72093ed350ad6">
	</div>
	<div class="grofile-hash-map-8e1fb36e4ca7db31bb158508a7b1d790">
	</div>
	<div class="grofile-hash-map-517c2fdcfd0d3d807e072ad28d409502">
	</div>
	<div class="grofile-hash-map-718ac7a074c62a326ce0fca44f92976a">
	</div>
	<div class="grofile-hash-map-e54667c69fed816c52879e60d86700f2">
	</div>
	<div class="grofile-hash-map-478e46a9a019d398f695cdac2e174e48">
	</div>
	</div>
<script>(function() {function addEventListener(element,event,handler) {
	if(element.addEventListener) {
		element.addEventListener(event,handler, false);
	} else if(element.attachEvent){
		element.attachEvent('on'+event,handler);
	}
}function maybePrefixUrlField() {
	if(this.value.trim() !== '' && this.value.indexOf('http') !== 0) {
		this.value = "http://" + this.value;
	}
}

var urlFields = document.querySelectorAll('.mc4wp-form input[type="url"]');
if( urlFields && urlFields.length > 0 ) {
	for( var j=0; j < urlFields.length; j++ ) {
		addEventListener(urlFields[j],'blur',maybePrefixUrlField);
	}
}/* test if browser supports date fields */
var testInput = document.createElement('input');
testInput.setAttribute('type', 'date');
if( testInput.type !== 'date') {

	/* add placeholder & pattern to all date fields */
	var dateFields = document.querySelectorAll('.mc4wp-form input[type="date"]');
	for(var i=0; i<dateFields.length; i++) {
		if(!dateFields[i].placeholder) {
			dateFields[i].placeholder = 'YYYY-MM-DD';
		}
		if(!dateFields[i].pattern) {
			dateFields[i].pattern = '[0-9]{4}-(0[1-9]|1[012])-(0[1-9]|1[0-9]|2[0-9]|3[01])';
		}
	}
}

})();</script><button id="responsive-menu-button"
        class="responsive-menu-button responsive-menu-boring
         responsive-menu-accessible"
        type="button"
        aria-label="Menu">

    
    <span class="responsive-menu-box">
        <span class="responsive-menu-inner"></span>
    </span>

    </button><div id="responsive-menu-container" class="slide-top">
    <div id="responsive-menu-wrapper">
                                        <div id="responsive-menu-title">
        
        
        
        
        Menu

            </div>
                                                <ul id="responsive-menu" class=""><li id="responsive-menu-item-606" class=" menu-item menu-item-type-post_type menu-item-object-page responsive-menu-item"><a href="https://sweetcode.io/home/" class="responsive-menu-item-link">HOME</a></li><li id="responsive-menu-item-528" class=" menu-item menu-item-type-post_type menu-item-object-page responsive-menu-item"><a href="https://sweetcode.io/tag-index/" class="responsive-menu-item-link">TAG INDEX</a></li><li id="responsive-menu-item-526" class=" menu-item menu-item-type-post_type menu-item-object-page responsive-menu-item"><a href="https://sweetcode.io/about/" class="responsive-menu-item-link">ABOUT</a></li><li id="responsive-menu-item-87274" class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children responsive-menu-item responsive-menu-item-has-children"><a href="https://sweetcode.io/home/" class="responsive-menu-item-link">TOOL GUIDES<div class="responsive-menu-subarrow">▼</div></a><ul class='responsive-menu-submenu responsive-menu-submenu-depth-1'><li id="responsive-menu-item-87878" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="/tag/cloud-native-computing-foundation/" class="responsive-menu-item-link">Cloud Native</a></li><li id="responsive-menu-item-87276" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="/tag/sauce-labs/" class="responsive-menu-item-link">Sauce Labs</a></li><li id="responsive-menu-item-87277" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="/tag/sematext/" class="responsive-menu-item-link">Sematext</a></li><li id="responsive-menu-item-87275" class=" menu-item menu-item-type-custom menu-item-object-custom responsive-menu-item"><a href="/tag/twistlock/" class="responsive-menu-item-link">Twistlock</a></li></ul></li></ul>                                                                </div>
</div>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/dead-document-gallery/assets/js/gallery.min.js?ver=4.4.3'></script>
<script type='text/javascript' src='https://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201912'></script>
<script type='text/javascript' src='https://secure.gravatar.com/js/gprofiles.js?ver=2019Maraa'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var WPGroHo = {"my_hash":""};
/* ]]> */
</script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/jetpack/modules/wpgroho.js?ver=5.1.1'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/themes/1page-wp/js/masonry.pkgd.min.js?ver=5.1.1'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/themes/1page-wp/js/custom.js?ver=5.1.1'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-includes/js/comment-reply.min.js?ver=5.1.1'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/themes/1page-wp/fancybox/jquery.fancybox-1.3.4.pack.js?ver=5.1.1'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/enlighter/resources/mootools-core-yc.js?ver=3.9.0'></script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/enlighter/resources/EnlighterJS.min.js?ver=3.9.0'></script>
<script async="async" type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/akismet/_inc/form.js?ver=4.1.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var mc4wp_forms_config = [];
/* ]]> */
</script>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/mailchimp-for-wp/assets/js/forms-api.min.js?ver=4.3.3'></script>
<!--[if lte IE 9]>
<script type='text/javascript' src='https://hnrddp064o-flywheel.netdna-ssl.com/wp-content/plugins/mailchimp-for-wp/assets/js/third-party/placeholders.min.js?ver=4.3.3'></script>
<![endif]-->
<script type="text/javascript">/* <![CDATA[ */EnlighterJS_Config = {"selector":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"language":"generic","theme":"enlighter","indent":2,"hover":"hoverEnabled","showLinenumbers":true,"rawButton":true,"infoButton":true,"windowButton":true,"rawcodeDoubleclick":false,"grouping":true,"cryptex":{"enabled":false,"email":"mail@example.tld"}};!function(){var a=function(a){var b="Enlighter Error: ";console.error?console.error(b+a):console.log&&console.log(b+a)};return window.addEvent?"undefined"==typeof EnlighterJS?void a("Javascript Resources not loaded yet!"):"undefined"==typeof EnlighterJS_Config?void a("Configuration not loaded yet!"):void window.addEvent("domready",function(){EnlighterJS.Util.Init(EnlighterJS_Config.selector.block,EnlighterJS_Config.selector.inline,EnlighterJS_Config)}):void a("MooTools Framework not loaded yet!")}();;/* ]]> */</script><script type='text/javascript' src='https://stats.wp.com/e-201912.js' async='async' defer='defer'></script>
<script type='text/javascript'>
	_stq = window._stq || [];
	_stq.push([ 'view', {v:'ext',j:'1:7.1.1',blog:'114317853',post:'5030',tz:'-7',srv:'sweetcode.io'} ]);
	_stq.push([ 'clickTrackerInit', '114317853', '5030' ]);
</script>

			<div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #545454;"><div class="cookie-notice-container"><span id="cn-notice-text">We use cookies to ensure we keep the site Sweet, and improve your experience. Continued use of the site confirms you are aware and accept.</span><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie cn-button bootstrap button">Accept</a>
				</div>
				
			</div>
<!-- Menu & link arrows -->
<script type="text/javascript">var jquerycssmenu={fadesettings:{overduration:0,outduration:100},buildmenu:function(b,a){jQuery(document).ready(function(e){var c=e("#"+b+">ul");var d=c.find("ul").parent();d.each(function(g){var h=e(this);var f=e(this).find("ul:eq(0)");this._dimensions={w:this.offsetWidth,h:this.offsetHeight,subulw:f.outerWidth(),subulh:f.outerHeight()};this.istopheader=h.parents("ul").length==1?true:false;f.css({top:this.istopheader?this._dimensions.h+"px":0});h.children("a:eq(0)").css(this.istopheader?{paddingRight:a.down[2]}:{}).append('<img src="'+(this.istopheader?a.down[1]:a.right[1])+'" class="'+(this.istopheader?a.down[0]:a.right[0])+'" style="border:0;" />');h.hover(function(j){var i=e(this).children("ul:eq(0)");this._offsets={left:e(this).offset().left,top:e(this).offset().top};var k=this.istopheader?0:this._dimensions.w;k=(this._offsets.left+k+this._dimensions.subulw>e(window).width())?(this.istopheader?-this._dimensions.subulw+this._dimensions.w:-this._dimensions.w):k;i.css({left:k+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)},function(i){e(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)})});c.find("ul").css({display:"none",visibility:"visible"})})}};var arrowimages={down:['downarrowclass', 'https://sweetcode.io/wp-content/themes/1page-wp/images/arrow-down.png'], right:['rightarrowclass', 'https://sweetcode.io/wp-content/themes/1page-wp/images/arrow-right.png']}; jquerycssmenu.buildmenu("myjquerymenu", arrowimages); jquerycssmenu.buildmenu("myjquerymenu-cat", arrowimages);</script>


</body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1553411341 -->