Skip to main content

ReactJS - JSX


How are websites formatted?

Mentioned briefly in prior entries, websites are generally formatted with HTML, a markup language to specify how text is divided up, organized, and displayed (CSS is also used, which gives the different divisions of the webpage styles to make it look presentable, but that is out of scope for the discussion). Well, with ReactJS, they have an interestingly similar approach to writing dynamic site markup; JSX.

Courtesy of kode-blog.com [3]

What is JSX?

JSX, standing for JavaScript XML, is a syntax extension of JavaScript developed specifically by the team to allow "React Elements" as legitimate data types. These React elements consist of XML markup that are used in organization. Wait a second; what is XML even? Have we discussed it yet? To be honest, XML has thus far not exactly been brought up. However, XML is very similar to HTML (the previously discussed markup language) both in appearance and (to a lesser extent in the general sense) function, so for the sake of simplicity, you should equate the two at least for know. In the current applications, the XML markups function basically like HTML anyways, like in the example above (if you do want to briefly read up on the differences between XML and HTML, try source 4).

Anyways, these elements, when processed, generate XML equivalents in a programmatic fashion with segments that are aided with the aforementioned reactive programming. Essentially, this makes elements easier to manipulate and insert en mass from JavaScript, which bypasses former limitations in many other website developing supplementary languages that would require such elements to be contained in sting format [2].

This approach, while potentially easier and less redundant in many circumstances, likens web development to standard programming more so than it originally was. Admittedly, this can be a legitimate issue for new learners with no prior experience in web development, as learning ReactJS-facilitated development exclusively can give a false impression of or hide vital information about the underlying workings of the website processes (similar to the argument against teaching Python as an introductory language). This can be an issue when being forced to revert to website development tactics - be it for a specific company or a special program's needs - of simpler or completely alternate methodologies without a full grasp of the underlying concepts. This argument does hold and pushes me to say that ReactJS is not a library beginners should use. With that being said, the programming logic's impact on actual web development by professionals is something that cannot be disputed as significant and worthy of due thanks.

So, why does this matter

Who cares? Well, as people try to make complex innovations and conglomerates, they themselves are forced to innovate to make the products actually usable. With freedom to design as they please, many choose to integrate familiar technology while looking for potential strides that could be made to simplify or make more efficient the process. In this scenario, Facebook's developers noticed that continuing to limit elements to string representations would not be ideal for the setup (if nothing else, the markup would be hard to read in a string, haha), so they innovated and created a new way to express it. In the broader sense, innovating new ways of representation with hidden complexity is how computer science exists, and ReactJS's JSX syntax extensions are just a way to do that.

Bibliography

Of note, this includes both content that I have used and that which I intend to use for future posts

Comments

Post a Comment

Popular posts from this blog

ReactJS - What is it?

So . . . How About React? What happens when an impressive Facebook engineer gets assigned to port XHP - a PHP version primarily relied upon for data validation and scrubbing to combat XSS - to JavaScript and maybe gets a bit carried away with it [5] ? React! ReactJS (also known as React.js or simply React) is a library of Javascript, a programming language pivotal in the rendering of webpage elements alongside HTML and CSS . While some libraries generally try to incorporate and adapt ‘the wheel’ to make some specialized processes easier, React joins the ranks of the increasingly many that set out to completely reinvent it in many parts. Image courtesy of xpagexplorer.org [15] Basically, what is it? Basically speaking, Javascript is a programming language that can be used to alter the content of the website’s layout. ReactJS, like any library, utilizes its base language to ease and optimize complex sets of operations. Its features rework many elements consid...
6 comments
Read more

ReactJS - Reactive Programming

What Is Reactive Programming? Reactive programming is a commonly-implemented practice in React implementations, but what does that actually mean? Well, Wikipedia's got our backs with the most basic of definitions: "In computing, reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change." Who did what now? Yeah, it seems complicated, but not only is it necessary but, with the veil of jargon explained, it's actually pretty basic. Courtesy of innoq.com [10] Reactive Programming Fundamentals Complexities aside, you can think of reactive programming as programming with changing information. In basic Java programming, for example, int c = a + b; assigns c that sum of the two variables at the time of assignment , not a binding obligation to continuously reflect the sum of a and b as they change. With reactive programming, when a variable's value changes, values associated with said value als...
Post a Comment
Read more

ReactJS - Immutability

Value vs. Reference Equality The mutation of data in computer science is something everybody who has studied a common programming language has done at some point. You create a variable and they you change it ! Magic! All of a sudden, you have a variable that is completely different, with a different value and everything! Well, actually, there's something that probably didn't change; the location of the data in memory. The variable is still pointing to the same place it always did; a little section it found specifically for the variable. The contents of the section had changed, but the reference - a sort of ID, if you would - is still the same. This is called mutating the value, and can therefore be seen as mutability. ReactJS's Spin ReactJS has an interesting method of making rendering more efficient, and it involves the way you alter data. Instead of changing the values of a set object every time you need it to change (mutating it), you can actually adopt a st...
Post a Comment
Read more