DEV Community: Meet Tandel

Enough HTML to get Started

Meet Tandel — Sat, 04 Sep 2021 13:07:58 +0000

Let us learn enough html to get started.

Forms

Input can be added by <input> tag. Label tag <label> is used to add label to the input. The <name> attribute is used to store data in the database accessed with back-end. <placeholder> is used to assign default values to the box.

<label for="nm">Name:
<input type="text" name="myName" id="nm" placeholder="Enter Name">
</label>

Types of Input

Checkbox

<label for="ckbx">Are you Eligible?
<input type="checkbox" name="myCheckbox" id="ckbx">
</label>

Textarea

<label for="msg">Your Message:
<textarea name="myMessage" id="msg" cols="30" rows="10" placeholder="Enter Message">
</textarea>
</label>

Radio

<label for="gen">Gender:</label>
Male<input type="radio" name="myGender" id="">
Female<input type="radio" name="myGender" id="">

<div> tag is used to divide the code in a box. It is helpful instead of <br> tag. When viewed in pesticide <div> tag creats its own box.

<div>
     <label for="nm">Name:</label>
     <input type="text" name="myName" id="nm" placeholder="Enter Name">
</div><br>

<div>
     <label for="email">eMail:</label>
     <input type="email" name="myeMail" id="email" placeholder="Enter Email">
</div><br>

Id and Classes

   <!-- id is for one particular tag and classes is for one or multiple tags -->
    <!-- specific is can be used for only one tag -->
    <!-- id and class are for CSS -->
    <div id="mainBox" class="redBg">This is mainbox</div>

    <!-- div.redBg.MeetT.blackbox - To add mulitple classes-->
    <div class="redBg MeetT blackbox"></div>

    <!-- span#mainBox.redBg.MeetT - Add both id and classes-->
    <span id="mainBox" class="redBg MeetT"></span>

    <!-- .blackbackground - div is Default-->
    <div class="blackbackground"></div>

    <!-- span.redBg.MeetT.blackbox*4 -->
    <span class="redBg MeetT blackbox">First</span>
    <span class="redBg MeetT blackbox">Second</span>
    <span class="redBg MeetT blackbox">Third</span>
    <span class="redBg MeetT blackbox">Fourth</span>

<span> is inline element.

<span>This is a Paragraph.</span>

Table

<table> tag contains a row tag <tr> to specify a row, <th> to specify a heading and <td> to specify a table data.

 <table cellspacing="10">
        <thead>
            <tr>
                <th>Date</th>
                <th>Work</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2016-2020</td>
                <td>GEC Bhavnagar</td>
            </tr>
            <tr>
            <tr>
                <td>2020-</td>
                <td>Coding</td>
            </tr>
            </tr>
    </table>

React Fundamentals

Meet Tandel — Fri, 03 Sep 2021 14:38:15 +0000

Let's learn React to the core and how it works. This guide will walk you through everything you need to know when getting started with React.

We will go through the "hows and whys" behind the basic concepts.

Prerequisites

Here are some of the few things you will need to be familiar with if you want to get the most out of it.

Basic HTML

In React, we use what's called JSX to create the HTML for our webpages. We'll explain JSX in depth later, but for now make sure you have a good foundation when it comes to HTML:

How to structure HTML (how to nest elements and so on)
HTML attributes (like "id", "class", "onclick" and so on)

Basic Javascript

React is a JavaScript library, so it makes sense to know JavaScript before learning React, right? Just the bare minimum is enough:

Variables, functions, data types
Arrays and Objects
ES6 Syntax (using let & const, Arrow Functions, Destructuring Assignment, classes, importing/exporting, etc)
How JavaScript is used to manipulate the DOM

Development Environment

The first thing we're going to do is set up a development environment. If you've already setup Node.js and installed Visual Studio Code (or your preferred IDE), you can go ahead and skip to the next section.

Node.js

Go here and download the right package for your OS (Mac/Windows/Linux)

When the installation is complete, type this in terminal:

node -v

Creating React App

To create a React Project, all we need to do is run a command within our terminal:

npx create-react-app my-app

This creates a project for us called "my-app" and sets everything up automatically. Pretty cool.

Notice the create-react-app output has told us what we need to do to start the app. Go ahead and run the commands in your terminal:

cd my-app
npm start

This will start a development Server for you.

Node Modules

This is where our packages go that we install through NPM (Node Package Manager). If you’re not familiar with NPM, it’s a glorious place where we can share code (usually open source) that other developers can use instead of writing their own.

Instead of using script tags like we do in traditional HTML, we install these modules as part of the application. Then, we use an import statement to access the code from that module. We’ll see this in action later.

Public Folder

This is where our bundled code goes. When we are ready to deploy our app, we run a ** build script**and the final files go in here. This will typically be our HTML, JavaScript, and CSS files. This is the folder we dump onto a web server somewhere, so that we can let users see our app via a URL

Index.html

The index.html is the entry point, or the first thing the web browser loads when a user navigates to the URL hosting our app.

If we look at the file, it’s a just a normal HTML file with normal HTML stuff that you will hopefully be familiar with. If we look at the body — it’s empty. React will dynamically convert our React code into HTML and load it here, in the “root” div.

With that out of the way, let’s look at the juicy parts — the code.

Our First Component

Open up App.js from the project tree. This is the Main component in our application. This is the first component to get rendered. It’s the “big cheese” of components.

The first thing we’re going to do in our big cheese component is delete everything, and build our very own component from scratch, to better understand what’s going on.

Now that we have a nice blank slate to play with we will start by importing react. This brings the React library into scope and gives us access to all the lovely features:

import React from "react";

