DEV Community: Tuhirirwe-Maria

What a beginning developer should know before starting React💻

Tuhirirwe-Maria — Sat, 29 Jan 2022 19:40:10 +0000

1. HTML and CSS
HTML and CSS are the core technologies in web development. HTML is the skeleton that creates the elements and layouts for a web page, and CSS adds styling to these various elements and layouts. Mastering HTML and CSS is a vital step.

2. JavaScript
Once you are comfortable with HTML and CSS, you can begin learning JavaScript. JavaScript is a scripting language that allows you to add interactions and logic to your web pages.

3. Version Control(GIT AND GITHUB)
Git is an open source version control tool that lets you manage and keep track of your code and GitHub on the other hand, is a code hosting platform for version control and enables collaboration among developers.

4. JSX
Using React, you can build reusable UI components and pass data between them. Components are written using a special JavaScript syntax extension called JSX (JavaScript XML).

JSX looks similar to HTML syntax and is very powerful, as it can handle JavaScript expressions. In JSX, instead of HTML attributes, props are used to pass data from the parent component to the child component.

5. React components
There are two types of components – class components and function components. React class-components have different lifecycle methods which get called during the render process. React function-components can leverage hooks to handle different states. Both the component types have their pros and cons, and you need to know which one suits your use case.

Happy coding!😎💻

ES6 Javascript features TOP 10 a developer must know😎

Tuhirirwe-Maria — Sun, 23 Jan 2022 09:50:16 +0000

Let's begin with this. ES6 or the ECMAScript 2015 is the 6th and major edition of the ECMAScript language specification standard.In this article, I will introduce the top 10 ES6 features.
. . . . . . . . . . . .

Lets start the interesting parts🤩

1. let and const keywords :

The keyword "let" enables the users to define variables and on the other hand, "const" enables the users to define constants.

With “let and const” we declare a variable similar to var in ES5, but the real difference is that variables declared by var have function scope and are hoisted to the top. Variables declared by “let and const” are scoped in the braces.

2. Arrow Functions :

ES6 provides feature known as Arrow Functions. It provides a more concise syntax for writing function expressions by removing out the "function" and "return" keywords.
Arrow functions are defined using the arrow (=>) notation.

// Arrow function
let sumOfTwoNumbers = (x, y) => x + y; console.log(sum(33, 2)); // Output 35

It is evident that, there is no "return" or "function" keyword in the arrow function declaration.

We can also skip the parenthesis in the case when there is exactly one parameter, but will always need to use it when you have zero or more than one parameter.

But, if there are multiple expressions in the function body, then we need to wrap it with curly braces ("{}"). We also need to use the "return" statement to return the required value

3. Multi-line Strings :

