Shubham Ankit

Shubham Ankit

1548060881

JavaScript Basics Before You Learn React

In an ideal world, you can learn all about JavaScript and web development before you dive into React. Unfortunately, we live in a not-perfect world, so chomping down on ALL of JavaScript before React will just make you bleed hard. If you already have some experience with JavaScript, all you need to learn before React is just the JavaScript features you will actually use to develop React application. Things about JavaScript you should be comfortable with before learning React are:

It's the 20% of JavaScript features that you will use 80% of the time, so in this tutorial I will help you learn them all.

Exploring Create React App

The usual case of starting to learn React is to run the create-react-apppackage, which sets up everything you need to run React. Then after the process is finished, opening src/app.js will present us with the only React class in the whole app:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
return (
<div className=“App”>
<header className=“App-header”>
<img src={logo} className=“App-logo” alt=“logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=“App-link”
href=“https://reactjs.org
target=“_blank”
rel=“noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
}

export default App;

If you never learned ES6 before, you’d think that this class statement is a feature of React. It’s actually a new feature of ES6, and that’s why learning ES6 properly would enable you to understand React code better. We’ll start with ES6 classes.

ES6 Classes

ES6 introduced class syntax that is used in similar ways to OO language like Java or Python. A basic class in ES6 would look like this:

class Developer {
constructor(name){
this.name = name;
}

hello(){
return ‘Hello World! I am ’ + this.name + ’ and I am a web developer’;
}
}

class syntax is followed by an identifier (or simply name) that can be used to create new objects. The constructor method is always called in object initialization. Any parameters passed into the object will be passed into the new object. For example:

var nathan = new Developer(‘Nathan’);
nathan.hello(); // Hello World! I am Nathan and I am a web developer

A class can define as many methods as the requirements needed, and in this case, we have the hello method which returns a string.

Class inheritance

A class can extends the definition of another class, and a new object initialized from that class will have all the methods of both classes.

class ReactDeveloper extends Developer {
installReact(){
return ‘installing React … Done.’;
}
}

var nathan = new ReactDeveloper(‘Nathan’);
nathan.hello(); // Hello World! I am Nathan and I am a web developer
nathan.installReact(); // installing React … Done.

The class that extends another class is usually called child class or sub class, and the class that is being extended is called parent class or super class. A child class can also override the methods defined in parent class, meaning it will replace the method definition with the new method defined. For example, let’s override the hello function:

class ReactDeveloper extends Developer {
installReact(){
return ‘installing React … Done.’;
}

hello(){
return ‘Hello World! I am ’ + this.name + ’ and I am a REACT developer’;
}
}

var nathan = new ReactDeveloper(‘Nathan’);
nathan.hello(); // Hello World! I am Nathan and I am a REACT developer

There you go. The hello method from Developer class has been overridden.

Use in React

Now that we understand ES6 class and inheritance, we can understand the React class defined in src/app.js. This is a React component, but it’s actually just a normal ES6 class which inherits the definition of React Component class, which is imported from the React package.

import React, { Component } from ‘react’;

class App extends Component {
// class content
render(){
return (
<h1>Hello React!</h1>
)
}
}

This is what enables us to use the render() method, JSX, this.state, other methods. All of this definitions are inside the Component class. But as we will see later, class is not the only way to define React Component. If you don’t need state and other lifecycle methods, you can use a function instead.

Declaring variables with ES6 let and const

Because JavaScript var keyword declares variable globally, two new variable declarations were introduced in ES6 to solve the issue, namely letand const. They are all the same, in which they are used to declare variables. The difference is that const cannot change its value after declaration, while let can. Both declarations are local, meaning if you declare let inside a function scope, you can’t call it outside of the function.

const name = “David”;
let age = 28;
var occupation = “Software Engineer”;

Which one to use?

The rule of thumb is that declare variable using const by default. Later when you wrote the application, you’ll realize that the value of const need to change. That’s the time you should refactor const into let. Hopefully it will make you get used to the new keywords, and you’ll start to recognize the pattern in your application where you need to use const or let.

When do we use it in React?

Everytime we need variables. Consider the following example:

import React, { Component } from ‘react’;

class App extends Component {
// class content
render(){
const greeting = ‘Welcome to React’;
return (
<h1>{greeting}</h1>
)
}
}

