mobile first flow

In this article we’re going to explore an important topic in web development Mobile first design concept.

Agenda:

What is Mobile first?

Why mobile first design is important?

1- Recently people tend to spend more time using internet from mobile devices.

2- Early in 2012, smartphones sales exceed PC’s sales.

3- If your website is looking &…


javascript history object

History object:

console.log(window.history);


window object

Window object:

It’s the global object that represents the open window in the browser.

alert("hello");     ===     window.alert("hello");
var name = "John";
console.log(name); //John
console.log(window.name); //John

BOM (Browser Object Model): it contains the data about the browser rather than the document to be rendered.

Window object Properties:


Photo by Aaron Andrew Ang on Unsplash

In this article I’ll discuss React Router (V 5.1.1) which is stable now.

What we’re going to discuss in this article:

1- Single Page Applications.

2- What is Routing.

3- What is react-router.

4- What are Route Params.

5- How to navigate between components.

React is useful for creating Single Page Applications (SPAs).

Single Page Applications:


Photo by Christian Burri on Unsplash

To use components you have to create react app first, So I recommend this article to you, it’ll help you a lot: https://medium.com/@sahar.e.hassan/react-definitive-guide-building-your-first-react-app-2df4106a6ac6

What we’re going to discuss in this article:

1- What is props.

2- What is state.

3- Different React components.

Before go deep into React components, there’re two main concepts or features introduced by React: Props and State.

What is Props:


Photo by Jack Chen on Unsplash

If you’re new in React, I recommend reading my first article introducing React js : https://medium.com/@sahar.e.hassan/what-is-react-js-c3c4d5985a7e

What we’re going to discuss in this article:

1- React project prerequisites.

2- React installation.

3- Basic Application structure.

React project prerequisites:

1- Node js.

2- npm (Node Packages Managers) or yarn.

notes:

React installation:

npm install -g create-react-app

Now we’re done with setting up React environment, let’s start creating our first React app.

create-react-app firstApp


React Js

As a front-end developer you may’ve heard about javaScript frameworks and libraries, one of them is React Js which we’re going through in this article.

What is React?

What is Components?

Example:


ES6 new feature: destructuring

ES6 introduced a new feature that makes it easier to deal with arrays and objects which is “destructuring”.

Actually destructring is one of my favorite features that came along with ES6. Today we’re going through object destructring specifically.

Why destructuring?

Assume we have an object with more than one property and we want to read them all.

let myObj = {
name: 'Sahar',
age: 20,
gender: 'female'
}
console.log(myObj.name); //Saharconsole.log(myObj.age); //20console.log(myObj.gender); //female

As you see we’ve to write object name followed by dot ( . ) then property name in case we want to use any of those properties, it…


In this article, we’re going to explore new features that introduced by ES6 — let and const against var.

What is the difference between var, let and const?

Simply they’re 3 ways to declare a new variable in javaScript with some tiny differences we’re going to discuss in this article.

var:

It was the main and only way to declare new variable in javaScript. But it has some issues:

1- It has function scope.

Function scope: it means variable will be available inside the function where it is defined, otherwise it’ll belong to the global scope (window object).

2- It can…

Sahar E.Hassan

Frontend Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store