React Basics
This totorial is a complete guide core react constructs.
It demonstratens simple implementations of ReactDom
, React Element
, React Component
, props
, in a familiar, real-world component.
Contents
- Online sandboxes
- Put React anywhere!
- Connect a
script
with a single DOM node - Use modern ES Modules
- Import the
react-dom
module - Prepare the root DOM node with
ReactDOM
- Render plain text to React root
- Import
react
and create a React element - Render a React element to React root
- Extract a React component
- Pass custom props to components
- Pass common props to components
- Some common props use “standard DOM” names
- Use objects instead of strings for the
style
prop - Use camelCase for all multi-word common props and properties
- Use object rest syntax to separate custom props from common props
- Quick reference videos
Online sandboxes
- CodeSandbox Used by me (Vim support)
- StackBlitz
Put React anywhere!
React is “just JavaScript”. Add it to any page on the internet.
Start with a simple HTML page like this:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>React playground</title> </head> <body></body></html>
Connect a script
with a single DOM node
React needs a bridge between JavaScript and the DOM. Create a DOM node and query for it in a JavaScript script.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>React playground</title> </head> <body> <!-- 1. Add an element with id --> <div id="root"></div> <!-- 2. Add a script tag --> <script> // 3. Capture a reference to element we'd like to control with JavaScript let domNode = document.getElementById("root"); </script> </body></html>
Reference: HTML-only template from React Docs, react.dev. Updated for ES Modules.
Use modern ES Modules
The browser has progressed a lot in a decade.
Specifying type="module"
on script tags to use modern JavaScript imports.
<body> <div id="root"></div> <!-- Specify type module --> <script type="module"> let domNode = document.getElementById("root"); console.log(domNode); </script></body>
Reference: Applying the module to your HTML, MDN.
Import the react-dom
module
Services like esm.sh allow us to import JavaScript modules from a CDN — no bundling 🥳.
Import the react-dom
module from the esm.sh.
// Import `react-dom@18` from esm.shlet domNode = document.getElementById('root');
Reference: import API reference, MDN.
Prepare the root DOM node with ReactDOM
React needs to set up event handlers the root DOM node.
Prepare the root DOM node with ReactDOM.createRoot()
.
let domNode = document.getElementById('root');// Register root element with ReactDOMReactDOM.createRoot(domNode);
Reference: React.createRoot API reference, react.dev.
Render plain text to React root
At this point we can render plain text to the React root. Render “Hello ReactDOM” to the React root.
let domNode = document.getElementById('root');// Render plain text to React rootReactDOM.createRoot(domNode).render("Hello ReactDOM");
Reference: render API reference, react.dev.
Import react
and create a React element
Next we need React to create React elements and components.
Import react
and create a React element with React.createElement()
.
let reactElement = React.createElement("h1", {}, "Hello React");let domNode = document.getElementById('root');ReactDOM.createRoot(domNode).render("Hello ReactDOM");
Reference: createElement API reference, react.dev.
Render a React element to React root
With a React element, we can render it to the React root.
Replace the rendered "Hello ReactDOM"
text with our new React element.
/* …react and react-dom imports… */let reactElement = React.createElement("h1", {}, "Hello React");let domNode = document.getElementById('root');// render the React element to the React rootReactDOM.createRoot(domNode).render("Hello ReactDOM"reactElement);
Reference: What is a React element, exactly?, react.dev.
Extract a React component
React components are just functions that return React elements. Declare a new component and use it to create our React element.
let domNode = document.getElementById("root");// 2. Create a React element from a the new componentlet reactElement = React.createElement("h1", {}, "Hello React");let reactElement = React.createElement(MyComponent);// 1. Declare a new componentfunction MyComponent() { return React.createElement("h1", {}, "Hello React Component");}ReactDOM.createRoot(domNode).render(reactElement);
Reference: Your first component, react.dev.
Pass custom props to components
Static components, like static functions, are not useful.
Pass a name
prop to the React component and interpolate its value into the React element.
// 1. provide a prop object to the React componentlet reactElement = React.createElement(MyComponent, { name: "React Rally" });// 2. accept propsfunction MyComponent(props) { return React.createElement( "h1", {}, `Hello React Component${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Passing props to a component, react.dev.
Pass common props to components
In addition to custom props, React components accept common props.
Pass an id
prop to the React component and apply it to the React element.
let reactElement = React.createElement( MyComponent, { // 1. define id prop id: "my_app", name: "React Rally" });function MyComponent(props) { return React.createElement( "h1", // 2. apply the id prop to the React element { id: props.id }, `Hello ${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Common component props, react.dev.
Some common props use “standard DOM” names
Not all common props use common HTML attributes.
Apply the class
HTML attribute to React elements using the DOM property name className
.
let reactElement = React.createElement( MyComponent, { // 1. define class selectors using the className prop className: "my-css-class-selector", name: "React Rally" });function MyComponent(props) { return React.createElement( "h1", // 2. apply the className prop to the React element { className: props.className }, `Hello ${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Element: className property, MDN.
Use objects instead of strings for the style
prop
Unlike HTML, the style
prop requires an object instead of a string.
Apply the style
prop to React elements using an object with camelCased CSS properties.
let reactElement = React.createElement(MyComponent, { // 1. define styles using object and camelCased CSS properties style: { color: "red", backgroundColor: "black" }, name: "React Rally",});function MyComponent(props) { return React.createElement( "h1", // 2. apply the style prop to the React element { style: props.style }, `Hello ${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Special component props, react.dev.
Use camelCase for all multi-word common props and properties
React does not use attribute style event names.
Add a click handler using the camelCased onClick
prop and a function.
let reactElement = React.createElement(MyComponent, { // 1. define the onClick prop and pass a function onClick: () => alert("heading clicked"), name: "React Rally",});function MyComponent(props) { return React.createElement( "h1", // 2. apply the onClick prop to the React element { onClick: props.onClick }, `Hello ${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Common component props, react.dev.
Use object rest syntax to separate custom props from common props
Writing props
before using every value is tedious.
Use object rest syntax to create variables for custom props and collect the rest into a new object.
let reactElement = React.createElement(MyComponent, { onClick: () => alert("heading clicked"), name: "React Rally",});// 1. create variables for prop names we want to access// 2. assign the remainer key-values (rest) to an objectfunction MyComponent(props{ name, ...restProps }) { return React.createElement( "h1", // 3. send the entire rest object to createElement { onClick: props.onClick }restProps, // 4. use the `name` variable instead of object property access `Hello ${props.name}` );}let domNode = document.getElementById("root");ReactDOM.createRoot(domNode).render(reactElement);
Reference: Object rest spread, v8.dev.