Since greeting won’t change in the entire application lifecycle, we define it using const here.

The arrow function

Arrow function is a new ES6 feature that’s been used almost widely in modern codebases because it keeps the code concise and readable. This feature allows us to write functions using shorter syntax

// regular function
const testFunction = function() {
// content…
}

// arrow function
const testFunction = () => {
// content…
}

If you’re an experienced JS developer, moving from the regular function syntax to arrow syntax might be uncomfortable at first. When I was learning about arrow function, I used this simple 2 steps to rewrite my functions:

  1. remove function keyword
  2. add the fat arrow symbol => after ()

the parentheses are still used for passing parameters, and if you only have one parameter, you can omit the parentheses.


const testFunction = (firstName, lastName) => {
return firstName+’ '+lastName;
}

const singleParam = firstName => {
return firstName;
}

Implicit return

If your arrow function is only one line, you can return values without having to use the return keyword and the curly brackets {}

const testFunction = () => ‘hello there.’;
testFunction();

Use in React

Another way to create React component is to use arrow function. React take arrow function:

const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}

as equivalent to an ES6 class component

class HelloWorld extends Component {
render() {
return (
<h1>{props.hello}</h1>;
);
}
}

Using arrow function in your React application makes the code more concise. But it will also remove the use of state from your component. This type of component is known as stateless functional component. You’ll find that name in many React tutorials.

Destructuring assignment for arrays and objects

One of the most useful new syntax introduced in ES6, destructuring assignment is simply copying a part of object or array and put them into named variables. A quick example:

const developer = {
firstName: ‘Nathan’,
lastName: ‘Sebhastian’,
developer: true,
age: 25,
}

//destructure developer object
const { firstName, lastName } = developer;
console.log(firstName); // returns ‘Nathan’
console.log(lastName); // returns ‘Sebhastian’
console.log(developer); // returns the object

As you can see, we assigned firstName and lastName from developer object into new variable firstName and lastName. Now what if you want to put firstName into a new variable called name?

const { firstName:name } = developer;
console.log(name); // returns ‘Nathan’

Destructuring also works on arrays, only it uses index instead of object keys:

const numbers = [1,2,3,4,5];
const [one, two] = numbers; // one = 1, two = 2

You can skip some index from destructuring by passing it with ,:

const [one, two, , four] = numbers; // one = 1, two = 2, four = 4

Use in React

Mostly used in destructuring state in methods, for example:

reactFunction = () => {
const { name, email } = this.state;
};

Or in functional stateless component, consider the example from previous chapter:

const HelloWorld = (props) => {
return <h1>{props.hello}</h1>;
}

We can simply destructure the parameter immediately:

const HelloWorld = ({ hello }) => {
return <h1>{hello}</h1>;
}

Map and filter

Although this tutorial focuses on ES6, JavaScript array map and filtermethods need to be mentioned since they are probably one of the most used ES5 features when building React application. Particularly on processing data.

These two methods are much more used in processing data. For example, imagine a fetch from API result returns an array of JSON data:

const users = [
{ name: ‘Nathan’, age: 25 },
{ name: ‘Jack’, age: 30 },
{ name: ‘Joe’, age: 28 },
];

Then we can render a list of items in React as follows:

import React, { Component } from ‘react’;

class App extends Component {
// class content
render(){
const users = [
{ name: ‘Nathan’, age: 25 },
{ name: ‘Jack’, age: 30 },
{ name: ‘Joe’, age: 28 },
];

return (
  &lt;ul&gt;
    {users
      .map(user =&gt; &lt;li&gt;{user.name}&lt;/li&gt;)
    }
  &lt;/ul&gt;
)

}
}

We can also filter the data in the render.

<ul>
{users
.filter(user => user.age > 26)
.map(user => <li>{user.name}</li>)
}
</ul>

ES6 module system

The ES6 module system enables JavaScript to import and export files. Let’s see the src/app.js code again in order to explain this.

import React, { Component } from ‘react’;
import logo from ‘./logo.svg’;
import ‘./App.css’;

class App extends Component {
render() {
return (
<div className=“App”>
<header className=“App-header”>
<img src={logo} className=“App-logo” alt=“logo” />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className=“App-link”
href=“https://reactjs.org
target=“_blank”
rel=“noopener noreferrer”
>
Learn React
</a>
</header>
</div>
);
}
}

