Happy Coding !!

Wednesday, 15 June 2022

Microsoft Logo using flexbox and Reactjs

<!DOCTYPE html>

<html>

<head>

</head>

<style>

div{

display:flex;

flex-wrap: wrap;

width:280px;

}

.boxStyle {

height:50;

width:50px;

padding:20px;

margin:5px;

}

.red{

background-color: red;

}

.blue{

background-color: blue;

}

.yellow{

background-color: yellow;

}

.green{

background-color: green;

}

</style>

<body>

const Container = () => (

<div className="boxStyle green">Green</div>

<div className="boxStyle yellow">Yellow</div>

</>

)

function MsLogo() {

return (<Container />);

}

ReactDOM.render(<MsLogo />, document.getElementById('root'))

</script>

</body>

</html>

Thursday, 30 September 2021

Double elements of an array using reduce

var array = [1,2,3,4];

array.reduce((acc, b, index) => {

acc[index] *=2;

return acc;

}, array);

console.log(array);

Thursday, 5 November 2020

Commonly used Git commands

Getting & Creating Projects

Command	Description
git init	Initialize a local Git repository
git clone ssh://git@github.com/[username]/[repositoryname].git	Create a local copy of a remote repository

Basic Snapshotting

Command	Description
git status	Check status
git add [file-name.txt]	Add a file to the staging area
git add -A	Add all new and changed files to the staging area
git commit -m "[commit message]"	Commit changes
git rm -r [file-name.txt]	Remove a file (or folder)

Branching & Merging

Command	Description
git branch	List branches (the asterisk denotes the current branch)
git branch -a	List all branches (local and remote)
git branch [branch name]	Create a new branch
git branch -d [branch name]	Delete a branch
git push origin --delete [branch name]	Delete a remote branch
git checkout -b [branch name]	Create a new branch and switch to it
git checkout -b [branch name] origin/[branch name]	Clone a remote branch and switch to it
git branch -m [old branch name] [new branch name]	Rename a local branch
git checkout [branch name]	Switch to a branch
git checkout -	Switch to the branch last checked out
git checkout -- [file-name.txt]	Discard changes to a file
git merge [branch name]	Merge a branch into the active branch
git merge [source branch] [target branch]	Merge a branch into a target branch
git stash	Stash changes in a dirty working directory
git stash clear	Remove all stashed entries

Sharing & Updating Projects

Command	Description
git push origin [branch name]	Push a branch to your remote repository
git push -u origin [branch name]	Push changes to remote repository (and remember the branch)
git push	Push changes to remote repository (remembered branch)
git push origin --delete [branch name]	Delete a remote branch
git pull	Update local repository to the newest commit
git pull origin [branch name]	Pull changes from remote repository
git remote add origin ssh://git@github.com/[username]/[repositoryname].git	Add a remote repository
git remote set-url origin ssh://git@github.com/[username]/[repositoryname].git	Set a repository's origin branch to SSH

Inspection & Comparison

Command	Description
git log	View changes
git log --summary	View changes (detailed)
git log --oneline	View changes (briefly)
git diff [source branch] [target branch]	Preview changes before merging

Wednesday, 15 April 2020

Loop through arrays in ReactJs

.map is ES6 feature and used with array; it returns a new array with the results of calling a function for every array element.

'key' attribute is used to uniquely identify elements.

Example:

import React from 'react';

const names = ['John', 'Doe', 'Jenny', 'Marie'];

function App() {

return (

<ul>

{names.map(function(name, index){

return <li key={ index }>{name}</li>;

})}

</ul>

</div>

);

}

export default App;

Result:

Tuesday, 14 April 2020

JSX has a XML/Html like syntax that is why it is called JavaScript syntax extension or JavaScript XML.

JSX is written into JS file and to convert JSX code into browser's understandable code, babel is required.

JSX is the alternative of React.createElements.

JSX is not required to use but it’s recommended because it makes applications to work efficiently and code looks more elegant.

Example:

return (

Boilerplate App

</div>

);

And Babel will transform it into this:

React.createElement("div",

{ className = ‘App’}, "Boilerplate App"

);

As JSX uses ES6 standards of JavaScript, Babel transpile ES6 code into ES5 JavaScript code at runtime so that all the browsers can run the application.

In render function, we specify the HTML output of React component. Because JSX is JavaScript so that we can’t use JavaScript reserve words such as “class” and “for”. We use “className” and “htmlFor” respectively.

To represent nested elements inside render function we need to wrap it with one top-level container element.

For e.g:

return (

<p>

Boilerplate App

</p>

</header>

</div>

);

Expressions in JSX

Expression in React is same as Angular, we write the expression inside curly braces { } and JSX returns the result of expression. Expression can be anything like variable, property or other JS validation.

For example:

const _element = <h1>Evaluate {9 + 5} expression with JSX</h1>;

Attributes in JSX

JSX tags also have attributes, tag names, and children. It uses camelCase naming convention for attributes such as className. We can add custom attributes in JSX by using ‘data-‘ prefix.

Boilerplate App

</p>

Styling in JSX

Inline styling is achieved in JSX by using camelCase syntax. React automatically adds “px” after number value.

Example:

const myText = {

paddingTop : 10,

fontSize: 100,

color: '#FF0000',

border: '1px red solid'

}

function App() {

return (

Boilerplate App

</p>

</div>

);

}

export default App;

Monday, 30 March 2020

ReactJS - Project setup using “create-react-app” command – Part 2

Required

Download Nodejs from https://nodejs.org/en/download/
Code Editor - VS Code or whichever suits

By using the “create-react-app” command:

This is a simple method to install ReactJS, below are the steps of creating react project:

1. Run npm install -g create-react-app

2. Now React CLI is available to use as check in below image

3. Create first boilerplate app using create-react-app command

a. create-react-app boilerplate_app

This command will generate project folder and install all the required packages within project folder

4. Project name should not contain any capital letter

5. If you are getting any error related to create-react-app command then add your node_modules (C:\Users\Admin\AppData\Roaming\npm\node_modules) path to Environment Variables > Path

6. Go into boilerplate_app

7. Run npm start

8. By default browser will auto-open a tab that will points to http://localhost:3000/ but in case browser not auto open go to on browser and type above path. Now you will see below screen:

9. You can go into App.js under src folder and change the html whatever you want

Happy Coding !!

Total Pageviews

Wednesday, 15 June 2022

Microsoft Logo using flexbox and Reactjs

Thursday, 30 September 2021

Double elements of an array using reduce

Thursday, 5 November 2020

Commonly used Git commands

Wednesday, 15 April 2020

Loop through arrays in ReactJs

Tuesday, 14 April 2020

ReactJS - JSX

Monday, 30 March 2020

ReactJS - Project setup using “create-react-app” command – Part 2

Microsoft Logo using flexbox and Reactjs

Search This Blog