DEV Community: Shihaan W S

What exactly do props do in React?

Shihaan W S — Thu, 31 Dec 2020 14:49:26 +0000

Props - a beginners guide.

Before getting to know what props are, lets have a basic understanding of what React elements and components are. Also, in this article I’ll be explaining props in the simplest way possible, for all beginners out there who can't get a good grasp around this concept.
So lets get started 💫

React components vs. Elements

As we all know, React uses JSX (JavaScript XML) instead of HTML. JSX allows you to write HTML elements in javascript files, and then translate those HTML tags to React elements.

// This is a React element, not a component
const title = <h1> Heading  </h1>;

This is how a plain <h1> tag looks inside jsx.
So basically, a React element is the smallest building block, and more elements put together form a component

Okay, lets move on to components. A React component is a javascript function which also returns the markup that we want to see (like the elements), but through classical function syntax.

function Component() {
  return <h1>This is the Text</h1>;
}

Here, the component is created as a javascript function, so it is referred to as functional component.
This component is rendered in the same way as an element, by using the render() method of the ReactDOM. But, instead of calling the function name like we do in javascript, we call the React component.

//In React
ReactDOM.render(<Component/>, document.getElementById('id'));
//In Javascript
ReactDOM.render(Component(), document.getElementById('id'));

So, a React element uses regular HTML tags, while in a React component, the function name gives the name of the tag.

Props

Props are the arguments you pass into a React component that then render a React element.It can be a string, object, array or a function used to pass dynamic data between components. React has a uni-directional data flow meaning props get passed from parent to child. Props actually gets passed into React components.

I guess that was not really helpful, so let me reword a little bit to simple language 🔍

Props are like parameters of a function. We use these to make our component dynamic like we use parameters to make our function dynamic.

Was that better? Now with this definition in mind, let me show you a quick example.
Lets look at a component to display a Welcome message to a friend in your channel.

const WelcomeFriend = () => (
    <span>Welcome to my channel, Kiran</span>
)

Now If I want to welcome to any person not just Kiran, I can refactor my component to take in a prop i.e the name of person and rename the component to any common name because now I can use this component to welcome anyone in my channel.

const Welcome = ({name}) => (
    <span>Welcome to my channel, {name}</span>
)

And Now I can Welcome many of my friends like 👇🏻

const App = () => (
    <Welcome name="Sumesh">
    <Welcome name="Keshav">
    <Welcome name="Roger">
)

I hope you found this guide helpful! ✌🏻
I welcome feedback, discussion, and suggestions for concepts you'd like to see me tackle. If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me 📥.
Thanks ✨!

Understanding the 'three dot' operator better.

Shihaan W S — Sat, 19 Dec 2020 16:17:41 +0000

A simple yet powerful operator.

When you look at most of the common web-related programming languages they all have the basic operators, which almost every developer out there knows how to use them. But there are some operators that aren't much common and not every language has them or if they do, they might not share the same syntax. But for newcomers into a language, trying to read other's code and not having the tools required to understand concepts between technologies, it might be a problem. So in this article, I'm going to talk about one most Javascript's underrated and infamous "spread" operator a.k.a the three dot (...) operator. Come! Let's start exploring!

Spread Operator

Javascript has seen massive improvements in its syntax and functionality over the the past few years with the addition of a bunch of new features. Spread is the one among the most useful ones and also the simplest way to go if you want to update a piece of data in an object while creating a new object. Its a very powerful piece of syntax which has a lot of applications in programming.
For now, its hard to keep a track of them all. So lets dig into some of the most common use cases of the spread operator.

Making a copy of an array

Lets understand this with a small example.
Who are your favourite cricketers?
Mine? Its Dhoni and Raina, obviously.
Okay. Lets take this in an array.

let favourites = ["Dhoni","Raina"]
let copy = [...favourites]
console.log(copy);
// ["Dhoni","Raina" ]

If you look at in a different way, the spread operator is selecting each individual element inside the favourite array and placing each of those elements in a new array structure, which is something like spreading. Now you might think what happens if there's no spread operator.