export default App;

Up at the first line of code we see the import statement:

import React, { Component } from ‘react’;

and at the last line we see the export default statement:

export default App;

To understand these statements, let’s discuss about modules syntax first.

A module is simply a JavaScript file that exports one or more values (can be objects, functions or variables) using the export keyword. First, create a new file named util.js in the src directory

touch util.js

Then write a function inside it. This is a default export

export default function times(x) {
return x * x;
}

or multiple named exports

export function times(x) {
return x * x;
}

export function plusTwo(number) {
return number + 2;
}

Then we can import it from src/App.js

import { times, plusTwo } from ‘./util.js’;

console.log(times(2));
console.log(plusTwo(3));

You can have multiple named exports per module but only one default export. A default export can be imported without using the curly braces and corresponding exported function name:

// in util.js
export default function times(x) {
return x * x;
}

// in app.js
export k from ‘./util.js’;

console.log(k(4)); // returns 16

But for named exports, you must import using curly braces and the exact name. Alternatively, imports can use alias to avoid having the same name for two different imports:

// in util.js
export function times(x) {
return x * x;
}

export function plusTwo(number) {
return number + 2;
}

// in app.js
import { times as multiplication, plusTwo as plus2 } from ‘./util.js’;

Import from absolute name like:

import React from ‘react’;

Will make JavaScript check on node_modules for the corresponding package name. So if you’re importing a local file, don’t forget to use the right path.

Use in React

Obviously we’ve seen this in the src/App.js file, and then in index.js file where the exported App component is being rendered. Let’s ignore the serviceWorker part for now.

//index.js file

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import * as serviceWorker from ‘./serviceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Notice how App is imported from ./App directory and the .js extension has been omitted. We can leave out file extension only when importing JavaScript files, but we have to include it on other files, such as .css. We also import another node module react-dom, which enables us to render React component into HTML element.

As for PWA, it’s a feature to make React application works offline, but since it’s disabled by default, there’s no need to learn it in the beginning. It’s better to learn PWA after you’re confident enough building React user interfaces.

Conclusion

The great thing about React is that it doesn’t add any foreign abstraction layer on top of JavaScript as other web frameworks. That’s why React becomes very popular with JS developers. It simply uses the best of JavaScript to make building user interfaces easier and maintainable. There really is more of JavaScript than React specifix syntax inside a React application, so once you understand JavaScript better — particularly ES6 — you can write React application with confident. But it doesn’t mean you have to master everything about JavaScript to start writing React app. Go and write one now, and as opportunities come your way, you will be a better developer.

Thanks for reading and I hope you learned some new things :)


By :  Nathan Sebhastian


#javascript #reactjs

What is GEEK

Buddha Community

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Sival Alethea

Sival Alethea

1624298400

Learn JavaScript - Full Course for Beginners. DO NOT MISS!!!