Next we will declare a function. We’ll use ES6 arrow functions here. That’s more or less what a “component” is — a function with some logic and markup.

const App = () => {

}

export default App;

Within our function we want to write return(). This is what get’s returned from this component, and contains our markup which gets converted and rendered as HTML.

import React from "react";

const App = () => {
  return (
    <div>
       <h1>Hello React World</h1>
       <h2>
             This is our first React App - isn't it marvellous?!
       </h2>
    </div>
  );
}

export default App;

Now you’re probably thinking, "Woah! HTML in a function? What is this madness?" Even though it looks like HTML, it’s actually something called JSX (JavaScript XML). This basically allows us to mix JavaScript and HTML together.

This might seem a bit strange. We originally learned front end development by separating our HTML and JavaScript (and even CSS). Yet JavaScript and the way we design apps has evolved, and keeping everything together in the same “component” makes it easier to maintain and reuse our code.

Let’s see this in action. Open your terminal and run

npm start

This should open the browser and you should see the app running.

Congrats! You’ve just created your first component!

JSX

You probably have some question marks floating above your head when thinking about this JSX thing. Let’s take a deeper look into this.

return (
    <div>
      <h1>Hello React World</h1>
      <h2>
          This is our first React App - isn't it marvellous?!
      </h2>
    </div>
  );

Making things dynamic

So we’ve seen JSX, and gotten over our fear of it (hopefully). But what’s the point? Why use this JSX thing, when we could just use HTML? They look the same? Right?

Good question my friend! Well, if we remember what JSX stands for — JavaScript XML. This means we can use JavaScript to make things dynamic. Our previous example looks like so:

const App = () => {
  const message = "This is my first variable rendered in JSX!";

  return (
    <div>
      <h1>Hello React World</h1>
      <h2>{message}</h2>
    </div>
  );
}

We use curly braces to tell the compiler “execute this code as JavaScript”. If we didn’t have curly braces, the message variable wouldn't get executed as JavaScript and instead, the text “message” would appear on the screen.

Handling Events

The same approach can be taken when with handling events. When using JSX, React gives us access to event listeners you may already be familiar with: onClick, onPress, onSubmit and so on.

Let’s say we want to display an alert when the message is clicked. Firstly, we add the onClick property to our h2 tag.

The onClick property accepts a function (in other words, we pass a function as an argument. This function will call the alert like so:

const App = () => {
  const message = "This is my first variable rendered in JSX!";  

  return (
    <div>
      <h1>Hello React World</h1>
      <h2 onClick={()=> alert("you clicked the message!")}>{message}</h2>
    </div>
  );
}

Notice how we use a arrow function here to create a nice, concise inline function.

Calling functions

So we looked at inline functions in the last example. Since JSX is JavaScript, we can create and reference functions outside of the return block. Our last example could look like this:

const App = () => {
  const message = "This is my first variable rendered in JSX!";  

  const handleClick = () =>{
    alert("you clicked the message!");
  }

  return (
    <div>
      <h1>Hello React World</h1>
      <h2 onClick={handleClick}>{message}</h2>
    </div>
  );
}

Notice how we created a function called handleClick which alerts the message. Instead of using an inline function, we reference this function in our onClick property

Quick Summary

Before moving on, let’s quickly summarise what we’ve learned so far:

We have an index.html file, which is the skeleton of our web app
When the app starts, index.html loads, and imports our App Component
The JSX in the App component get’s converted to HTML, which is then rendered in the index.html file at the root div

Enough CSS to get started

Meet Tandel — Fri, 03 Sep 2021 12:16:17 +0000

CSS is a nightmare even for seasoned developers. A small property can change the entire flow of a website. So, here are some of the basic properties and rules to get started.

There are three ways to write CSS code. Inline, Internal, External.For all the same code written in all three, the hierarchy of code is,
Inline>Internal>External

Always write Css code in alphabetical order.

Basic Syntax of css code is:
selector { property: value; }

Selector is the tag that is used , property is what about the tag you want to change and value is the how you want to change it.

body {
     background-color: khaki;
 }

Most common selectors are,
1. Tag (used to select the element with tag name)

main{
   padding: 10px;
}

2. Class selector

.main {
  color: aqua;
}

.circular {
  border-radius: 10%;
}

3. Id selector

#myName {
  color: red;
}

4. Pseudo Class selector

h3:hover {.
  color: #66bfbf;
  background-color: gold;
}

CSS Box Model

Every single element in Css is made of box. You can style the margin, height, width, padding.

Margin gives space between two or more elements.

Padding gives space between border and content of element.

Chrome developer tools is extremely useful to understand box model of a particular element.

Display Property allows user to set the type of display box your element wants to be.

display: inline;
Inline property will take away the ability to change the width of box.

display: block;
Using block property will allow user to change the width.

display: inline-block;
Inline block is a mixture of block and inline property.

display: none;
None property will remove element from document tree.

Positioning

Static

This is the default position of element.

body {
   position: static;
}

Relative

Relative position allows you to move element relative to its original position. top, left, bottom, right property can be used to move it position. It only affects the particular element. Doesn't affect any other element.

main {
   position: relative;
}

Absolute

Absolute position allows you to move element to the right or left to its parent element. This will only work if the parent element has a relative property. Parent doesn't always have to be the body. It can also be the closest parent.

main {
   position: relative;
}

div {
   position: absolute;
}

Fixed

Fixed element will stay in its current position even when scrolling. Mostly used for sidebar and navbar.

Units

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Most common used properties are px, rem, ex, vh, vw, vmin, vmax.

This is just enough bare enough to get you started with CSS.
Try making some static websites with this properties and you can also make your own css library.

CSS is endless, so get the basics right