DEV Community

Cover image for ReactJS, MongoDB, JS, CSS in one shot while building an App
server side digest
server side digest

Posted on

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

🤝 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.

Programming memes

😩 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

✨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

Margin CSS

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

Padding CSS

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

display flex

It has some other properties like justify-content and gap

flex box cheat sheet

  • Now we have two positions absolute and relative

Absolute Position

Relative position

📍 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>
Enter fullscreen mode Exit fullscreen mode
  • 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!";

Enter fullscreen mode Exit fullscreen mode
  • Now, let's include the JS script inside it
<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode
  • Now let's add button and an event listener of mouse
<button onclick="changeText()">Click me</button>
Enter fullscreen mode Exit fullscreen mode
  • Now, let's call a function when button is clicked
// script.js

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

✨ 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).

DOM in JS

🤝 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)

Collapse
 
ssd profile image
server side digest

Thanks a lot ✨

Collapse
 
josepedrolorenzini profile image
Jose_Lorenzini • 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

Collapse
 
ssd profile image
server side digest

Hmm makes sense

Collapse
 
goldenekpendu profile image
goldenekpendu

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

Collapse
 
ssd profile image
server side digest

That's the spirit. 🚀

Collapse
 
vaibhav68849256 profile image
Vaibhav Khandare

Nice

Collapse
 
ssd profile image
server side digest

Thanks bro

Collapse
 
kauabr0 profile image
Kauã Sacramento

waiting for part 2

Collapse
 
ssd profile image
server side digest

It is there, check out the latest blog on my profile

Collapse
 
samuel2935 profile image
Samuel

Helpful

Collapse
 
ssd profile image
server side digest

Thanks Samuel

Collapse
 
ofu50 profile image
ofu50

Very useful

Collapse
 
ssd profile image
server side digest

Thanks bruh

Collapse
 
mjsf1234 profile image
mrityunjay saraf

Very helpfull content worth reading

Collapse
 
ssd profile image
server side digest

Thanks buddy

Collapse
 
diegofagu profile image
Diegofagu

Thanks person, very useful resume!

Collapse
 
ssd profile image
server side digest

Thanks bro

Collapse
 
lexycon002 profile image
Awowole Hammad Olamilekan

This is an important article.
Thanks for the update

Collapse
 
ssd profile image
server side digest

Thanks buddy