React Grimoire
  • ⁉️Introduction
  • πŸ§‘β€πŸŽ“πŸ§‘πŸŽ“ React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • πŸͺReact Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • πŸ““React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • πŸ”­Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • πŸš€Deployment
    • In Progress
  • πŸ–ΌοΈDesign system
    • 🏁What's a design system anyway ?​?
  • πŸ”—Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Minimal web page
  • DOM Manipulation
  • References and articles :

Was this helpful?

Edit on GitHub
  1. πŸ§‘πŸŽ“ React Fundamentals

The Basic javascript "Hello world"

The beginning

PreviousIntroductionNextBasic view on React core API's

Last updated 3 years ago

Was this helpful?

Going back to basics allows us to review knowledge and, or we can put it this way, connect the dots on ambiguous aspects.

Before tackling React, maybe we should review how to make a basic web page using Vanilla JavaScript.

Minimal web page

Basically, the most minimal thing that we can call a web page is just one HTML File that says "Hello world".

Like this one

The browser parses this HTML code and creates the DOM (Document Object Model). The browser, then, exposes the DOM to JavaScript. At that point, your web page will become interactive where you can do the basic events that we will talk about in another Section.

To read more about the Document Object Model (DOM):

Now, if we want to add some JavaScript we can just use the script tag

ES6 modules

In order to ensure that the ES6 features to works, the <script> tag in your HTML file will need to have the attribute type="module". Surprisingly, this actually works as-is in most modern browsers.

DOM Manipulation

The first question ever that I asked myself was how can JavaScript interact with the DOM?

How can I really create, modify or delete DOM element using JavaScript? These questions lead to my two first JavaScript commands I wrote:

The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.

Manipulating an Element is easy we can add styling or getting and adding content. Let's try to play with some stuff

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    /* just some indicative styling */
    <style>
      #root {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <script type="module">
      const root = document.createElement('div');

      // Adding htmlElement attributes to our root element
      // https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
      root.setAttribute('id', 'root');
    
      // https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
      root.textContent = 'Hello world';
      
      // We always need to append the root element to the document
      document.body.append(root);
    </script>
  </body>
</html>

As you can see, I added the id selector and the class selector to the root element. I added some styling and even added our "hello world" text.

Since we are always able to use HTML tags to create the div element with its attributes, I just wanted to show how JavaScript can leverage all of that in code.

People were creating HTML on the server and then layering JavaScript on top of it for interactivity. However, as the requirements for that interactivity grew more difficult, this approach resulted in applications that were difficult to maintain and had performance issues.

As a result, instead of defining the DOM in hand-written HTML, modern JavaScript frameworks were developed to address some of the issues like our beloved React.

References and articles :

πŸ§‘β€πŸŽ“
Document Object Model (DOM) - Web APIs | MDN
JavaScript Vs DOM Vs BOM, relationship explainedRajakvk's Blog
Rajakvk’s Blog
Logo
Documentiliakan
Logo
Logo