Super Simple Intro To React

This is a basic introduction for those who feel overwhelmed by the vast microcosm that is the React ecosystem!

Super Simple Intro To React

This is a basic introduction for those who feel overwhelmed by the vast microcosm that is the React ecosystem

### Here’s a sandbox for you to practice with:

https://codesandbox.io/s/intro-to-react-i72er

https://codesandbox.io/s/intro-to-react-i72er

Introduction to React

  • Simply a nice library that turns data into DOM.

  • Tree Diffing : Fast comparison and patching of data by comparing the current virtual DOM and new virtual DOM - updating only the pieces that change.

  • It's just a tree with some fancy diffing

Create Element

From JavaScript To DOM

  • The React.createElement function has the following form:

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

  • Type : Type of element to create, i.e. a string for an HTML element or a reference to a function or class that is a React component.

  • Props : Object that contains data to render the element.

  • Children : Children of the element, as many as you want.

Creating elements

  • Our rendering goal:

<ul>
  <li class="selected">
    <a href="/pets">Pets</a>
  </li>
  <li>
    <a href="/owners">Owners</a>
  </li>
</ul>

  • There are five tags to create:

  • One ul

  • Two li

  • Two a

There are certain attributes we want to appear in the DOM for these tags as well:

  • Each li has a class (or className in React)

  • Both a ele's have href attributes

  • Also keep in mind the parent child relationships happening between the tags.

  • ul is the parent of both li

  • Each li has an a element as a child

  • Each a has a text content child

React.createElement(
  "ul",
  null,
  React.createElement(
    "li",
    { className: "selected" },
    React.createElement("a", { href: "/pets" }, "Pets")
  ),
  React.createElement(
    "li",
    null,
    React.createElement("a", { href: "/owners" }, "Owners")
  )
);

Converting to virtual DOM

  • After you set up your React.createElement, you use React.render to take the value returned from cE and a DOM node to insert into the conversion of the real DOM.

// Put the element tree in a variable
const navList = React.createElement(
  "ul",
  null,
  React.createElement(
    "li",
    { className: "selected" },
    React.createElement("a", { href: "/pets" }, "Pets")
  ),
  React.createElement(
    "li",
    null,
    React.createElement("a", { href: "/owners" }, "Owners")
  )
);

// Get a DOM node for React to render to
const mainElement = document.querySelector("main");

// Give React the element tree and the target
ReactDOM.render(navList, mainElement);

JS Code => Virtual DOM => Real Dom

Updates

  • If you call React.render a second or multiple times it just checks the existing Virtual DOM and it knows which smaller areas to change.

Thinking in Components

  • Components are pieces of reusable front-end pieces.

  • Components should be Single Responsibility Principle compliant.

Create Element

React.createElement Demo

  • Can import non-local dependencies with import 'package-link'

const App = () => React.createElement("h1", null, "Hello, Programmers!");

const target = document.querySelector("main");
const app = React.createElement(App, null);
// Give React the element tree and the target
ReactDOM.render(app, target);

  • Remember when importing modules from other files you have to denote the file type in the import statement.

HTML Original

<section class="clue">
  <h1 class="clue__title">Clue$ 268530</h1>
  <div class="clue__question">
      2009: I dreamed a Dream
  </div>
  <div class="clue__category">
      <<unparsed>>
  </div>
  <div class="clue__amount">
      $800
  </div>
</section>

React Version

const Clue = () =>
  React.createElement(
    "section",
    { className: "clue" },
    React.createElement("h1", { className: "clue__title" }, "Title"),
    React.createElement("div", { className: "clue__question" }, "?"),
    React.createElement("div", { className: "clue__category" }, "Category"),
    React.createElement("div", { className: "clue__amount" }, "$800")
  );

  • Because class is a reserved keyword in JS, in React we can use className to assign a class to an element.

  • Remember the data that goes into createElement: element type, data to pass into the element, and then children.

  • props : Properties;

  • To handle certain values that are initially undefined, we can use defaultProps.

Clue.defaultProps = {
  category: {},
};

  • You can change in the devTools Network tab the internet speed to check for values that may be undefined to hangle with defaultProps.

  • If we fetch multiple pieces of data, we can render many things by using map.

  • You need to assign a unique key to each of the clues.

  • We need to keep track of them individually so that React can easily refer to a specific one if there is an issue. clue => { key:clue.id, ...clue }

const App = (props) =>
  React.createElement(
    "h1",
    null,
    props.clues.map((clue) =>
      React.createElement(Clue, { key: clue.id, ...clue })
    )
  );

export default App;

  • Note: JSX is preferred over React.createElement;

Notes from Hello Programmer Exercise

  • When you import modules from websites they must have CORs activated.

  • These import statements, import global variables.

  • When we want to move our code into production we need to change the imports into the production minified versions.

import "https://unpkg.com/react@16/umd/react.production.min.js";
import "https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js";

  • While we will never actually be creating full apps with just React.createElement => it is the enginer that is running under the hood!

import "https://unpkg.com/react@16/umd/react.development.js";
import "https://unpkg.com/react-dom@16/umd/react-dom.development.js";

