HTML and CSS 101

H
andrewgbliss
a year ago

In this article we will discuss how React uses HTML and CSS. This is a primer for the next article where we will begin to learn what a component is, and how we can use HTML and CSS to create reusable components.

. . .

Getting Started

HTML stands for Hyper Text Markup Language. We can use HTML to show certain elements on our website, such as text and images.

CSS stands for Cascading Style Sheets. We can use CSS to style our HTML elements. We can give them different colors, different sizes.

When you first create a React application with create react app it will generate some files for you. Let's open up the public/index.html file.

When you first load up your website this is the page that will get loaded first.

This index.html file has a lot of HTML elements which can kind of be overwhelming to look at. Let's talk about what an HTML element is. An element is referred to as an HTML tag. Before we get into what all these different tags mean, let's go over how to create a tag.

This is an example of an "a" tag.

<a href="https://www.google.com">Take me to Google Search</a>

It starts with a less than sign, then the name of the tag "a", then any attributes. This tag has an attribute of href, and this tells the browser where to go when you click on this link. Then it closes with a greater than sign. Then anything in between the tags will show up in the browser. Some tags are self closing, meaning they don't have an ending tag. In this example we do have an ending tag, the only difference is by adding a forward slash before the name of the tag.

Now let's go over some tags found in the index.html file.

<!DOCTYPE html> <!-- This tells the browser that we are loading an HTML file -->

<html lang="en"> <!-- This means that we want to start using HTML, and anything within this are to be considered HTML tags -->

<head>  <!-- The head tag gives extra information on your website, such as icons, title and description -->

<title>React App</title> <!-- This will show in your browser tab as the title of your website -->

<body>  <!-- Anything that is included within the body tag will show on your webpage -->

So now let's add something in the body tag. We will add a header tag.

<h1>This is a header tag</h1>

When you add this and save the file, it will hot reload your webpage, meaning it will refresh the browser for you and show you new changes, then it will show the header tag.

So now you maybe thinking to yourself, where are all other elements. It shows React code. Where is that within the index.html page?

The most important thing about React is the root element.

<div id="root"></div>

React will look for this root div tag and insert the React app inside this element.

So now let's talk about CSS.

If you open up the src/App.js file:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

You can see that the first div tag has a className on it that equals App. This corresponds to a CSS class name. This is located within the App.css file that is imported on line 3.

So let's open that file.

.App {
  text-align: center;
}

There are a lot of styles in that file so let's just talk about the first one. To declare a CSS class you prefix the name with a dot. The you add your CSS properties within the handlebar brackets. This class has a property called text-align, and it is giving a value of center. You can change properties such as color, sizes, width, and height.

If you want your CSS to apply to all tags you would do this:

body {
  background-color: 'green'
}

This would find all the tags named body and apply the background color as green.

Recap

So let's talk again how React works. When you first load up your website it will load the index.html file. React will then find the root div and insert the React app inside. When the main App.js file gets loaded it will show the div tag with the App CSS class. It will load in all the CSS files you need to style your app.

Links

Learn HTML

Learn CSS

Next Lesson

In the next lesson we will talk about how JavaScript works with creating functions, objects, and variables.

Next Article
JavaScript 101

H
andrewgbliss
a year ago