This complete 134-part JavaScript tutorial for beginners will teach you everything you need to know to get started with the JavaScript programming language.
⭐️Course Contents⭐️
0:00:00 Introduction
0:01:24 Running JavaScript
0:04:23 Comment Your Code
0:05:56 Declare Variables
0:06:15 Storing Values with the Assignment Operator
0:11:31 Initializing Variables with the Assignment Operator
0:11:58 Uninitialized Variables
0:12:40 Case Sensitivity in Variables
0:14:05 Add Two Numbers
0:14:34 Subtract One Number from Another
0:14:52 Multiply Two Numbers
0:15:12 Dividing Numbers
0:15:30 Increment
0:15:58 Decrement
0:16:22 Decimal Numbers
0:16:48 Multiply Two Decimals
0:17:18 Divide Decimals
0:17:33 Finding a Remainder
0:18:22 Augmented Addition
0:19:22 Augmented Subtraction
0:20:18 Augmented Multiplication
0:20:51 Augmented Division
0:21:19 Declare String Variables
0:22:01 Escaping Literal Quotes
0:23:44 Quoting Strings with Single Quotes
0:25:18 Escape Sequences
0:26:46 Plus Operator
0:27:49 Plus Equals Operator
0:29:01 Constructing Strings with Variables
0:30:14 Appending Variables to Strings
0:31:11 Length of a String
0:32:01 Bracket Notation
0:33:27 Understand String Immutability
0:34:23 Find the Nth Character
0:34:51 Find the Last Character
0:35:48 Find the Nth-to-Last Character
0:36:28 Word Blanks
0:40:44 Arrays
0:41:43 Nest Arrays
0:42:33 Access Array Data
0:43:34 Modify Array Data
0:44:48 Access Multi-Dimensional Arrays
0:46:30 push()
0:47:29 pop()
0:48:33 shift()
0:49:23 unshift()
0:50:36 Shopping List
0:51:41 Write Reusable with Functions
0:53:41 Arguments
0:55:43 Global Scope
0:59:31 Local Scope
1:00:46 Global vs Local Scope in Functions
1:02:40 Return a Value from a Function
1:03:55 Undefined Value returned
1:04:52 Assignment with a Returned Value
1:05:52 Stand in Line
1:08:41 Boolean Values
1:09:24 If Statements
1:11:51 Equality Operator
1:13:18 Strict Equality Operator
1:14:43 Comparing different values
1:15:38 Inequality Operator
1:16:20 Strict Inequality Operator
1:17:05 Greater Than Operator
1:17:39 Greater Than Or Equal To Operator
1:18:09 Less Than Operator
1:18:44 Less Than Or Equal To Operator
1:19:17 And Operator
1:20:41 Or Operator
1:21:37 Else Statements
1:22:27 Else If Statements
1:23:30 Logical Order in If Else Statements
1:24:45 Chaining If Else Statements
1:27:45 Golf Code
1:32:15 Switch Statements
1:35:46 Default Option in Switch Statements
1:37:23 Identical Options in Switch Statements
1:39:20 Replacing If Else Chains with Switch
1:41:11 Returning Boolean Values from Functions
1:42:20 Return Early Pattern for Functions
1:43:38 Counting Cards
1:49:11 Build Objects
1:50:46 Dot Notation
1:51:33 Bracket Notation
1:52:47 Variables
1:53:34 Updating Object Properties
1:54:30 Add New Properties to Object
1:55:19 Delete Properties from Object
1:55:54 Objects for Lookups
1:57:43 Testing Objects for Properties
1:59:15 Manipulating Complex Objects
2:01:00 Nested Objects
2:01:53 Nested Arrays
2:03:06 Record Collection
2:10:15 While Loops
2:11:35 For Loops
2:13:56 Odd Numbers With a For Loop
2:15:28 Count Backwards With a For Loop
2:17:08 Iterate Through an Array with a For Loop
2:19:43 Nesting For Loops
2:22:45 Do…While Loops
2:24:12 Profile Lookup
2:28:18 Random Fractions
2:28:54 Random Whole Numbers
2:30:21 Random Whole Numbers within a Range
2:31:46 parseInt Function
2:32:36 parseInt Function with a Radix
2:33:29 Ternary Operator
2:34:57 Multiple Ternary Operators
2:36:57 var vs let
2:39:02 var vs let scopes
2:41:32 const Keyword
2:43:40 Mutate an Array Declared with const
2:44:52 Prevent Object Mutation
2:47:17 Arrow Functions
2:28:24 Arrow Functions with Parameters
2:49:27 Higher Order Arrow Functions
2:53:04 Default Parameters
2:54:00 Rest Operator
2:55:31 Spread Operator
2:57:18 Destructuring Assignment: Objects
3:00:18 Destructuring Assignment: Nested Objects
3:01:55 Destructuring Assignment: Arrays
3:03:40 Destructuring Assignment with Rest Operator to Reassign Array
3:05:05 Destructuring Assignment to Pass an Object
3:06:39 Template Literals
3:10:43 Simple Fields
3:12:24 Declarative Functions
3:12:56 class Syntax
3:15:11 getters and setters
3:20:25 import vs require
3:22:33 export
3:23:40 * to Import
3:24:50 export default
3:25:26 Import a Default Export
📺 The video in this post was made by freeCodeCamp.org
The origin of the article: https://www.youtube.com/watch?v=PkZNo7MFNFg&list=PLWKjhJtqVAblfum5WiQblKPwIbqYXkDoC&index=4

🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#javascript #learn javascript #learn javascript for beginners #learn javascript - full course for beginners #javascript programming language

12 Fun Challenges to Learn React Native

