Skip to main content

JSX = XMLised Javascript


JSX stands for Javascript XML. React works without using JSX but it is advised to use it to write more elegant code. Let us find out what JSX is and the pros of using it:

What is JSX?

JSX is syntactic sugar to React.createElement(component, props, ...children) function. In short it basically allows you to write HTML in react code.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic like handling events, how data is prepared for display e.t.c.. so instead of separating markup and logic into different files. It is easier to have it along side your ReactJS code. Also, it's type-safe which helps you to catch most of the errors during compilation.

JSX and it's React code:

JSX
const element = (
    <h1 className="greeting">
    Hello, React!
    </h1>
);

Above JSX will get compiled to the following code without JSX:
var element = React.createElement(
  "h1",
  {
    className: "greeting"
  },
  "Hello, React!"
);

*Babel is the javascript compiler used to convert the above JSX code to React.createElement code.

→ As seen above, after compilation JSX expressions become regular javascript function calls which will then be evaluated to javascript objects in the browser so similar to the functions JSX can be assigned to variables, accepted as arguments, used inside control statements and return it from functions.
→ JSX syntax is similar to XML. JSX tags contain tag name, attributes and children. Attribute values can be a string between '  ' or javascript expressions wrapped in curly braces {} can be used.

Rules:

  1. One top level element must wrap the HTML code if not exceptions like "Adjacent JSX elements must be wrapped in an enclosing tag" will occur.
  2. JSX considers components with small letters a html tags(h1, p, div...) and tries to render them directly instead of creating a React object using React.createElement() so user components must be declared with capital letters and used when needed.
One more example with children components:
JSX
function hello() {
  return 
  <div>
    <ul className="numbers">
      <li>one</li>
      <li>two</li>
    </ul>
    <h1>Hello</h1>
  </div>;
}
Without JSX
function hello() {
  return;
  React.createElement(
    "div",
    null,
    React.createElement(
      "ul",
      {
        className: "numbers"
      },
      React.createElement("li", null, "one"),
      React.createElement("li", null, "two")
    ),
    React.createElement("h1", null, "Hello")
  );
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Spring Boot - RestTemplate PATCH request fix

  In Spring Boot, you make a simple http request as below: 1. Define RestTemplate bean @Bean public RestTemplate restTemplate () { return new RestTemplate (); } 2. Autowire RestTemplate wherever you need to make Http calls @Autowire private RestTemplate restTemplate ; 3. Use auto-wired RestTemplate to make the Http call restTemplate . exchange ( "http://localhost:8080/users" , HttpMethod . POST , httpEntity , String . class ); Above setup works fine for all Http calls except PATCH. The following exception occurs if you try to make a PATCH request as above Exception: I / O error on PATCH request for \ "http://localhost:8080/users\" : Invalid HTTP method: PATCH ; nested exception is java . net . ProtocolException : Invalid HTTP method: PATCH Cause: Above exception happens because of the HttpURLConnection used by default in Spring Boot RestTemplate which is provided by the standard JDK HTTP library. More on this at this  bug Fix: This can b...
Post a Comment
Read more

Settings.xml for Maven, JFrog

For development and deployment of applications we always use an artifactory in real-time world to host artifacts needed for your build and also as a target to deploy artifacts generated in the build process. For Maven, to communicate with artifactory we need a settings.xml file which is usually located at "/User/rake/.m2/settings.xml" this file consists of how to authenticate to the artifactory servers and authorizations to read/ write to different locations like release, snapshots e.t.c... Settings.xml can be generated using the artifactory you're using which in my case is JFrog , but here's a sample settings file for your reference incase you're feeling lazy☺ <?xml version="1.0" encoding="UTF-8"?> <settings xsi:schemaLocation= "http://maven.apache.org/SETTINGS/1.1.0 http://maven.apache.org/xsd/settings-1.1.0.xsd" xmlns= "http://maven.apache.org/SETTINGS/1.1.0" xmlns:xsi= "http://www.w3.org/2001/XM...
Post a Comment
Read more

Stored Procedures in ADF

One of the common requirements for ADF programmers is to invoke Stored Procedures and Functions. Implementing this is so simple with few lines of code in Java classes used under business components. Following code snippets from fusion guide  will help execute different procedures with and without arguments. Execute stored procedure with No Arguments: public void callProcWithNoArgs() { getDBTransaction().executeCommand( "begin devguidepkg.proc_with_no_args; end;"); } Execute stored procedure with only IN arguments: Procedures often take arguments in order to process some business logic. Arguments are limited from none to many. In order to use stored procedures with argument mode we need to use JDBC PreparedStatement object. How To: Create connection Create a JDBC PreparedStatement with procedure details wrapped in a PL/SQL begin..end block. Assign the values to arguments if any. Execute the statement. Close the statement. protected void callStoredPr...
Post a Comment
Read more