React Notes

Why Import React?

At the start of a React Component you always see `import React from “react”` but why? Often you never use the imported “React” anywhere such as here:

import React from "react"
import Styles from "./navi.module.scss"
import { Link } from "gatsby"

const navi = () => {
  return (
    <nav className={Styles.main}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about/">About</Link>
        </li>
        <li>
          <Link to="/contact/">Contact</Link>
        </li>
      </ul> 
    </nav>
  )
}

export default navi

Well you actually do, it is taking the JSX inside the return statement and working some magic on it. Even though it looks mostly like HTML, it is really not. React is creating all those elements in the background. For example take the following code:

import React from 'react';

function App() {
  return (
    <div className="App">
    <h2>Hello</h2>
    </div>
  );
}

export default App;

This could also be written instead as:

import React from 'react';

function App() {
  return (
    React.createElement('div', 
    {className: 'app'), 
    React.createElement(h2, null, "Hello")
}

export default App;

The first item is the element to be created, “div”. The Second is JS object for the className styling, and the third is the children of the first item.

React.createElement(
  type,
  [props],
  [...children]
)

The React documents show it as above. So in our case the third item is our “h2” element, it is a child of the parent div. Inside it we don’t need a className, so that is null. It has a child, which is the text so we pass that in as the third item. As you can imagine it is much easier to just write the return statement without the React.createElement being called directly, and let React work magic in the background. JSX is just “syntax sugar” for creating your elements. So, even when you don’t think you are using React you need to import it anytime you are returning JSX from a component.

JSX Limitations

JSX looks looks mostly like HTML and allows us to write almost the same HTML we would write inside an HTML file but instead inside a JS file. There are a few differences. For example, in HTML you could give an element a class by <div class="blue"></div>. In JSX, you can't do this because in JS the name "class" is a reserved keyword and JSX is still written inside JS files. So instead you use "className",

` to get around this. All the

’s etc you see inside a React JSX return statement are not real HTML

’s yet, React has all these reserved and uses them behind the scenes to convert things to HTML. JSX is awesome because it lets us have our “HTML” directly inside our JS files. Some people dislike this, however.

One root element. JSX must return one root element that wraps the rest. You can’t do something like:

import React from 'react';

function App() {
  return (
    <h2>Hello</h2>
    <section></section>
    <footer></footer>
}

export default App;

This will not work because there is no root element instead:

import React from 'react';

function App() {
  return (
    <div>
      <h2>Hello</h2>
      <section></section>
      <footer></footer>
    </div>
}

export default App;

Or if you don’t actually need a <div>\ a trick is using `<></>` so that it renders with no enclosing `

` which I like to avoid deeply nested elements, the bane of screen readers.

import React from 'react';

function App() {
  return (
    <>
      <h2>Hello</h2>
      <section></section>
      <footer></footer>
    </>
}

export default App;