rtCamp notes, day 54 of undefined

WP Templates

WordPress provides us with WP Templates to create underscore js styled function, which can be used to generate parameterized HTML -> we can add data to the HTML dynamically and assign it to items.

Now we could have done this normally as well, but what’s different is the security. The wp template provides us with escaping and security.

We can use the wp.template js function available after we enqueue the wp-util handle

wp_enqueue_script( 'wp-util' );

This enables the utility support from the wp-includes/js/wp-util.min.js?ver=6.0.2 script file.

Now WP template provide us with different interpolation

• {{{ }}} -> Triple braces -> Unescaped data -> the data inside the triple braces would be unescaped.
• {{ }} -> Double braces -> Escaped data -> the data inside the double braces would be escaped -> you cannot send html tags -> they will be rendered as plain text
• <# #> -> Evaluate -> think of this as a php open and close tag [ though its not 😛 ] its like the content you put inside it can be used a js. for example we can add if conditions here

Template Definition

We can define our templates under the <script> tag -> we will have to set the type to text/html and the id for our template would start with the prefix tmpl
So if we want our template to be of id ourid we must use

<script type="text/html" id="tmpl-ourid"></script>

Now let’s try creating a test template

<script type="text/html" id="tmpl-testtemplate">
Hello {{ data.name }}
</script>

Now to fetch this template into our js code we can use the wp.template() method.
We have to pass the template id in it

var ourTemplate = wp.template( 'testtemplate' );

Now this will load the instance for our template in the ourTemplate variable, now to add the data to the template we can pass it as a js object in the ourTemplate

var html = ourTemplate( { name: 'Aryan' } );
$( '#something' ).html( html );

Now this would output our beautiful escaped template.

React

What is react?
React is a JS library that helps us build interactive user interfaces [ the beautiful ones we see around ]

How to install react?
We need to have the npm installed and then we can run the command

npx create-react-app my-app

This would create a sample react app my-app
We can delete the files of the src folder, they are not needed. We will replace them

JSX

JSX is a syntax extension to javascript, JSX looks like a template engine, but it has all the features of javascript. JSX is used to produce the react elements.

Creating the a basic application in react

The code for our html file

<div id="root">
    <!-- This is empty, lets add here with react -->
</div>

Our js code

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Testing aryan, hmmmmmm</h1>);

Now what it is doing is it is created a root from the root element and render the html we are providing it in that element.

Here root.render is replacing all the data. This means all the data inside the html element or if we call xyz times the root.render() it is replacing the data, not appending to it.

Now let’s try to embed a variable into JSX

with the same html code, change the JS code to

const name = 'Aryan';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Testing {name}, hmmmmmm</h1>);

This would provide us a similar output, but here we are using the variable.

We can add any valid javascript expression inside the JSX braces.
React also uses camelCase just like JS as it is built up on JS
JSX prevents injection, so it is great in terms of security.