An online markdown blog and knowledge repository.
Read and take notes from the following resources:
[X] Component Based Architecture Article
[X] What are props and how to use it Article
[X] React Tutorial through Passing Data Through Props
[X] React Docs Hello World
[X] React Docs Introducing JSX
[X] React Docs Rendering Elements
[X] React Docs Components and Props
See components-react.md.
See components-react.md.
Javascript library for building user interfaces.
Allows composition of UIs from 'components'.
React Elements are actually javascript objects that can be passed-around as parameters.
Props is short for 'properties' and represents parameter-passing in React.
Props are passed to child components using syntax that is similar to html5 attributes.
Efficiently re-renders components without a screen refresh.
Utilizes Props as parameters to move data around.
Special React syntax that makes writing React Elements easy.
JSX syntax can collapse a hierarchy of HTML tags down to a few lines of React statements.
Any javascript expressions can be put within JSX brackets.
Capturing and using data represents a components state.
Components hold their 'state' by setting this.state.
Use a Constructor to initialize 'this.state'.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
// other class properties and functions here
}
Call 'super' whenever defining a constructor of a subclass.
For React components with a Constructor always start with a super(props) call.
In order to share data between two sibling components, configure the Parent component to pass the state back down to both children by using props.
Another way to think about this is 'keep child components in sync'.
This is referred to as 'lifing state' into a parent component.
Components that do not maintain their own state, but rather acquire it from their parent Component are called 'Controlled Components'.
Changing data directly in an existing or passed-in variable is not always wise (or possible).
Replacing the data using a new variable is preferred for the following reasons:
Simple way to write components that do one thing: render.
Do not hold or manage any state.
Simply takes props input that should be rendered and renders it.
If a component is built-out as a class, but only has one job, consider refactoring it to be a function instead. Remember to:
React reserves a property called 'key' for use in rendering.
"When a list is re-rendered, React takes each list item's key and searches the previous list's items for a matching key. If the current list has a key that didn't exist before, React creates a component. If the current list is missing a key that existsed in teh previous list, React destroys the previous component. If two keys match, the corresponding component is moved." [reactjs.org/tutorial/tutorial.html, section 'picking a key']
Assign keys whenever building a dynamic list.
Without a key, React throws a warning and uses the index as the key by default.
Do not use key={i} (it will silence the warning but does not properly resolve the problem of missing, valid keys).
// a key can be as simple as a React prop
<li key={move}>
<button></button>
</li>
React Hello World
In an HTML document with only a div with id of 'root'...
Add a ReactDOM.render method in javascript that inserts a header and makes a DOM call by element ID 'root'.
JSX is syntax that is basically a combination of initializing a javascript variable and assigning html elements to it.
Use JSX with React when defining the UI.
The result is a React "element".
React 'separates concerns' by using components that contain both markup and logic, together.
JSX has the benefit of allowing React to produce better error and warning messages.
Any valid JS expression can be contained with curly braces in JSX.
JSX will also capture the result of calling a javascript function!
When writing multi-line JSX expressions, enclose then within parenthesis and add a semi-colon after the closing paren.
JSX is an expression, becoming regular javascript function calls.
Use JSX inside of if statements and for loops.
Use quotations to specify string literals as attributes.
Use braces to embed js expression in an attribute.
JSX is closer to JS than HTML so use camelCase to name properties.
Note: Do NOT use both quotations AND braces in JSX expressions in the same attribute.
Empty tags can be closed immediately like XML: <img src={} />;
JSX can contain child tags:
const element = (
<div>
<h1>Title</h1>
<p>Lorem ipsum...</p>
</div>
);
React DOM escapes embedded JSX values before rendering the compoennt.
Components are stringified before rendering to help prevent executable code injections.
const element = (...);
is equivalent to
const element = React.createElement(...);
React.createElement organizes the parameters you enter, into a new Class object with properties as assigned.
Elements describe what will be seen on-screen.
Apps built with React typically have a single root DOM node.
Many, isolated Root DOM Nodes can exist in more complex applications.
To render a React element pass the DOM element to createRoot method then pass the React element to the render method:
const element = <h1>Hello, world</h1>;
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(element);
/* example taken from reactjs.org/docs/rendering-elements-html */
React elements:
React DOM compares an element (and its children) and applies only updates needed to bring DOM up-to-date with the current React DOM representation.
Duplicate tree nodes that haven't changes are not rendered again.
Example of a simple, valid React Functional Component:
function HelloWorld(props) {
<h1>Hello World! Props are {props.name}</h1>;
}
Example of a React Class Component, build using ES6 Class:
class HelloWorld extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
Components can refer to other Components in their output.
The same Component can be used in a dialog, button, screen, or form.
Components can be split into smaller Components.
Name Components from 'their own point of view rather than the context in which it is being used' [ReactJS.org, Components and Props].
Always name Components with a starting capitalized letter.
DOM Tags start with a lower-case letter.
Props are read only so your Component can NOT edit them.
Lifecycle methods are included in many React components.
Note: They can be overridden.
React Lifecycle Methods Diagram
Called in order when a component is inserted into the DOM:
These are called when a component is being re-rendered:
Called when a React component is removed from the DOM:
Called when there is an error in rendering (or lifecycle method or constructor of a child component):
Array.slice() is to use the spread operator [...] to expand an array into a new variable and work with that. Once done, copy the new array into the original input array or just return the copied-and-edited-array to the calling function.Consider Array.Map() to be equivalent to:
let myArr = [1, 2, 3];
for(let i=0; i < myArr.length; i++) {
// yield myArr[i];
};
Apply the following logic to define the Map function operation:
let myArr = [1, 2, 3];
console.log(myArr.map((i) => i * 2));
// output: [2, 4, 6]
React Hello World
React Components
Go back to Readme.md