DEV Community: Rajdeep Singh

mkdir Command in Linux

Rajdeep Singh — Thu, 04 Feb 2021 12:45:47 +0000

mkdir Command helps to create new directories. If the directory present already in the case doesn’t create new directories and gives a warning message inside the terminal.

Syntax:

mkdir [OPTION]... DIRECTORY...

Command Options

mkdir -m=Mode linuxBook

-m Option help to assign new permission on creating time (Like in chmod)

Mode Options:

rwx: read-write execute permission on this file
wx: only write execute permission on this file
rx: only Read execute permission on this file
rw: only Read execute permission on this file

mkdir -p or mkdir --parents

-p option does not show an error if the directory exists. also, the directory that exists then overwrites your directory. your directory does not exist then create a new directory.

mkdir -v or mkdir --verbose

check working behind mkdir command and print a message in the terminal after each created directory

mkdir --help

display this help and exit

mkdir --version

output mkdir command version information.

man mkdir

print mkdir manual page Information Inside Your Cmd Tool.

Hire me:

Fiverr:

https://www.fiverr.com/users/officialrajdeep/

Upwork:

https://www.upwork.com/freelancers/~01a4e8ba7a41795229

Contact me

What’s react-bootstrap and How to use it?

Rajdeep Singh — Wed, 19 Feb 2020 12:53:09 +0000

Hey, my Name Rajdeep Singh. in the article, we learn react-bootstrap in an easy way.

React-bootstrap is a front-End Stylesheet library. this library builds with two libraries one is react.js and secondly bootstrap.

But when use bootstrap in react.js in this way you use react-bootstrap. why because react-bootstrap provide all bootstrap functionality in our react.js project.

React-bootstrap is bad for us?

My opinion about React-bootstrap is a time saver for developer.but increase HTML, CSS, and increase unuse CSS our small project.

Tip: my tip is very simple to use sass in your React-bootstrap project and optimize your web speed and decrease your file size.

Note: depending on upon your requirements

How to use it?

React-bootstrap easy to use in your project.when build react.js app use of NPM

Create react app npx create-react-app my-app
cd my-app
npm install react-bootstrap bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’;

After installing react-bootstrap after import CSS on your src/index.js or App.js Component.

How to use in the component file:

import React from "react";
// react bootstrap componentimport Card from 'react-bootstrap/Card'
import CardDeck from 'react-bootstrap/CardDeck'
import Button from 'react-bootstrap/Button'//  import bootstrap css file here
import 'bootstrap/dist/css/bootstrap.min.css';//  import bootstrap sass file on style.css
// https://getbootstrap.com/docs/4.4/getting-started/theming/#sass
// @import "../node_modules/bootstrap/scss/bootstrap";import "./styles.css";export default function App() {
return (
<CardDeck>
<Card className="card">
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</Card.Text>
</Card.Body>
<Card.Footer>
<Button> Read me </Button>
</Card.Footer>
</Card><Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional content.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button> Read me </Button>
</Card.Footer>
</Card><Card>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button> Read me </Button>
</Card.Footer>
</Card>
</CardDeck>
);
}

Demo:

Reference:

https://getbootstrap.com/docs/4.4/getting-started/introduction/
https://reactjs.org/docs/create-a-new-react-app.html
https://react-bootstrap.github.io/getting-started/introduction/
https://getbootstrap.com/docs/4.4/getting-started/theming/#sass
https://www.w3schools.com/bootstrap4/default.asp
https://www.w3schools.com/REACT/default.asp

My stuff on medium about Reactjs:

Basic Infomation about sass/scss. According to Wikipedia sass is a… | by Rajdeep Singh | FrontEnd Web | Medium

Rajdeep Singh ・ Sep 28, 2022 ・
Medium

How to add scss/sass in react.js? | by Rajdeep Singh | FrontEnd Web | Medium

Rajdeep Singh ・ Sep 28, 2022 ・
Medium

Conclusion

I hope you understand how to use React-bootstrap. Any query, mistake, and Suggestion plz tell me in the comment box after we update our article.

