Niall Harrington's sad attempt at a coding blog.
React and JSX. Today I Learned: Thursday 23rd June 2022

Photo by Murat Ak on Unsplash

React and JSX. Today I Learned: Thursday 23rd June 2022

Niall Harrington's photo
Niall Harrington
·

3 min read

  • According to this video: https://www.youtube.com/watch?v=LGydWeaTBJY, the rate of new coding jobs availability is outpacing the supply of developers by a long shot. The US government is potentially losing out on $162bn in taxes due to the shortage.
  • I just started to learn React because we decided on using the FReMP stack for our project in work. I’m responsible for the front end, which is the React part of the stack. To learn React, I’ll be starting off with Codecademy’s course here: https://www.codecademy.com/learn/react-101
  • JSX is the part of Javascript that looks like HTML. It’s it whats called a syntax extension. Before it gets to the web browser, it needs to be compiled. A JSX compiler will translate JSX into regular Javascript.

  • JSX elements such as:

    <p>Hello world</p>

are treated as JS expressions. So it can be saved in a variable or passed into a function, stored in an object or array. Eg:


```

const navBar =

I am a nav bar; ```

  • If a JSX expression takes up more than one line (for example if you need it to be more readable), you will need to wrap it in parenthesis like this: \ (

        &lt;a href="[https://www.example.com](https://www.example.com)">

    &lt;h1>


      Click me!


    &lt;/h1>


      &lt;/a>

);

  • You can also save nested JSX expressions into a variable.
  • A JSX expression must have exactly one outermost element. This means that the first opening tag and the closing tag must be the same.
    • Does that mean that tags nested within it can be left open?
    • The fastest way to repair this is to wrap the broken element in <div> tags.
  • The word ‘render’ just came up, I’ve been seeing that for a while now since I started coding. To ‘render’ a JSX expression, means to make it appear onscreen.
  • ReactDOM. This is the name of a Javascript llibrary that contains several javascript methods relating to the DOM.
    • DOM stands for Document Object Model. Here is the definition: \ "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
  • app.js seems to be the JS document for building the webpage. I think it is meant to work alongside index.html. It starts with importing libraries and from what I can see so far, features methods such as ReactDOM.render().

  • Here is the render() function from the ReactDOM library: \ ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

    Notice that there are two arguments passed into the function. The first is the element to be displayed, and the second argument is the position it will be in the html document. It is appended to the end of the HTML element selected. In this case, it is the element that has been tagged ‘app’.

  • <span> is a html element type. Not sure exactly what it’s for yet.

  • The Virtual DOM. This seems to be some sort of lightweight version of the DOM. I think it makes rendering faster. Its quicker to makes changes to the virtual DOM compared to the DOM. And when its time to render the JSX, React compares the virtual DOM to the DOM in a process called diffing. With this information, the DOM updates only what has been changed. Therefore saving time and processing resources.
ReactJSXPython 3frempDOM