let favourites = ["Dhoni","Raina"]
let copy = [favourites]
console.log(copy);
//  [["Dhoni","Raina" ]]

This ones different because we are getting a multidimensional array (an array inside an array).

Expanding an array

Building on the previous example, lets say I want a new player to be in my favourites list. The Spread operator provides a simple and effective way to do this.

let favourites = ["Dhoni","Raina"]
console.log(...favourites,"Smith");
//  Dhoni Raina Smith

As simple as that. Here we don't get an array since we aren't asking for an array structure unlike we did in the previous case. So this way you could update your data without actually overwriting to your existing data.

String Spreading

The spread operator also works with string spreading. One practical example is extracting characters from a string.

const player = 'Sachin';

//Spread Operator extracts the characters from the String and assigns to an array
const characters = [...player];

console.log(characters); 
//Output -> Array (6) ["S", "a", "c", "h","i","n"]

Merging Objects

Merging of objects is almost similar to merging arrays except for some key-value conditions.
If you have unique key the key-value get added to the new object. If the key is same, the value gets replaced with the new value.

const match1 = 
{ 
  name : "Sachin", 
  score : 56 
};


const match2 = 
{ 
    name : "Sachin", 
    score: 53,
    balls: 32 
};



const match = {...match1, ...match2};
console.log(match) ;
 // Output -> 
             {  name: "Sachin",
                score: 53,
                balls: 32
             };

So that's all for this article. Apart from these, spread syntax has a lot of other applications. Enjoy trying it out and accept these new tools the language is giving you. Hope you loved the article, do let me know your feedback in the comment section below.

For a whole lot about spread syntax please refer to MDN Web Docs.

See you in the next one 👋

Triggering your first API request with Postman.

Shihaan W S — Sat, 28 Nov 2020 08:58:48 +0000

A beginner friendly tutorial to get started with Postman.

Hello there 👋
Almost everyone who works into web development, front-end or back-end, has in some part of their development heard of "Postman" or some other API testing service to test their app they are building. But, do we all know how powerful Postman is?

So today I would like you to join me on a short adventure of writing a simple API test with Postman, let's go!

This Tutorial assumes you to have some familiarity with API. So I am not going to explain what an API is, or why you should care, or any of that.

"A Beginner's Guide To APIs" : Check here!

Basically, You can send requests in Postman to connect to APIs you are working with. Your requests can retrieve, add, delete, and update data. Whether you are building or testing your own API, or integrating with a third-party API, you can try out your requests in Postman.

For example, if you're building a client application (e.g. a mobile or web app) for a shop, you might send one request to retrieve the list of available products, another request to create a new order (including the selected product details), and a different request to log a customer in to their account.

When you send a request, Postman will display the response received from the API server in a way that lets you examine, visualize and troubleshoot.

Okay! Let’s start talking to the API, yeah? First let’s download Postman.
https://www.postman.com/downloads/
Postman is free software that lets you test APIs. You can test other people’s public APIs, like we will do today.

We are going to use @kennethreitz's web-exposed API for our first test, httpbin to try out Postman.

Once you’ve downloaded and installed Postman, if it gives you any tutorial popups, just skip them.There’s a bunch of buttons and words we don’t need to care about right now.

First GET Request

Type http://httpbin.org/get in the enter URL request field.
To try out the endpoint, leave the GET method selected and click Send.

You will find the status code 200 OK which means that EndPoint is correct and it has returned the desired results.

First POST Request

Type http://httpbin.org/post in the enter URL request field.
Leave the POST method selected from the dropdown.
As soon as you select the POST request type in Postman you will see that the option Body is enabled which has different options to send the data inside the body.
- Form-data
- X-www-form-urlencoded
- Raw
- Binary
For post you will need form data to be posted .
For now, lets stick on to form-data. Type your required key-value pair and click Send.

Again you will find the status code 200 OK, the time taken to process your post request and your new JSON data with added key-value data.
So this way you could visualize,test and debug your API endpoints. Wasn't that amazing?

That was all for this article. Today you've learned how to send a GET/POST request to a public API and experimenting with your data.
If you want to learn more about Postman and its features refer to the following links:

Enjoy building cool APIs ✨