React.js basics: part 0
Published in
2 min readMay 31, 2024
React.js is a Node.js library for compact programming to create web applications. There is a plethora of examples for using React.js using Node.js syntax, but I find that there are very few examples about how to code in React.js using basic JavaScript.
Below are a few examples of how to code in React.js using vanilla JavaScript!
Getting started printing html elements
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="JSX_root"></div>
<button id="react_basics0" onclick="react_basics0()">React.js in JavaScript</button>
<br>
<button id="react_table_row" onclick="react_table_row()">React.js table row</button>
<br>
<button id="react_table_rowColumn" onclick="react_table_rowColumn()">React.js table row and column</button>
<style>
div {position: relative; z-index: 2;},
table {border-collapse: collapse;}
td,
th {border: 1px solid black; padding: 10px 20px;}
</style>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script>
const container = document.getElementById('JSX_root');
const root = ReactDOM.createRoot(container);
// ----------------------------------------------------
async function react_basics0(){
const element = React.createElement('div', {className: 'div_name'},
React.createElement('h1', {className: 'div_name'}, 'Header Text'),
React.createElement('p', null, 'Paragraph Text'));
root.render(element);
}
</script>
</body>
</html>
Printing an array
async function react_table_row() {
var array1 = [2, 3, 4, 5, 7, 8];
const ObjectRow = array1.map((row, ind) => { return React.createElement('td', {className: 'td', key: ind}, `${row}`) })
const element = React.createElement('table', {className: 'table', key: 'table_keyName'},
React.createElement('tbody', {className: 'tbody', key: 'tbody_keyName'},
React.createElement('tr', {className: 'tr', key: 'tr_keyName'}, ObjectRow)
));
console.log('element: ', element);
root.render(element);
}
Printing a matrix/table
async function react_table_rowColumn() {
var rowcol = [[1, 3, 5, 7, 9, 11], [2, 4, 6, 8, 10, 12], [2, 4, 6, 8, 10, 12], [2, 4, 6, 8, 10, 12]];
const ObjectRow = rowcol.map((row, irow) => { return React.createElement('tr', {className: 'tr', key: `tr_keyName${irow}`},
row.map((col, icol) => { return React.createElement('td', {className: 'td', key: `td_keyName${irow}_${icol}`}, `${col}`) })) })
const element = React.createElement('table', {className: 'table', key: 'table_keyName'},
React.createElement('tbody', {className: 'tbody', key: 'tbody_keyName'},
ObjectRow
));
console.log('element: ', element);
root.render(element);
}
Happy Practicing! 👋
References
- Learn react.js: https://react.dev/learn
