DEV Community: Utkarsh Mishra

Github CodeSpaces

Utkarsh Mishra — Thu, 12 Aug 2021 12:46:55 +0000

Under the repository in which you want to customize your project for CodeSpaces, click the following

yes! click . (dot) under any of your repo and you'll be Jumping straight into your Codespace.

Useful Git Commands

Utkarsh Mishra — Mon, 28 Jun 2021 16:57:42 +0000

Hi there! I have made this blog because I forgot some of the git commands every time while using git or GitHub. So I am going to put all the useful git command in this blog so that anyone who is going to get started with open-source get some help and whenever I need I can quickly find those at one place.

Git is so powerful. There are a lot of really cool features. Some other basic functions you'll want to learn is how to git pull, git clone, git merge, git rebase, git stash, git checkout, and git branch. Those are the ones that are needed for base level proficiency in git.

Git Basics

1. To Create empty git repo in specified directory. Run with no arguments

git init

2. For cloning the repo onto your local machine

git clone <repo--HTTP or SSH>

3. To define author name to be used for all commits in current repo

git config user.name <name>

4. To stage all changes in <directory> or <file> for the next commit

git add <directory or file>

you can also use

git add .

5. to List which files are staged, unstaged, and untracked

git status

6. for commit the staged snapshot with a commit message

git commit -m "<message>"

7. to display entire commit history

git log

8. to show unstaged changes b/w your index and working directory or to analyze the current state of the repo

git diff

Git Branch

1. List all of the branches in your repo. Add a argument to create a new branch.

git branch

2. Create and checkout a new branch named .

git checkout -b <branch>

-b flag is for checking out an existing branch

3. Merge into the current branch

git merge <branch>

Remote Repositories

1. Create a new connection to a remote repo.

git remote add <name> <url>

after doing this you can use <name> as a shortcut for <url> in other commands.

2. Fetches a specific , from the repo. Leave off <branch> to fetch all remote refs

git fetch <remote> <branch>

3. Fetch the specified remote's copy of the current branch and immediately merge it into the local copy.

git pull <remote>

4. Push the branch to , along with necessary commit objects. Creates named branch in the remote repo if it doesn't exist

git push <remote> <branch>

Git Rebase

1. Interactively rebase current branch onto <base>.Launches editor to enter commands for how each commit will be transferred to the new base

git rebase -i <base>

Git Pull

1. Fetch the remote's copy of current branch and rebases it into the local copy. Uses git rebase instead of merge to integrate the branches

git pull --rebase <remote>

Git Push

1. to link a local branch with the remote branch. The -u flag is used to set origin as the upstream remote in your git config

git push -u <remote> <branch>

2. Forces the git push even if it results in a non-fast-forward merge. Do not use the --force or -f flag unless you're absolutely sure you know what you're doing

git push <remote> --force

git push -f <remote> <branch>

Undoing Changes

1. Create new commit that undoes all the changes made in , then apply it to the current branch. here we need to a commit reference id

git revert <commitId>

or git revert Head to create a new commit with the reverted changes which had been done in the last commit.

2. To remove file from staging area but leave the working directory unchanged. This unstages a file without overwriting any changes

git reset <file>

3. used to remove unwanted files from your working directory. -n flag is used for double checking before changing, to execute use -f in place of -n

git clean -n

Rewriting History

1. Replace the last commit with the staged changed and last commit combined

git commit --amend

2. Rebase the current branch onto . <base> can be a commit ID, branch name, a tag, or a relative reference to HEAD.

git rebase <base>

3. Show a log of changes to the local repository's HEAD. Add --relative-date flag to show date time info or --all to show all refs.

git reflog

That's all! I think this is more than enough git commands for getting started with open-source and in the last just look at the image below cuz, it is super helpful.

Thank You

React without JSX

Utkarsh Mishra — Sun, 23 May 2021 18:01:49 +0000

Let's talk about the pure React. No JSX, No Babel, No parcel or Webpack. Just some JavaScript inside a file.
Let's start with a project. I have created a project directory and I'm going to call it happyBday since I'm going to be building a Happy Birthday app throughout this blog. Then I have created an index.html file and put it into a src/ directory inside of my project folder. Now Inside index.html put:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>Happy Birthday</title>
</head>

<body>
  <div id="root">Not rendered</div>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script>
    // code is going to go here
  </script>
</body>

</html>

Now just open this file in your browser.

Pretty standard HTML5 document.
We're adding a id root in div.
We have two script tags.
- The first is the React library. This library is the interface of how to interact with React; all the methods (except one) will be via this library. It contains no way of rendering itself though; it's just the API.
- The second library is the rendering layer. Since we're rendering to the browser, we're using React DOM. There are other React libraries like React Native, A-Frame React, React Blessed, and others. We need both script tags. The order is not important.
The last script tag is where we're going to put our code. We don't typically do this but I wanted to start as simple as possible. This script tag must come after the other two.

Now in the last script tag, put the following.

