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