https://www.officialrajdeepsingh.dev/
https://officialrajdeepsingh.medium.com/

Contact me

https://www.facebook.com/officialrajdeepsingh/
officialrajdeepsingh@gmail.com

Thanks for Reading

How to add scss/sass in react.js?

Rajdeep Singh — Tue, 04 Feb 2020 06:47:31 +0000

Hey, my name is Rajdeep Singh. in this article, I’m told you How to add scss or sass in your react project.

demo:
https://codesandbox.io/s/how-to-add-scsssass-inreactjs-04wg0?fontsize=14&hidenavigation=1&theme=dark

What is Sass?
According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).

FOR MORE:
Basic Infomation about sass/scss According to Wikipedia sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style…medium.com

Let’s start:
If you use the create-react-app in your project use npm, you can easily install and use Sass in your React projects with 3 simple steps.

Steps:
1.Install node-sass: npm install node-sass
2.Change file extension .css to .scss
3.Import your .scss files in your React components

demo:

https://codesandbox.io/s/how-to-add-scsssass-inreactjs-04wg0?fontsize=14&hidenavigation=1&theme=dark

Conclusion:
my thought read this article you definitely use sass or scss in your project any problem, query, suggestion tell me to comment below.

thanks for reading
— happy coding —

what is angular

Rajdeep Singh — Mon, 14 Oct 2019 13:46:14 +0000

Angular a javascript library framework is written in typescript.
TypeScript open-source web application framework the Angular Team use in Angular.
Angular base on Component uses the angular Component to create a responsive web layout.

Angular feature:

Component
Directives
Modules
Forms
Services
Http
And many more

What is the angular version?
Angular version numbers have three parts:

1.major

2.minor

3.patch

Example: version 7.2.11

version:
October November 2019 ^8.0.0
May 2020 ^9.0.0

More version details

How to Install angular?
First setup environment for Angular development using the Angular CLI tool. use the CLI, create an initial workspace and starter app, and running that app locally to verify your setup.

Step 1:Install the Node.JS
First Install node.js on your machine.make sure Node.js version 10.9.0 or latest.
To check your version, run node -v in a terminal/console window.
To get Node.js, go to nodejs.org download it.

Step 2: Install the Angular CLI
You use the Angular CLI tool to create a project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
Make sure to install the Angular CLI globally.
To install the CLI using npm command:
npm install -g @angular/cli

Step 3: Create the first App:
To create a new workspace or app:
run the CLI command in terminal ng new and provide the name my-app, as shown here:
ng new my-app

Step 4: Run the application.
The Angular CLI includes a server so that you can easily run an app on the browser.

Go to the workspace folder (my-app).
Launch the server by using the CLI command ng serve, with the — open option.

cd my-app
ng serve — open

The — open (or just -o) option automatically opens your app in the browser (default ) to http://localhost:4200/.

Note: First go to the workspace folder than use ng serve command.

Angular 8 home page in your browser.

DEV Community: Rajdeep Singh

mkdir Command in Linux

Command Options

mkdir -m=Mode linuxBook

Mode Options:

mkdir -p or mkdir --parents

mkdir -v or mkdir --verbose

mkdir --help

mkdir --version

man mkdir

Hire me:

Fiverr:

Upwork:

Contact me

What’s react-bootstrap and How to use it?

Hey, my Name Rajdeep Singh. in the article, we learn react-bootstrap in an easy way.

React-bootstrap is bad for us?

How to use it?

How to use in the component file:

Demo:

Reference:

My stuff on medium about Reactjs:

Basic Infomation about sass/scss. According to Wikipedia sass is a… | by Rajdeep Singh | FrontEnd Web | Medium

Rajdeep Singh ・ Sep 28, 2022 ・ Medium

How to add scss/sass in react.js? | by Rajdeep Singh | FrontEnd Web | Medium

Rajdeep Singh ・ Sep 28, 2022 ・ Medium

Conclusion

Read More

Contact me

How to add scss/sass in react.js?

what is angular

Rajdeep Singh ・ Sep 28, 2022 ・
Medium

Rajdeep Singh ・ Sep 28, 2022 ・
Medium