The Geeky Way - Javascript//thegeekyway.com/2017-10-07T14:11:00+05:30Introduction to React Native - Part 12017-10-07T14:11:00+05:302017-10-07T14:11:00+05:30realslimshankytag:thegeekyway.com,2017-10-07:/introduction-to-react-native-part-1/<div style="text-align:center">
<p><img alt="Introduction to React Native - Part 1" class="aligncenter" src="https://i.imgur.com/7o0tXgF.png"></p>
</div>
<h3>What is all the fuzz about Hybrid Apps?</h3>
<p><a href="https://facebook.github.io/react-native/">React Native</a> is a framework build over the native development kit of both Android and iOS with which you can create mobile apps for both the platforms by just using JavaScript.</p>
<!--more-->
<p>React Native was developed by some group of people working in …</p><div style="text-align:center">
<p><img alt="Introduction to React Native - Part 1" class="aligncenter" src="https://i.imgur.com/7o0tXgF.png"></p>
</div>
<h3>What is all the fuzz about Hybrid Apps?</h3>
<p><a href="https://facebook.github.io/react-native/">React Native</a> is a framework build over the native development kit of both Android and iOS with which you can create mobile apps for both the platforms by just using JavaScript.</p>
<!--more-->
<p>React Native was developed by some group of people working in the Facebook and later it was released as an open source project for all the world to use and contribute.</p>
<h3>Why should you care?</h3>
<p>Think about being in a hackathon and feeling the need of creating a mobile app for your solution. What should be your quickest solution for a mobile app? A native app would take a lot of work to just get it look good. That's where react-native kicks in. This is one such scenario, if you speak JS and have come from the world of the web then you might love it as well.</p>
<p>Apart from all of this, many bigger companies have started using react native for their production apps. You can see the complete list <a href="https://facebook.github.io/react-native/showcase.html">here</a>.</p>
<h3>Getting down to business</h3>
<p>The prerequisites of developing a react native application are very simple to begin with. Let's look at them one by one.</p>
<p><strong>Development Part</strong><br>
Step 1 - Install <a href="https://nodejs.org/en/download/">Node</a>.</p>
<p>Step 2 - Install Create React Native App using npm by running following command on a terminal.<br>
<p .lang:default .decode:true .crayon-inline>npm install -g create-react-native-app</p>
</p>
<p>Step 3 - Create a new react native app using the following command. <p .lang:default .decode:true .crayon-inline>newApp</p> can be any name you want to give your project.<br>
<p .lang:default .decode:true .crayon-inline>create-react-native-app newApp</p>
</p>
<p>Step 4 - Get inside the project directory and run the server.<br>
<p .lang:default .decode:true .crayon-inline>cd newApp && npm start</p>
</p>
<p>After the last step, you'll have to wait for some time until a QR code appears on the terminal window and then move on to the deployment part.</p>
<p><strong>Deployment Part<br>
</strong>Step 1 - Install <a href="https://expo.io/">Expo</a> application from <a href="https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www">Google Play Store</a> or <a href="https://itunes.apple.com/app/apple-store/id982107779?ct=www&mt=8">Apple App Store</a>.</p>
<p>Step 2 - Connect to the same network as you system onto which you completed development part.</p>
<p>Step 3 - Scan QR code form the terminal window using Expo app on your smartphone. You can also input the URL given below the QR code on the search box into the explore menu of expo app.</p>
<p>After the last step, the terminal window will also display the name of the device to which your server is connected. You'll see the expo icon which loads your application afterward on your smartphone which will look like the picture below. </p>
<div style="text-align:center">
<p><img alt="Output to Expo app after first run" class="aligncenter" src="https://i.imgur.com/W6gCzmR.png?1"></p>
</div>
<h3>Let's understand what just happened</h3>
<p>By running <p .lang:default .decode:true .crayon-inline>npm start</p> we started the node server, as well as some other magic processes who's job is mainly to gather all the code inside your project directory, reduce it into a single file namely <p .lang:default .decode:true .crayon-inline>index.android.bundle</p> or <p .lang:default .decode:true .crayon-inline>index.ios.bundle</p> for Android and iOS respectively. So all the code you have written inside your project directory which is nothing but a bunch of <p .lang:default .decode:true .crayon-inline>.js</p> files are only the ones you require at this point to define how your app looks like.</p>
<p>Once you scan the QR code using Expo app, the <p .lang:default .decode:true .crayon-inline>.bundle</p> is sent over to the smartphone with some other configuration files. Now Expo app has a JSCore which understands the js code you have written, maps to whichever native component you wanted your app to show with the appropriate style you provided.</p>
<p>Now, when you look into the contents of <p .lang:default .decode:true .crayon-inline>App.js</p> in out project directory, it would be like the one as shown below.</p>
<div class="highlight"><pre><span></span><code><span class="kn">import</span> <span class="nn">React</span> <span class="kn">from</span> <span class="s1">'react'</span><span class="p">;</span>
<span class="kn">import</span> <span class="p">{</span> <span class="n">StyleSheet</span><span class="p">,</span> <span class="n">Text</span><span class="p">,</span> <span class="n">View</span> <span class="p">}</span> <span class="kn">from</span> <span class="s1">'react-native'</span><span class="p">;</span>
<span class="n">export</span> <span class="n">default</span> <span class="k">class</span> <span class="nc">App</span> <span class="n">extends</span> <span class="n">React</span><span class="o">.</span><span class="n">Component</span> <span class="p">{</span>
<span class="n">render</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o"><</span><span class="n">View</span> <span class="n">style</span><span class="o">=</span><span class="p">{</span><span class="n">styles</span><span class="o">.</span><span class="n">container</span><span class="p">}</span><span class="o">></span>
<span class="o"><</span><span class="n">Text</span><span class="o">></span><span class="n">Open</span> <span class="n">up</span> <span class="n">App</span><span class="o">.</span><span class="n">js</span> <span class="n">to</span> <span class="n">start</span> <span class="n">working</span> <span class="n">on</span> <span class="n">your</span> <span class="n">app</span><span class="err">!</span><span class="o"></</span><span class="n">Text</span><span class="o">></span>
<span class="o"><</span><span class="n">Text</span><span class="o">></span><span class="n">Changes</span> <span class="n">you</span> <span class="n">make</span> <span class="n">will</span> <span class="n">automatically</span> <span class="n">reload</span><span class="o">.</</span><span class="n">Text</span><span class="o">></span>
<span class="o"><</span><span class="n">Text</span><span class="o">></span><span class="n">Shake</span> <span class="n">your</span> <span class="n">phone</span> <span class="n">to</span> <span class="nb">open</span> <span class="n">the</span> <span class="n">developer</span> <span class="n">menu</span><span class="o">.</</span><span class="n">Text</span><span class="o">></span>
<span class="o"></</span><span class="n">View</span><span class="o">></span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="n">const</span> <span class="n">styles</span> <span class="o">=</span> <span class="p">{</span>
<span class="n">container</span><span class="p">:</span> <span class="p">{</span>
<span class="n">flex</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span>
<span class="n">backgroundColor</span><span class="p">:</span> <span class="s1">'#fff'</span><span class="p">,</span>
<span class="n">alignItems</span><span class="p">:</span> <span class="s1">'center'</span><span class="p">,</span>
<span class="n">justifyContent</span><span class="p">:</span> <span class="s1">'center'</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">};</span>
</code></pre></div>
<p>In the next post, we'll discuss each and every element of `App.js` file in-depth to get the most out of it.</p>
<h3>Prerequisites to learn further</h3>
<p>We'll break down the above code into different segments and I'll try to explain each one of them using a different blog. To understand the next set of blog posts in the series and get the most out of react native you should understand a little something of topics below.</p>
<p>1. ES6 - We'll be using goodness of a bunch of ES6 statements which will make our application simple and effective in fewer lines of code. Since we'll only deal with JavaScript side of things it'll be better for you to have an intermediate intellect in the same.</p>
<p>2. NodeJS - All the packages in react native are dealt with using NodeJS and npm packages. Get acquainted with how it works.</p>
<p>3. ReactJS (optional) - Entire framework is build using ReactJS to provide you with components having their own dedicated life cycle. It's optional since we'll go though how those components work ourselves and you'll learn to adore ReactJS starting from there.</p>
<p>I know this blog doesn't give it all away but this is how I wanted it to be, a spark so that I can explain to you all I've learned with a chain of posts instead of sharing some key elements in just one blog post. If you've any questions, please feel free to ask in the comments section below.</p>Writing your First Javascript code2014-02-24T18:11:00+05:302014-02-24T18:11:00+05:30Deep_Singhtag:thegeekyway.com,2014-02-24:/writing-first-javascript-code/<div style="text-align:center">
<p><a href="//thegeekyway.com/uploads/images/2014/02/Introduction-to-javascript.png" title="Writing your first javascript code"><img alt="Writing your first javascript code" src="//thegeekyway.com/uploads/images/2014/02/Introduction-to-javascript.png"></a> </p>
</div>
<p>In the <a href="http://www.thegeekyway.com/introduction-javascript/">previous article</a> we discussed about introduction to javascript, in this article we will discuss about how to write a javascript code, where we can add javascript in our web pages, how to use tools that are built in our web browser, how to validate HTML5/javascript code.</p>
<p style="font-size: x-large;"><u>Validation …</u></p><div style="text-align:center">
<p><a href="//thegeekyway.com/uploads/images/2014/02/Introduction-to-javascript.png" title="Writing your first javascript code"><img alt="Writing your first javascript code" src="//thegeekyway.com/uploads/images/2014/02/Introduction-to-javascript.png"></a> </p>
</div>
<p>In the <a href="http://www.thegeekyway.com/introduction-javascript/">previous article</a> we discussed about introduction to javascript, in this article we will discuss about how to write a javascript code, where we can add javascript in our web pages, how to use tools that are built in our web browser, how to validate HTML5/javascript code.</p>
<p style="font-size: x-large;"><u>Validation of HTML5 document</u></p>
<p>In order to validate HTML5 code, we write the following code.</p>
<div class="highlight"><pre><span></span><code><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">html</span><span class="p">></span>
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">title</span><span class="p">></span>TheGeekyWay.com<span class="p"></</span><span class="nt">title</span><span class="p">></span>
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>Welcome to TheGeekyWay.com<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
</code></pre></div>
<p>There are various validators online to check the validation, the reason we are doing this so as to correct them now as it might create a problem in future when we are writing the code. The famous validator is <a href="http://html5.validator.nu">http://html5.validator.nu</a>/ validator. Copy and paste the code there, and select the text field and click on validate. After validation you must get this green box. </p>
<div style="text-align:center">
<p><img alt="validated" src="//thegeekyway.com/uploads/images/2014/02/validated.png"> </p>
</div>
<p>If you are getting a red/pink box, please recheck the code.</p>
<p style="font-size: x-large;"><u>Find your Javascript editor </u></p>
<p>A good editor is a must, some features that might help you to determine what makes a good editor.</p>
<p><strong>Code is more writable</strong></p>
<ul>
<li>Auto-typing</li>
<li>Block balancing</li>
</ul>
<p><strong>Code is more readable</strong></p>
<ul>
<li>Syntax Highlighting</li>
<li>Code Folding</li>
<li>Function navigation</li>
</ul>
<p><strong>Some of the good editors are</strong></p>
<ul>
<li><a href="http://www.sublimetext.com">Sublime Text</a>(Windows, Linux, Mac)</li>
<li><a href="http://www.adobe.com/in/products/dreamweaver.html">Adobe Dreamweaver</a>(Mac, Windows)</li>
<li><a href="http://aptana.com/">Aptana Studio</a>(Mac, Windows, Linux)</li>
<li><a href="http://www.barebones.com/products/bbedit/">BBEdit</a>(Mac)</li>
<li><a href="http://download.cnet.com/TextWrangler/3000-2351_4-10220012.html">Text Wrangler</a>(Mac)</li>
</ul>
<p style="font-size: x-large;"><u>Browsers</u></p>
<p>In this section we are going to discuss browsers and web consoles, various tools that are used for intersection between browsers and web pages. For now you just should pick one, any browser you pick will probably have some tools built in.<br>
Here are some of the options :-</p>
<p><strong>Google Chrome</strong></p>
<ul>
<li>Console : Developer Tools</li>
<li>Developer Version : Chrome Canary (if you are a serious developer then you should use chrome canary, it has great development tools).</li>
</ul>
<p><strong>Firefox</strong></p>
<ul>
<li>It has a web inspector but generally speaking if you want to do any serious work you need to have a firebug addon.</li>
</ul>
<p><strong>Safari</strong></p>
<ul>
<li>Console : Web inspector</li>
<li>Developer version : Webkit Nightly</li>
</ul>
<p><strong>Internet Explorer</strong></p>
<ul>
<li>F12 Developer Tools(built-in)</li>
</ul>
<p style="text-decoration: underline;"/p><p style="font-size: x-large;">Writing your first javascript code</p></p>
<p>In order to write our first javascript code, we need to include a script tag in the head section of html coding (later in the articles Ill show why we should never use script tag in javasctipt inside html) but for now, since the code is small, so we can use this method.</p>
<p>Analyze the following code</p>
<div class="highlight"><pre><span></span><code><span class="nt"><html></span>
<span class="nt"><head></span><span class="w"> </span>
<span class="w"> </span><span class="nt"><title></span><span class="w"> </span>TheGeekyWay.com<span class="w"> </span><span class="nt"></title></span>
<span class="w"> </span><span class="nt"><script</span><span class="w"> </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></span>
<span class="w"> </span>function<span class="w"> </span>replace()<span class="w"> </span>{
<span class="w"> </span>var<span class="w"> </span>myValue<span class="w"> </span>=<span class="w"> </span>document.getElementById('textBox1').value;
<span class="w"> </span>var<span class="w"> </span>getTitle<span class="w"> </span>=<span class="w"> </span>document.getElementById('title');
<span class="w"> </span>if<span class="w"> </span>(myValue.length<span class="w"> </span>==<span class="w"> </span>0)<span class="w"> </span>{
<span class="w"> </span>getTitle.innerHTML<span class="w"> </span>=<span class="w"> </span>"Nothing<span class="w"> </span>entered,<span class="w"> </span>enter<span class="w"> </span>a<span class="w"> </span>valid<span class="w"> </span>character";
<span class="w"> </span>return;
<span class="w"> </span>}
<span class="w"> </span>else<span class="w"> </span>{
<span class="w"> </span>getTitle.innerHTML<span class="w"> </span>=<span class="w"> </span>myValue;
<span class="w"> </span>}<span class="w"> </span>
<span class="w"> </span>}
<span class="w"> </span><span class="nt"></script></span>
<span class="w"> </span><span class="nt"></head></span>
<span class="nt"><body></span>
<span class="w"> </span><span class="nt"><form</span><span class="w"> </span><span class="na">id=</span><span class="s">"form1"</span><span class="w"> </span><span class="na">runat=</span><span class="s">"server"</span><span class="nt">></span>
<span class="w"> </span><span class="nt"><div></span>
<span class="w"> </span><span class="nt"><h1</span><span class="w"> </span><span class="na">id=</span><span class="s">"title"</span><span class="nt">></span>Welcome<span class="w"> </span>to<span class="w"> </span>TheGeekyWay.com<span class="nt"></h1></span>
<span class="w"> </span><span class="nt"><input</span><span class="w"> </span><span class="na">type=</span><span class="s">"text"</span><span class="w"> </span><span class="na">id=</span><span class="s">"textBox1"</span><span class="w"> </span><span class="nt">/></span>
<span class="w"> </span><span class="nt"><input</span><span class="w"> </span><span class="na">type=</span><span class="s">"button"</span><span class="w"> </span><span class="na">value=</span><span class="s">"Submit"</span><span class="w"> </span><span class="na">id=</span><span class="s">"myButton"</span><span class="w"> </span><span class="na">onclick=</span><span class="s">"replace()"</span><span class="w"> </span><span class="nt">/></span>
<span class="w"> </span><span class="nt"></div></span>
<span class="w"> </span><span class="nt"></form></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div>
<p>[codepen_embed height=220 theme_id=3 slug_hash='wLDGe' user='Deep_Singh' default_tab='Result' animations='run'/]</p>
<p>Remember that all your javascript code will be written under script tag with the type "text/javascript". Now lets analyze line by line, in the first line we are creating a variable myValue which gets the value from textbox via getElementById() method which takes the value from the text box id, similarly we take the id from title. In the if condition, if the length of the code entered is 0, then it will display "Nothing entered, enter a valid character", else it will take the value from textbox and put the value in title. (Remember that this is just the starting of the javascript series tutorial, its highly recommended not to put your javascript code under the head tag, the exact reason will be discussed in the following tutorials.</p>
<p>Hope this tutorial finds you interesting, hit the following social buttons below and spread this article.</p>Introduction to Javascript2014-02-23T18:55:00+05:302014-02-23T18:55:00+05:30Deep_Singhtag:thegeekyway.com,2014-02-23:/introduction-javascript/<div style="text-align:center">
<p><a href="//thegeekyway.com/uploads/images/2014/02/IntroductionToJavascript.png" title="Introduction to Javascript"><img alt="Introduction to Javascript" src="//thegeekyway.com/uploads/images/2014/02/IntroductionToJavascript.png"></a></p>
</div>
<p>Hi everyone, welcome to this brief article discussing about javascript, we'll do this by discussing various fundamentals of javascript, javascript is a programming language that as a software developer you can't ignore. Javascript was first demonstrated and announced at conference at SanFrancisco in 1995, over the time web browsers emerged …</p><div style="text-align:center">
<p><a href="//thegeekyway.com/uploads/images/2014/02/IntroductionToJavascript.png" title="Introduction to Javascript"><img alt="Introduction to Javascript" src="//thegeekyway.com/uploads/images/2014/02/IntroductionToJavascript.png"></a></p>
</div>
<p>Hi everyone, welcome to this brief article discussing about javascript, we'll do this by discussing various fundamentals of javascript, javascript is a programming language that as a software developer you can't ignore. Javascript was first demonstrated and announced at conference at SanFrancisco in 1995, over the time web browsers emerged and javascript became one of the premium programming language of the future.</p>
<p>Javascript is not only used for making web pages but also for making applications, infact in September 2011 Microsoft announced it that it would be making javascript as a first class language for making native windows applications alongside C++ and C#.</p>
<p>Javascript is moved mainly from inside a browser only to also being used on web server for application logic, file logic, accessing database server and so on.</p>
<p>When your web browser downloads a web page it starts to parse all the html of webpage it starts creating a series of object of the webpage, that series of objects contains like its content and attributes and so on. This is known as <strong>Document Object Model</strong> or the <strong>DOM</strong> Elements. So you can use javascript to access the DOM in order to change the response on the web page. For example : A user might hover its mouse over an element, or clicking an element.</p>
<p>There is no "RIGHT WAY" to include a javascript file in html, but there are some practices that are being followed to include javascript. There is at least 3 different ways to include javascript.</p>
<p>Various uses of Javascript are</p>
<ul>
<li>Javascript is used for show or hide text or image, based on some interaction on webpage.</li>
<li>Javascript is being used to apply styling on webpage.</li>
<li>Javascript is used for client side form field validation, as a first line of defense before sending data to web server.</li>
<li>Javascript has been used to animate element on screen (such as color/ opacity transition, moving graphics around the page, sliding elements around the page).</li>
<li>Entire games can be loaded via javascripts.</li>
<li>It can be used to communicate to web server without the need for http post or get.</li>
<li>And many more</li>
</ul>
<p>HTML 5 and CSS 3 has reduced the need for javascript in some of these scenarios, some form validations, some animations, these are now handled by HTML 5 and CSS 3.</p>
<p>What you should know before we move on to our next article</p>
<ul>
<li>First of all since you have interest in javascript then you are an active web designer, then you should be familiar with HTML and CSS and good understanding on how to work.</li>
<li>Recognize JavaScript in documents if you saw it, you dont have to use it before you should know how a javascript looks like.</li>
</ul>
<p style="font-size: x-large;">What is Javascript ?</p>
<p>The most common question before anyone starts working in Javascript is, "What is <strong>JavaSript</strong> ? " Remember that <strong>Javascript is NOT Java</strong>. They are totally different, let not the name confuse you.</p>
<div style="text-align:center">
<p><a href="//thegeekyway.com/uploads/images/2014/02/java_logo.png" title="Javascript is Not Java"><img alt="javascript" src="//thegeekyway.com/uploads/images/2014/02/java_logo.png"></a></p>
</div>
<ul>
<li>Javscript is the programming language of the web.</li>
<li>It creates interactively, it helps you to click, drag, tap, swipe, tap, etc.</li>
<li>It is most commonly used for front end development, i.e any kind of programming that happens in a web browser.</li>
<li>It is also used in back end development as well like Node.JS.</li>
<li>So javascript is used for any programming on the web.</li>
</ul>
<p style="font-size: x-large;">Where should we not use javascript ?</p>
<ul>
<li>We should use CSS3 transitions instead of Javascript, CSS3 transitions are more powerful, especially on mobile platform where they are more performant.</li>
<li>CSS can handle hover and focus events (like rollover menus. tooltips, etc) we dont need javascript at all.</li>
<li>HTML5 form controls can be used as custom widgets (like range controls, sliders, etc), this will help on mobile platforms.</li>
</ul>
<p>Hope this article might give you some information about javascript or make some interest in javascript. In our next article we will discuss about writing our first Javascript application.</p>