DEV Community: Rezzak

Basic Git Command

Rezzak — Sat, 05 Nov 2022 15:40:36 +0000

Hi there 🤚

This essential Git commands you must know if you are a beginner in web dev….

Let’s start.

1. git config [options]

👉 Sets the username and email address for commits.

git config –global user.name “jag”

git config –global user.email youremail@gmail.com

2. git init

👉 Initialize repository as git repository

git init

3. git clone [url]

👉 Clone repository from any server like Github Gitlab

git clone https://github.com/yourusername/hello.git

4. git status

👉 Check the current status of working tree

git status

5. git add [filename(s)]

👉Puts the unstage files to staging area

git add index.js

git add .

6. git commit –m [message]

👉 Records changes to the git repository

git commit –m “make it better”

git commit –a // commit all files without message

7. git remote [options] [variables] [url]

👉Connect your local repo to remote over server

git remote add

origin https://github.com/yourusername/repo.git

8. git push [options] [variables] [branch]

👉Push the contents of your local repo to the remote repo

git push –u origin main

9. git pull [variables] [branch] [url]

👉 Fetch and integrate the content of the remote repo to local repo..

git pull origin main

git pull https://github.com/username/repo

10. git checkout [branch]

👉 Move from one branch to another

git checkout roj

11. git checkout [options] [branch]

👉 Create specific branch and simultaneously switches to it

git checkout –b jagroj

12. git branch [options] [branch]

👉 Performs operations over the specified branch

git branch –d jagroj

How to preview your uploaded profile picture in front-end when you uploaded

Rezzak — Tue, 01 Nov 2022 15:16:43 +0000

In this article I will show you how to preview your picture in react/JavaScript when you uploaded..........

Create a new project using react (npx create-react-app your-app-name).
create a form component with file input element tag as follows

import { useRef, useState } from 'react';
import './App.css';
import PreviewProfile from './PreviewProfile';

function App() {
  const [value, setValue] = useState(null);
  const fileRef = useRef(null);

  return (
    <form>
      <input
        hidden
        type="file"
        ref={fileRef}
        onChange={(e) => setValue(e.target.files[0])}
      />
      {value && <PreviewProfile file={value} />}

      <button
        type="button"
        onClick={() => {
          fileRef.current.click();
        }}
      >
        Upload Profile
      </button>
    </form>
  );
}

export default App;

Let's create another component with PreviewProfile.jsx (as your desire) and write the following code:

import React, { useState } from 'react';

function PreviewProfile({ file }) {
  const [preview, setPreview] = useState(null);

  const reader = new FileReader();

  reader.readAsDataURL(file);
  reader.onload = () => {
    setPreview(reader.result);
  };

  return (
    <div>
      <img
        src={preview}
        alt="preview"
        style={{ width: '50px', height: '50px', borderRadius: '50%' }}
      />
    </div>
  );
}

export default PreviewProfile;

and run your application and upload an image and that's all.

How to prevent user to go login or register route if he already logged in

Rezzak — Mon, 10 Oct 2022 17:27:45 +0000

Hi there!
I'm a beginner in MERN Stack Dev. I want to learn how to prevent user to go login/register route in mern using api response , not using any template (ejs or pug). I hope I get the response from my senior developers.
thanks