Basic of Front end Development : Just Enough HTML , CSS and JS to get started with React

As a technical writer who has just finished five React projects, I have gained practical experience in using React for building advanced-level user interfaces. You understand that learning React requires familiarity with HTML, CSS, and JS, which serve as the foundation for developing web applications. While mastering these technologies may seem like an arduous task, you should focus on the essential concepts that you will apply most frequently, depending on your project requirements.

As I am a huge fan of React which is a Front End library it is used to build awesome User Interfaces, now anyone who is willing to learn React must be comfortable with HTML, CSS, and JS otherwise he will be stuck in react for sure.

Now you will say that there are many HTML elements and so many CSS properties and JS is huge in itself how much I should learn all this for React.

how much you should know about these technologies ? It completely depends upon your project requirements as

HTML, CSS, and JS have numerous elements and properties that are updated regularly, so it's crucial to focus on the ones that you will use frequently. This article will provide you with a guide on the fundamental HTML, CSS, and JS concepts that will be useful as you start building React projects.

but there are a few things that you will use no matter how big/small your react projects are?

So let's get started as you know

a)HTML is used to structure web page
b)CSS is used to design the web page
c)JS is used to put logic between DOM and elements.

So here are some fundamentals of HTML CSS and JS that will be very useful if you are just starting with the web, remember you have to make something of your own, even a small calculator program will add value to it.

HTML- HTML, which is a markup language used for structuring web pages, uses tags to perform different types of operations in a structure. The most important tags include Semantic HTML tags, span and div, links, images, lists, forms, inputs, id and classes, among others. Knowing these tags will enable you to structure your first web page.

Here are some of the important tags that will help you to get started with structuring your first web page

1. All Semantic HTML tags (Header, Footer, Nav, Article, Section, Aside, etc.)
   Semantic HTML gives help while indexing your react app in google although React is not much SEO friendly for better accessibility semantic HTML tags are very useful.

2. span and div
   When we have to quote something very small then we should use span and div, these two are different due to their display properties but both can be used for quoting small things.

3.Links
Links are used to create links between two pages and In React you will also be dealing with Links through React Router that's why It becomes most important.

1. Images
   No web page looks attractive if have no images and working with images is one such thing in React which will be helpful.

2. Lists
   No matter whether you are making a header, footer, or nav or you are rendering something in React all that will be done through the Lists so learn it well.

3. Forms
   From sending, receiving, and storing data all is done through forms in long run it will help you to work with backend stuff as well.

4. Inputs
   There are many types of inputs and these inputs are responsible for accepting data from users in forms so learning this becomes important.

5. Id and classes
   Through id and classes, we can get HTML elements either to style them or access them.

If you know these tags then you can easily start structuring your first webpage.

Now we have made the structure of the web page it's time to beautify it, to do so will use CSS.

CSS– CSS, on the other hand, is used to style web page elements, including HTML tags. It enables you to give a different style to each element, including height and width, colors and fonts, CSS units, FlexBox, Grids, Position, Border, Text properties, and Backgrounds. These CSS properties will help you create stylish and beautiful web pages. We can use this to cover the HTML elements and can give the different types of styles to each element, can beautify and puts the custom style on element.

Here are some of the important CSS properties that will be helpful.

1. Height and Width:
   Can you imagine yourself with zero height and width ;) the same things happen in CSS you can set any type of height and width to your HTML elements.

2. Colors and Fonts:
   Colors fill colors in anything and it can be in any format and can be typed, the same thing for the fonts.

3.CSS units:
This is important as you should know what the difference between rem, px, and % all these work differently and are helpful in their respected nature.

4.FlexBox and Grids (Display):
the extremely important thing to understand as you will use flexbox for sure no matter how small is your project because the proper alignment of elements becomes very easy with flex and grids are also helpful for responsive design.

5.Position :
The positioning of elements can be controlled through the position property through this you can set your element to top, bottom, left, or right on the webpage.

6.Borders :
The border should be known as it helps in CSS debugging and can also give good look to elements.

7.Text properties:
Super useful in making properly aligned texts and controlling their designs.

8.Backgrounds:
Backgrounds can have images or colors and based on that you can pick any one thing to put in the background.

so these are the basic CSS properties that will help you to make your first stylish and beautiful web page.
So far we have made a beautiful web page that is very attractive but we want beauty with the brain and our brain is JavaScript.

JavaScript-JavaScript, which is the brain for web pages, provides logic and issues commands to web elements. To get started with React, you need to understand basic JavaScript concepts such as ES6 concepts, JS Arrays, JS Objects, and Clean Code. Arrays are critical to JS since you'll deal with data, while objects are used for storing data, and they have key and values for accessing the data.

Nowadays JavaScript is running everywhere from browsers to servers this is a list of some basic JavaScript concepts that will be useful to start with React.

1. All ES6 concepts I have written a detailed blog on ES6 concepts that you can read here

2.JS Arrays
Arrays are hearts in JS because everything that you would do in JS is related to the data then mostly you will be dealing with arrays.

3.JS Objects
Objects are also used for storing data but unlike arrays, it has key and values to access the data while in arrays you need indexes to do so.

1. Clean code

Yes this is very important but even if you don't know just remember two things
a) make function and variable names self explanatory .
b) make separate functions for everything like if a functions is just getting the data from API it should only do this .

Here is an example for point number 4

import React, { useEffect, useState } from "react";
function Demo() {
  const [getData, setGetData] = useState([]);
  function getDataFromAPIFn() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((res) => res.json())
      .then((data) => setGetData(data))
      .catch((err) => console.log(err));
  }
  useEffect(() => {
    getDataFromAPIFn();
  }, []);

  return (
    <div>
      <h1>
        {getData.map((item) => (
          <h1>{item.title}</h1>
        ))}
      </h1>
    </div>
  );
}

export default Demo;

In conclusion, mastering HTML, CSS, and JS concepts is essential in building React projects. You don't need to learn everything at once, but focusing on the most critical concepts will help you start building functional and beautiful user interfaces. With this knowledge, you can apply for freelance technical writing jobs with confidence, knowing that you have practical experience in building advanced React projects.

If you will combine all these tags, styles, and JS concepts you will end up making a good and interactive web page/app in react.

I hope that you if would have gained some knowledge from this post then share it .

So guys this is all end from my side and if you find this article useful then do like and share it and connect me here