So you want to learn React Native? Here’s 12 exercises to that will help you do that.

The post is inspired by a free self-paced workshop I’ve created. If you’re interested in guided instructions, solutions, and extra exercises check it out!

Exercise 1: Hello, World!

The classic starter project. Render a square with a background color. Inside of the square render the text “Hello, world”.

Helpful Links

Exercise 2: Capturing Taps

An app isn’t much if a user can’t interact with it. The most basic form of interaction is capturing a user’s tap (or press) on a screen. Using the

Buttoncomponent, capture a tap event andalert"hello".

#react-native #mobile-app-development #beginners #react #javascript #learn-react-native #programming #learn-to-code

Learning JavaScript: Working with Strings

Strings are the second most common data type used in JavaScript, and in many cases, since JavaScript is so widely used for web applications, it is the prominent data type. In this article I’ll discuss how strings work in JavaScript and how to work with them efficiently and effectively. I’ll also discuss some newer abilities of strings that are just being discovered and used.

Strings Defined

A string is any set of 0 or more characters enclosed in either single quotes or double quotes. The characters in a string can be alphabetic characters, numbers, symbols, and spaces. Here are some examples of JavaScript string literals:

"hello world"
'good bye, world!'
"1600 Pennsylvania Avenue"
'$*&!@ it!'

If you are using single quotes in your string, and you need to embed a single quote to write out a contraction, you use the backslash character (\) as an escape character. To see why you need to do this, let’s look at what happens when you don’t escape a single quote by writing out such a string in the JavaScript shell:

js> 'can't'
typein:1:5 SyntaxError: unexpected token: identifier:
typein:1:5 'can't'
typein:1:5 .....^

The interpreter can’t figure out what to do with the ‘t’ after the single quote.

Now watch what happens when we escape the single quote:

js> 'can\'t'
"can't"

The escape character tells the interpreter to treat the single quote as an apostrophe and not as an “end-of-string” character.

You can embed other characters into a string, including the newline character (\n) and the tab character (\t). Here are some examples using the shell:

js> print("Hello, \n world!");
Hello,
world!
js> print("Hello, \tworld");
Hello,  world

#javascript-training #learn-to-code #learn-to-program #javascript #javascript-tutorial #deep learning

Tia  Gottlieb

Tia Gottlieb

1596632340

Learning JavaScript: Statements, Arithmetic, and Math

In this article I will discuss how to perform arithmetic and more advanced mathematical operations in JavaScript. First, though, I need to discuss how statements are formed and used in JavaScript.

Statements

JavaScript programs are made up of statements. A statement can be anything from a single function call or command to even just a variable name. JavaScript evaluates statements and then executes them.

For example, when you create a variable, you write a statement:

let number = 100;

JavaScript recognizes this as a statement and evaluates it by following its grammar rules. In this case the rule is to assign the expression on the right-hand sign of the assignment operator to the variable on the left-hand side.

As I mentioned above, a statement can be just an expression, as in the following example:

js> 1;
1

You can do the same thing with a variable:

js> let name = "Brendan";
js> name
"Brendan"

Statements can be much more complicated than these examples, though, as you’ll learn as you get deeper into JavaScript. So far, you have seen examples of two types of statements — variable declaration and assignment statements and print statements.

JavaScript Arithmetic

Arithmetic is performed in JavaScript using the arithmetic operators. There are five arithmetic operators:

  • + (Addition)
  • - (Subtraction)
  • * (Multiplication)
  • / (Division)
  • % (Modulo/Remainder)

These operators are binary operators, meaning there must be values on either side of the operator. The + operator and the -operator can also be used as unary operators, in which can they are used to distinguish the sign (positive or negative) of a number.

The JavaScript arithmetic operators also have an order of operations, or precedence, they follow when used in a statement. The order of operations is: 1) modulo; 2) multiplication and division; 3) addition and subtraction.

You can use parentheses to modify the order of operations. When an arithmetic expression is placed inside parentheses, that expression is evaluated before any other operations.

For example, take the expression:

let n = 100 + 3 * 22;

Does n get the value 2266, 103 * 26, or does the variable get the value 166? Without parentheses the value of n is 166 because the multiplication takes place before the addition due to the precedence of the multiplication operator over the addition operator.

#learn-to-code #learning-javascript #javascript #learn-to-program #deep learning