const Links = () =>
  React.createElement(
    "ul",
    { id: "nav-links" },
    React.createElement(
      "li",
      { className: "is-selected" },
      React.createElement("a", { href: "https://bgoonz-blog.netlify.app/" }, "BgoonzBlog2.0")
    ),
    React.createElement(
      "li",
      null,
      React.createElement("a", { href: "https://github.com/bgoonz/" }, "Github")
    )
  );

// Set up React Element: Type, Imported Data, Child (Child is Text in this Scenario)
// HelloWorld is a function based component
const HelloWorld = () => React.createElement("h1", null, "Hello, Programmers");

const AllTogether = () =>
  React.createElement(
    "div",
    null,
    React.createElement(HelloWorld, null),
    React.createElement(Links, null)
  );

// Target the Element to append new Ele
const target = document.querySelector("main");

// Assign your 'App' to your created Elements
// We are creating an element from the HelloWorld function.
const app = React.createElement(AllTogether, null);

// Render from the Virtual Dom to the Actual Dom
ReactDOM.render(app, target);

Introduction to JSX

  • JSX : Javascript Extension, a new language created by React developers to have an easier way of interacting with the React API.

How to use JSX

  • We will use babel to convert version of modern JS into an older version of JS. React Create Element

const ExampleComponent = (props) =>
  React.createElement(
    React.Fragment,
    null,
    React.createElement("h1", null, "Hello!"),
    React.createElement("img", { src: "https://via.placeholder.com/150" }),
    React.createElement("a", { href: props.searchUrl }, props.searchText)
  );

JSX Version

const ExampleComponent = (props) => (
  <React.Fragment>
    <h1>Hello!</h1>
    <img src="https://via.placeholder.com/150" />
    <a href={props.searchUrl}>{props.searchText}</a>
  </React.Fragment>
);

  • Keep in mind that self closing tags in React must have a forward slash to close it.

Properties and Data

<img src="https://via.placeholder.com/150" />;
// becomes..
React.createElement("img", { src: "https://via.placeholder.com/150" });
// if we want to pass in data vs just a string literal
<a href={props.searchUrl}>{props.searchText}</a>;
// so it becomes..
React.createElement("a", { href: props.searchUrl }, props.searchText);
// if you want the text search uppercase..
<a href={props.searchUrl}>{props.searchText.toUpperCase()}</a>;

  • Comments in JSX have the following syntax:

<div>
  <h2>This is JSX</h2>
  {/* This is a comment in JSX */}
</div>

Property Names

  • checked : Attribute of input components such as checkbox or radio, use it to set whether the component is checked or not.

  • className : Used to specify a CSS class.

  • dangerouslySetInnerHTML : React's equivalent of innerHTML because it is risky to cross-site scripting attacks.

  • htmlFor : Because for is protected keyword, React elements use this instead.

  • onChange : Event fired whenever a form field is changed.

  • style : Accepts a JS object with camelCase properties rather than a CSS string.

  • value : Supported by Input, Select, and TextArea components; use it to set the value of the component.

Note: React uses camel-case!!!

The JSX semicolon gotcha

  • We wrap what want to return in parenthesis so JS doesn’t auto add semi-colons after every line and run the code incorrectly.

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <div>Welcome to JSX.</div>
    </div>
  );
}

create Element equivalent

is equivalent to

function App() {
  return (
    React.createElement(
      'div',
      null,
      React.createElement('h1', null, 'Hello!'),
      React.createElement('div', null, 'Welcome to JSX.'),
    )
  );
}

  • Just remember if you decided to use the return keyword in a function to ‘return some JSX’, then make sure you wrap the JSX in parenthesis.

npx create-react-app my-app

  • Single line used to initiate a React application.

  • React has a great toolchain where you can see changes live as you’re editing your application.

  • React errors will be rendered directly onto the browser window.

  • A downside is that it installs a lot of bloat files.

  • Examples of React create Element and JSX equivalent

React.createElement(
  "a",
  {
    className: "active",
    href: "https://github.com/bgoonz/",
  },
  "Github"
);
// JSX Version
<a className="active" href="https://github.com/bgoonz/">
  Github
</a>;

React.createElement(
  OwnerDetails,
  {
    owner: props.data.owner,
    number: props.index + 1,
  },
  props.name
);
// JSX Version
<OwnerDetails owner={props.data.owner} number={props.index + 1}>
  {props.name}
</OwnerDetails>;

More Complex JSX Example

const BookPanel = (props) => {
  <section className="book" id={`book-${props.id}`}>
    <h1 className="book__title">{props.title}</h1>
    <img src={props.coverUrl} />
    <div className="book__desc">{props.description}</div>
  </section>;
};

My Blog

Web-Dev-Hub Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…master--bgoonz-blog.netlify.app

Here are the React Docs In One Markdown File

https://gist.github.com/bgoonz/690d80b4f8ac5d359274d98cae87366a

By Bryan Guner on August 22, 2021.

Canonical link

Exported from Medium on August 31, 2021.

PreviousA Comprehensive Deep Dive into ReactNextBasic React Tutorial

Last updated

Was this helpful?