ES6 also provides Multi-line Strings. Users can create multi-line strings by using back-ticks(`).

let greeting = Good morning, Enjoy your day , Happy coding!

4. Default Parameters :

In ES6, users can provide the default values right in the signature of the functions. But, in ES5, OR operator had to be used.

//ES6
let calculateArea = function(height = 100, width = 150) { // logic }

//ES5
var calculateArea = function(height, width) { height = height || 150; width = width || 100; // logic }

5. Template Literals :

ES6 introduces very simple string templates along with placeholders for the variables. The syntax for using the string template is ${PARAMETER} and is used inside of the back-ticked string.

let name = My name is ${firstName} ${lastName}

6. Destructuring Assignment :

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variable.

var o = {p: 42, q: true}; var {p, q} = o; console.log(p); // 42 console.log(q); // true
7.Enhanced Object Literals :

ES6 provides enhanced object literals which make it easy to quickly create objects with properties inside the curly braces.

function getMobile(manufacturer, model, year) { return { manufacturer, model, year } } getMobile("Samsung", "Galaxy", "2020");

8. Promises

In ES6, Promises are used for asynchronous execution. We can use promise with the arrow function as demonstrated below.

var asyncCall = new Promise((resolve, reject) => { // do something resolve(); }).then(()=> { console.log('DON!'); })
9. Classes :

Previously, classes never existed in JavaScript. Classes are introduced in ES6 which looks similar to classes in other object-oriented languages, such as C++, Java etc.

But, they do not work exactly the same way. ES6 classes make it simpler to create objects, implement inheritance by using the "extends" keyword and also reuse the code efficiently.

In ES6, we can declare a class using the new "class" keyword followed by the name of the class.

class UserProfile { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; }

getName() { console.log(The Full-Name is ${this.firstName} ${this.lastName}); }
}
let obj = new UserProfile('John', 'Smith'); obj.getName(); // output: The Full-Name is John Smith`

10. Modules :

In ES6, there are modules with import and export operands.

export var userID = 10; export function getName(name){ //data }

We can import userID variable and getName method using import statement

import {userID, getName} from ‘module’; console.log(userID); // 10

In conclusion,
We also learned about the top 10 features of ES6😎 which makes it very popular.

ES6 provides classes, modules, arrow functions, template literals, destructuring assignments and many more features which makes working with JavaScript a lot easier.

Ultimate HTML and CSS guide.

Tuhirirwe-Maria — Mon, 29 Nov 2021 06:56:50 +0000

HTML (HyperText Markup Language)

The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser.

It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. It describes the structure of Web pages. HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button.
HTML elements are the building blocks of HTML pages.

With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page.

HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.

HTML elements are delineated by tags, written using angle brackets. Tags such as and directly introduce content into the page. Other tags such as

surround and provide information about document text and may include other tags as sub-elements.
Browsers do not display the HTML tags, but use them to interpret the content of the page.

Explaining the HTML skeleton(document)

The <!DOCTYPE html> declaration defines that this document is an HTML5 document

The < html > element is the root element of an HTML page

The < head > element contains meta information about the HTML page

The < title > element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

The < body > element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

The < h1 > element defines a large heading, the < p > element defines a paragraph.

HTML Elements

The HTML element is everything from the start tag to the end tag:
< tag-name >Content goes here...</ tag-name >
Examples of some HTML elements:
< h1 >My First Heading</ h1 >
< p >My first paragraph.</ p >

HTML Attributes
All HTML elements can have attributes. Attributes provide additional information about elements .
Attributes are always specified in the start tag .They usually come in name/value pairs like: name="value" .

HTML Headings

HTML headings are defined with the < h1 > to < h6 > tags.
< h1 > defines the most important heading.
< h6 > defines the least important heading. It is important to use headings to show the document structure.
< h1 > headings should be used for main headings, followed by < h2 > headings, then the less important < h3 >, and so on.

HTML Formatting Elements
< p >< b > I will be bold </ b >< /p >

< b > - Bold text
< strong > - Important text
< i > - Italic text
< em > - Emphasised text
< mark > - Marked text
< small > - Smaller text
< del > - Deleted text
< ins > - Inserted text
< sub > - Subscript text
< sup > - Superscript text

HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source code.
Example
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

Note: Comments are not displayed by the browser, but they can help document your HTML source code..

CSS (Cascading Style Sheets)

CSS stands for Cascading Style Sheets. Basically, CSS is a language that manages the design and presentation of web pages the way things look. It works together with HTML, which handles the content of web pages.

With CSS you can create rules to tell your website how you want it to display information. And you can keep the commands for the style stuff - fonts, colors, and so on - separate from the commands for the content.

They’re called “cascading” because you can have multiple style sheets, with one style sheet inheriting properties (or “cascading”) from others.

For a lot of people a plain old blog template is good enough. It’s only when you want to start customising the look of a site that you need to delve into CSS.

Three Style Sheets

There are three kinds of CSS style sheets: external, internal, and inline.

External styles control how things look across many pages on a website.

Internal styles control the look of just one page.

Inline styles control just one element of a single page, even just a single word.

CSS SYNTAX
h1 { color :red;}
selector declaration

A CSS rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.”
The declaration block contains one or “more declarations separated by semicolons.
Each declaration includes a CSS property name and a value separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

CSS COMENTS
CSS comments are not displayed in the browser, but they can help document your code.
They are used to explain the code at a later date.
It works the same way as the HTML comment but looks different /* my code */

CSS BOX MODEL

The box model is used when talking about design and layout.
It is essentially the box that wraps around every HTML element, consisting of margins, borders, padding and the actual content.
Let’s explain the different parts.
Content - The content of the box, where the text and images appear.
Padding - Clears an area around the content. The padding is transparent.
Border - A border that goes around the padding and content.
Margin - Clears an area outside the border. The margin is also transparent.
The box model allows one to add a border around elements, and to define space between elements.

I can't show everything here but you could checkout W3Schools, CSS Tricks,Cascading Stylesheets MDN and freeCodeCamp to learn more

How to set up a GitHub project for beginners?

Tuhirirwe-Maria — Mon, 29 Nov 2021 05:54:15 +0000

Before I go straight to that Github is a code hosting platform for collaboration and version control. It's a developer tool, however, Github itself isn't much more than a social network like Facebook. You build a profile, upload projects to share, and connect with other users by following their accounts. Not only that but you can also keep text documents and other file types.

You can also use Github without knowing any code at all

The software that runs at the heart of Github is Git. Git is version control software, which means it manages changes to a project without overwriting any part of the project.

Version control is a class of systems responsible for managing changes to computer programs, documents, large websites, or other collections of information. An example is Git.
Setting up Github and Git for the first time.

First, you'll need to sign up for an account on Github.com. it is as simple as signing up for any other social network. To work on your project on your computer, you need to have Git installed. Install Git for Windows, Mac, or Linux as needed.

Now it's time to go over to the command line. On Windows, that means starting the Git Bash app you just installed and on OSX, it's a regular old Terminal. It's time to introduce yourself to Git. Type the following code;

git config –global user.name "Your Name here"

Of course, you'll need to replace "your name here" with your name in quotations.
Next, tell it your email you used when signed up for Github.com. Type;

git config –global user.name "your Email Here"

That's all you need to do to get started using Git on your computer.

Creating your online repository

Now it's time to create a place for your project to live. Both Git and Github refer to this as a repository or "repo" in short, a digital directory or storage space where you can access your project, its files, and all the versions of its files that Git saves.

Go back to Github.com and click the tiny book icon next to your username.
Or go to the new repository page if all icons look the same.
Give your repository a short, memorable name
Go ahead and makes it public just for kicks; why hide your attempt to learn Github?

Don't worry about clicking the checkbox next to "initialise this repository with a README." A readme file is usually a text file that explains a bit about the project. But we can make our own Readme File locally for practice.

Click the green "Create Repository" button and you're set. You now have an online space for your project to live in.

Creating your local repository

So we just made a space for your project to live online, but that's not where you'll be working on it. The bulk of your work id going to be done on your computer. So we need to actually micro that repository we just made as a local directory

First type: mkdir MyProject

mkdir is short for make directory. It's actually not a git command, but general navigation command from the time before visual computer interfaces. So this creates a folder that will have your project.

Next type: cd MyProject

Cd stands for change directory, and it's also a navigation command. We want to go inside the directory we just created.

Next line type: git init

Now we are using the Git command and we know that coz it begins with git .this command stands for "initialise", it tells the computer to recognise this directory as a local Git repository. If you open up the folder, it won't look any different, because this new Git directory is a hidden file inside the dedicated repository.

However, your computer now realises this directory is Git-ready and you can start inputting Git commands.
Now you've got both an online and local repo for your project to live inside.

Next line type: touch Readme.md

This, again, is not a Git command. It's another standard navigational command prompt. touch really means "create." Whatever you write after that is the name of the thing created. If you go to your folder using Finder or the Start menu, you'll see an empty Readme.md file is now inside.

You can clearly see your new Readme file. But can Git? Let's find out.
Type: git status
The command line, usually so passive up to this point, will reply with a few lines of text similar

What's going on? First of all, you're on the master branch of your project, which makes sense since we haven't "branched off" of it. Secondly, Readme.md is listed as an "untracked" file, which means Git is ignoring it for now. To make Git notice that the file is there

Type: git add Readme.md

Notice how the command line gave you a hint there? All right, we've added our first file, so it's time to take a "snapshot" of the project so far, or "commit" it:

Type: git commit –m "Add Readme.md"

The –m flag simply indicates that the following text should be read as a message. Notice the commit is written in the past tense. Always write your commands in the past tense because version control is all about flexibility through time.

Next type: git branch –M main

By default, every git repository's first branch is named master (and is typically used as the primary branch in the project). As part of the tech industry's general anti-racism work, some groups have begun to use alternate names for the default branch

Now that we've done a little work locally, it's time to "push" our first commit up to GitHub.

Connect Your Local Repository To Your Github Repository.

First, we need to tell Git that a remote repository actually exists somewhere online. We do this by adding it to Git's knowledge. Just like Git didn't acknowledge our files until we used the git add command, it won't acknowledge our remote repo yet, either.

Assume that we have a GitHub repo called "MyProject" located at https://github.com/username/myproject.git. Of course, username should be replaced with whatever your GitHub username actually is, and myproject should be replaced with the actual title you named your first GitHub repository.

git remote add origin https://github.com/username/myproject.git

Now we want to upload, or "push" our changes up to the Github remote repo. That's
Just Type: git push –u origin main

Log into GitHub again. You'll notice that GitHub is now tracking how many commits you've made today. Click on your repository, and it will have an identical Readme.md file as we earlier built into your local repository.
When you want to add other files to the online repository.

Type: touch dogs.txt
We are creating a text file.

Next Type: git status.
Git has not yet noticed that we have put something else. So let's make it notice.

Type: git add .
NOTE: The full stops at git add . Means add everything.

Type: git commit –m "Add file."
Git has now noticed the file.
Now we want to upload, or "push" our changes up to the Github remote repo.

Type: git push

Got to your Github account refresh and click on your repository, and it will have an identical Readme.md file as we earlier built into your local repository.

Ta da! With all of these tools at hand, it's clear that Git and the GitHub service aren't just for programmers.