Learning React

Why react

• It’s composable

  • Code becomes more maintainable because all that code within HTML that makes one component is compressed into smaller lines of code
  • More flexible
  • Calls out elements as functions and returns elements

  function MainContent() {
      return (
          <h1>I'm learning React!</h1>
      )
  }
   
  ReactDOM.render(
      <div>
          <MainContent />
      </div>,
      document.getElementById("root")
  )

• It’s declarative

  • “What should be done”, vs being imperative “how should it be done”.
    • “just tell me what to do and I’ll worry about how to get it done” vs “describe every step and I’ll do it that way
  • This means we don’t have to assign variables, give it textContent, add a class and append it; by rendering it and including the content + location, we make it declarative and react does the rest — less code, especially as the page gets more complex

Setup

• Add CDN Links to the head of the HTML file
• Using an div ID root like it’s a container in HTML, then calling it out in the javascript and calling out HTML elements within the javascript:

ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"))

• You always need to import React from "react" in order for us to be able to use jsx in a file.

Running locally

• Specifically for VS Code, just install the extension for Live Server and ‘Go live’ at the bottom

JSX (Javascript XML)

• Think of it like a flavour of JS, with HTML.
• We can just write what we’re used to writing, with some exceptions
  • class = className
• JSX is kind of like a function in that it returns javascript objects (ie., type, key, ref, properties) that we can use
• We need to make sure that it returns a single parent element — you can have multiple children, but all of it needs to be under one parent:

ReactDOM.render(
    <div>
        <h1 className="header">This is JSX</h1>
        <p>This is a paragraph</p>
    </div>,
    document.getElementById("root")
)

• Alternatively you can have it so that the parent + children live as a variable:

const page = (
    <div>
        <h1 className="header">This is JSX</h1>
        <p>This is a paragraph</p>
    </div>
)

• JSX returns plain Javascript Objects. It has nothing to do with the DOM, it’s not recognized by the browser as anything important. It’s only when we render it that it becomes elements that can be interpreted. To render it, this is when we’d import ReactDOM from "react-dom" (React 18, for scrimba), then add the ReactDOM.render(page, document.getElementById("root"))
  • React is what defines JSX; JSX syntax is defined in React, so if we were to remove the import it’ll say it’s not defined.
  • console.log would return javascript objects. These are react elements that describe what React should eventually add to the real DOM for us.

Netlify

• Babel standalone helps with easily deploying to Netlify — literally drag and drop a zip file

Rendering React 18

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(navbar)
 
// OR
 
ReactDOM.createRoot(document.getElementById("root")).render(navbar)

Custom components

• React components are a function that returns React elements (objects that are created when we return JSX). This is sometimes called UI.
• Pascal case, not camel case: ThisComponent(), not thisComponent()
• When calling it out in the ReactDOM, we need to add brackets: ReactDOM.render(<ThisComponent />, document.getElementByID("root"))

function TemporaryName() {
    return (
        <div>
            <img src="./react-logo.png" width="40px" />
            <h1>Fun facts about React</h1>
            <ul>
                <li>Was first released in 2013</li>
                <li>Was originally created by Jordan Walke</li>
                <li>Has well over 100K stars on GitHub</li>
                <li>Is maintained by Facebook</li>
                <li>Powers thousands of enterprise apps, including mobile apps</li>
            </ul>
        </div>
    )
}
 
ReactDOM.render(<TemporaryName />, document.getElementById("root"))

• It’s good practice to split your code into different js files, and naming it after the function:

Importing and Exporting ES6

• It’s a syntax that enables you to organize your code into separate files and reuse them in other files and parts of your application.

Importing in ES6:

1. Importing a default export

// Suppose you have a file named "Component.js" with a default export
// Component.js
const MyComponent = () => {
  // Component logic
};
 
export default MyComponent;
 
// In another file, you can import it like this:
// AnotherFile.js
import MyComponent from './Component';

1. Importing named exports

// Suppose you have a file named "Utils.js" with named exports
// Utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
 
// In another file, you can import them like this:
// AnotherFile.js
import { add, subtract } from './Utils';

1. Importing both default and named exports:

// Suppose you have a file named "Library.js" with a default export and named exports
// Library.js
const defaultExport = () => {
  // Default export logic
};
 
export const namedExport1 = () => {
  // Named export 1 logic
};
 
export const namedExport2 = () => {
  // Named export 2 logic
};
 
// In another file, you can import them like this:
// AnotherFile.js
import defaultExport, { namedExport1, namedExport2 } from './Library';

Exporting in ES6:

1. Default export:

// Suppose you want to export a component as the default export
// MyComponent.js
const MyComponent = () => {
  // Component logic
};
 
export default MyComponent;

1. Named exports:

// Suppose you want to export utility functions
// Utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Remember that when you use **export default**, you import it without using curly braces **{}** in the importing file. When you use named exports, you import them with curly braces and their exact names. This way, you can structure your React codebase more effectively by organizing related functionalities into separate files and reusing them across components.