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
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:
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 aclass
(orclassName
in React)Both
a
ele's havehref
attributesAlso keep in mind the parent child relationships happening between the tags.
ul
is the parent of bothli
Each
li
has ana
element as a childEach
a
has atext content
child
Converting to virtual DOM
After you set up your
React.createElement
, you useReact.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 useclassName
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
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
: Becausefor
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
Here are the React Docs In One Markdown File
https://gist.github.com/bgoonz/690d80b4f8ac5d359274d98cae87366a
By Bryan Guner on August 22, 2021.
Exported from Medium on August 31, 2021.
Last updated