React is Inside-Out - Montana Webmaster

React is Inside-Out

Or, maybe I should say that React folds socks like a teenager; the work that seems like website frontend work is done at the last minute.

React Feels Like a Sock that is Wrong Side Out

Photo of socksI want my socks to match, not sort of, a real match … with the same stripes, the same color and the same tops. And, I want them the right side out. But, to the front-end web developer in me, React doesn’t feel that way. It feels like a wrong-side-out sock because there are working parts are in the return statement. A return statement should be short and on one line.

What is a “return statement”?

Like many other things in life, most programming languages have functions that receive something and return something with some kind of processing in the middle. In the case of folding socks, the functions receive a pile of socks and return a lovely stack of neatly matched and folded socks. In the middle, the function lays out the socks and matches them. There may be intermediary steps, such as making smaller piles of socks by color. We would call this recursion, which is doing the same steps on smaller piles of socks.

Here are some examples of return statements for comparison.

Java Example

Here is an example of a function in Java where the pile of socks is sorted, matched and folded in the function and the finished stack is in a nice variable in the return statement:

double Average(double a, double b)
double sum = 0;
sum = (a + b) / 2.0;
return sum;

React Example

return (<div> <p>{stateVariable}</p> </div> );

Notice that the return statement for React has a whole lot more pieces than the return statement shown for Java. The “variable” part in React is stateVariable. This is the same part as sum in the Java example. It has to be set off with curly brackets { } so that React knows that the value needs to be pulled in from somewhere else, the code before the return statement. It also identifies that the variable isn’t part of the HTML.

And this is a very small example. If the React files are well-constructed, each web page may be made up of many of these return statements from various files, but each return statement could be many lines long because it’s the whole web page package that is being shipped off, not a single variable.

PHP Example

PHP is different from Java and React. Instead of mixing up the HTML and the variables in a return statement, it mixes them up in the whole file by sliding bits and pieces of PHP between the HTML when a value is needed. In this version of PHP, the code puts the value right where the code is sitting.

<?php echo “Complete <strong>Portal</strong> for Geeks.”?>
<?php echo ‘Explore, learn and grow.’ ?>

In Java and React, HTML is the outsider in the file. In this type of use of PHP, the PHP is the outsider in the HTML file.

Note, PHP can also be written with functions and return statements, like the Java example.




Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.