Lovepreet Singh

Posted on Jun 23, 2023

ReactJS, MongoDB, JS, CSS in one shot while building an App

#react #webdev #tutorial #javascript

🤝 In today's era of AI, when it became so hard to predict that "Will Web Dev survive". People are still focusing on learning things like HTML, CSS, JS to 100% and then moving on to the new things without building anything using the things that they learnt earlier.

😩 In today's world where there are so many sources like ChatGPT, Documentation etc, People are still building projects by watching tutorials.

One should focus more on building rather than spending too much time on a language or framework learning.

📌 Let's Jump in

Today we'll see only the necessary things that one needs to get started with web development like knowing necessary stuff of HTML, CSS, JS and ReactJS and using MongoDb.

If you want to refer to the video with Project, Refer to this Youtube video (Only video you'll ever need to start with web development)

✨ HTML

HTML is called Hyper Text Markup Language which is a structure of arranging text in opening and closing tags.
for ex:-

<div>
   <p>Hello</p>
</div>

Like above, we have opening tags <> and closing tags </> which gives a certain functionality to the text.

Like div tag here means a box
and p tag means a paragraph tag.

⚡️ Necessary tags for HTML starters:-

Heading Tags

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Container tags

<div>I am a Container</div>
<span>I am an inline element</span>
<p>This is a paragraph tag</p>
<pre>This is a pre tag which will render text as written</pre>
<code>This is a tag for rendering a code block</code>

Document tags

<head>Tag for providing head information like website heading on the tab and icon on the tab</head>
<title>To be included in the head tag for title information</title>
<link> tag for setting up the relation with any external document
<meta> tag for providing some keywords, description about a website and also useful in SEO (Search Engine Optimisation)
<style>Tag to include the styling for the html page using CSS rules</style>

Section tags

<header>used to give introductory information about the document like header information in the top</header>
<nav>it is self explanatory from its name. Used for navigation bar specifically</nav>
<section>A general tag for a section in the document.</section>
<footer>Used to represent the footer in the document</footer>

Text formatting tags

<b>To make the text bold</b>
<i> To make font italic</i>
<em>To put emphasis on the specific text</em>
<strong>To represent text with strong focus, generally shown bold</strong>
<sub></sub> <sup></sup> Used for subscript and superscript
<time>used to represent a period of time</time>

List tags

<ul>unordered list. It is generally rendered as with bullet points</ul>
<ol>Ordered list which is generally represented as with numbers</ol>
<li>for a list item of a ul or ol</li>

Table tags

<caption>specifies the title or caption of the table</caption>
<table>To define a table</table>
<thead>to provide some content for the table head</thead>
<tbody>used to give data for the table</tbody>
<th></th> and <td></td> used to give table head and table data to our table

Form tags

<form>used for defining a form with submission flow</form>
<input>Used for getting the input from the user</input>
<textarea>used for getting text input which is resizable</textarea>
<button>Used to specify a button element which can be clicked</button>

✨CSS

CSS is called cascading style sheets which is used to give styles to the plain HTML text document. Like giving colors, background-image, padding, margin etc.

In CSS, one needs to know margin, padding, flex, grid, colors, absolute and relative position.

Margin of a div container from its parent container

Padding in CSS means pushing content of div container relative to its container only instead of its parent container like in margin

Then we have flex property which can be adjusted row wise or column wise

It has some other properties like justify-content and gap

Now we have two positions absolute and relative

📍 JS (Javascript)

🚀 Now Java script is a language that is being used for giving functionalities like sending data to the DB, registering mouse events and doing something like submitting a form.

🔥 JS is used to manipulate the DOM (Document Object model) to add or remove any html elements or change the css properties like clicking a button changes the theme dark or light.

Let's start with a simple HTML template

<!DOCTYPE html>
<html>
<head>
  <title>Introduction to JavaScript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to JavaScript!</h1>
  <p id="demo">This is a demonstration paragraph.</p>

  <script src="script.js"></script>
</body>
</html>

Now let's print something in our console

// script.js

// Outputting a message to the browser console
console.log("Hello, JavaScript!");

// Modifying HTML content
document.getElementById("demo").innerHTML = "This paragraph is updated by JavaScript!";

Now, let's include the JS script inside it

<script src="script.js"></script>

Now let's add button and an event listener of mouse

<button onclick="changeText()">Click me</button>

Now, let's call a function when button is clicked

// script.js

function changeText() {
  document.getElementById("demo").innerHTML = "Button clicked!";
}

✨ Here, we are using "document" and getting element by the attribute "id" given to the paragraph. This document is the object referring to the DOM (Document Object Model).

🤝 ReactJS

🚀 JS is a vast language which should be explored while building a project. And after that one can jump to ReactJS which is a framework built for Reusability, Scalability and Rendering only those changes which are being added into the DOM or being removed. Because ReactJS uses Virtual DOM and a Real DOM. So, ReactJS uses an exact copy of the real DOM and when some changes happen in the dom then react compares the changes of virtual dom with real dom.

And renders only the changes that are made into the DOM. While Simple JS re-renders the whole Document from top to bottom of the DOM.

Now, In next Blog (Part 2) We'll see How React works, How to use DB like MongoDB and how to use React architectures like Redux.

Meanwhile you can refer to this Youtube video which is a single video that you'll need to jump into the Web Development.

Top comments (19)

Lovepreet Singh • Jun 26 '23

Thanks a lot ✨

Jose_Lorenzini • Jun 25 '23 • Edited

The best thing to do is that stop jumping into a new language each weak.
Focus on learn one very well, doesn’t matter which one , just focus on one and build small projects , doesn’t matter what just make it.
I am sharing this after being jumping from php to js to java to typescript.
Now I decided to go hard with javascript and build things probably nobody will use it .
Saludos

Lovepreet Singh • Jun 25 '23

Hmm makes sense

goldenekpendu • Jun 25 '23

Thanks a lot for this article. I remember just starting to learn web development and I didn't want to touch JavaScript (because I thought it was so hard). But I spent time building simple real world projects and it helped me improve on JavaScript.

Now, I build projects with ReactJS and I'm confident in my abilities