const App= () => {
  return React.createElement(
    "div",
    {},
    React.createElement("h1", {}, "Happy Birthday!")
  );
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

This is the simplest React app one can build.

The first thing i do is make my own component, App. React is all about making components. And then taking those components and making more components out of those.
There are two types of components, function components and class components. This is a function component. We'll not going to see class components in this blog.
A function component must return markup (which is what React.createElement generates.)
Inside of the render function, we cannot modify any sort of state. In functional terms, this function must be pure. You don't know how or when the function will be called so it can't modify any ambient state.
React.createElement creates one instance of some component. If you pass it a string, it will create a DOM tag with that as the string. We used h1 and div, those tags are output to the DOM.
The second empty object (you can put null too) is attributes we're passing to the tag or component. Whatever we put in this will be output to the element (like id or style.)
ReactDOM.render is what takes our rendered App component and puts in the DOM (in our case we're putting it in the root element.)
Notice we're using React.createElement with App as a parameter to ReactDOM.render. We need an instance of App to render out. App is a class of components and we need to render one instance of a class. That's what React.createElement does: it makes an instance of a class.

Now let talk a bit more about Components.

Components

Now let's separate that JS code out from a script tag on the DOM to its own script file. Make a new file in your src directory called App.js and cut and paste your code into it.

Modify your code so it looks like:

const Wish= () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Happy Birthday"),
    React.createElement("h2", {}, "May God bless you!"),
    React.createElement("h2", {}, "~Orio"),
  ]);
};

const App= () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Happy Birthday!"),
    React.createElement(Wish),
    React.createElement(Wish),
    React.createElement(Wish),
  ]);
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

In here:

We created a second new component, the Wish component. This component represents a birthday wish. When you have distinct ideas represented as markup, that's a good idea to separate that it into a component like we did here.
Since we have a new Wish component, we can use it multiple times! We just use multiple calls to React.createElement.
In createElement, the last two parameters are optional. Since Wish has no props or children we can just leave them off.

Let's make it a bit more complicated.

const Wish= (props) => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, props.name),
    React.createElement("h2", {}, props.message),
    React.createElement("h2", {}, props.gift),
  ]);
};

const App = () => {
  return React.createElement("div", {}, [
    React.createElement("h1", {}, "Happy Birthday!"),
    React.createElement(Wish, {
      name: "Orio",
      message: "Wishing you a day filled with happiness and a year filled with joy.",
      gift: "Floss",
    }),
    React.createElement(Wish, {
      name: "Sudo",
      message: "Sending you smiles for every moment of your special day",
      gift: "Lilies",
    }),
    React.createElement(Wish, { 
      name: "Pie", 
      message: "Hope your special day brings you all that your heart desires", 
      gift: "Rose" }),
  ]);
};

ReactDOM.render(React.createElement(App), document.getElementById("root"));

Now we have a more flexible component that accepts props from its parent. Props are variables that a parent (App) passes to its children (the instances of Wish.) Now each one can be different! Now that is far more useful than it was since this Wish component can represent not just Orio, but any person. This is the power of React! We can make multiple, re-usable components. We can then use these components to build larger components. This is how React apps are made.

Now let's talk about React Using JSX. Before jumping into JSX let's first separate Wish component in a new file named as Wish.js.

JSX

So far we've been writing React without JSX, something that I don't know anyone that actually does with their apps. Everyone uses JSX. I show you this way so what JSX is actually doing is demystified to you. It doesn't do hardly anything. It just makes your code a bit more readable.

If I write React.createElement("h1", { id: "main-title" }, "Keep Reacting");, what am I actually trying to have rendered out?
<h1 id="main-title">Keep Reacting</h1>, right? What JSX tries to do is to shortcut this translation layer in your brain so you can just write what you mean. Let's convert Wish.js to using JSX. It will look like this:

const Wish= (props) => {
  return (
    <div>
      <h1>{props.name}</h1>
      <h2>{props.message}</h2>
      <h2>{props.gift}</h2>
    </div>
  );
};

export default Wish;

now you know what JSX is doing for you. It's just translating those HTML tags into React.createElement calls. That's it. Really. No more magic here. JSX does nothing else.

Notice the strange {props.name} syntax: this is how you output JavaScript expressions in JSX

so now let's go convert App.js.

import ReactDOM from "react-dom";
import Wish from "./Wish";

const App = () => {
  return (
    <div>
      <h1>Happy Birthday!</h1>
      <Wish name="Orio" message="Wishing you a day filled with happiness and a year filled with joy." gift="Floss" />
      <Wish name="Sudo" message="Sending you smiles for every moment of your special day" gift="Lilies" />
      <Wish name="Pie" message="Hope your special day brings you all that your heart desires" gift="Rose" />
    </div>
  );
};

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

Notice we have Wish as a component. Notice that the W in Wish is capitalized. It must be. If you make it lowercase, it will try to have wish as a web component and not a React component.

Let me know your thoughts in the comments and please mention your views on your favorite JS frameworks.
Thanks for reading!
Connect to me on: