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:

  • 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

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.

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'

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

HTML Original

React Version

  • 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.

  • 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 }

  • 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.

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

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

JSX Version

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

Properties and Data

  • Comments in JSX have the following syntax:

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.

create Element equivalent

  • 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

More Complex JSX Example

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?