Skip to main content

Featured

Java Interview Questions for Senior Full Stack Developer

Please like our page to get latest updates from only full stack

React Part 2 - JSX in React

What we have learned so far?

Part 1 - Hello Word in React?
https://onlyfullstack.blogspot.com/2019/11/create-reactjs-app-hello-world.html

What is JSX in ReactJS?

  • JSX stands for JavaScript XML.
  • JSX allows us to write HTML in React.
  • JSX makes it easier to write and add HTML in React.
  • JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()  and/or appendChild() methods.
  • JSX converts HTML tags into react elements.
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.

JSX Specification link - https://facebook.github.io/jsx/

ReactJS Code With JSX
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {

  render() {
    return (
      <div>
        <h1 className="css-1">Hello World</h1>
        <p>
          Start editing to see some magic happen :)
        </p>
        <a href="">ReactJS Tutorial on Only Fullstack</a>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

ReactJS Code Without JSX
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends Component {
  render() {
    return React.createElement("div", null, React.createElement("h1", {className:"css-1"}, "Hello World"), React.createElement("p", null, "Start editing to see some magic happen :)"), React.createElement("a", {
      href: ""
    }, "ReactJS Tutorial on Only Fullstack"));
  }

}

render(React.createElement(App, null), document.getElementById('root'));

As you can see, Its very difficult to design the UI with React nodes and we can use JSX to design UI and React will convert this JSX code with React Nodes. So just relax and don't look much into React Node and start with JSX. Its easy and simple to use HTML with JS with help of JSX.

Use className in JSX ReactJS

class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of class.

Nothing has changed in that regard.

To expand this a bit more. A keyword means that a token has a special meaning in a language syntax. For example in:

class MyClass extends React.Class {
Token class denotes that the next token is an identifier and what follows is a class declaration. See
Javascript Keywords + Reserved Words

Embedding Expressions in JSX

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

Specifying Attributes with JSX

You may also use curly braces to embed a JavaScript expression in an attribute:
const element = <img src="{user.avatarUrl}" />;

Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
  • Using JSX, you can leverage the full power of JavaScript in HTML.
  • You have to close all tags, always.
  • You have to use className for HTML class attribute.
  • You have to use htmlFor for HTML for attribute.
Lets go to our next tutorial where we will discuss below points :

Part 3 - Components state and props in React

In this tutorial, we will understand below topics - 
 - What are components in React?
 - Components state in React
 - Components props in React
 - state vs props in React
 - Functional vs Class Component in React
 - Advantages of Functional Component in React
 - React Components Lifecycle
https://onlyfullstack.blogspot.com/2019/11/react-components-state-props-lifecycle.html


Source Code
You can edit and play with the react examples on below stackblitz site - 
https://stackblitz.com/@onlyfullstack

React Tutorial
https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html

Comments

Trending Tutorials

Trending Tutorials

WebSocket With Spring Boot and Angular 6 Tutorial

In this tutorial, we will understand What is WebSocket? Why to use WebSocket? Polling vs Server Sent Events vs WebSocket and WebSocket Example with Spring Boot + Angular 6 + STOMP

Code Coverage with JaCoCo Sonar and Maven

In this tutorial, we will understand the importance of code coverage and how can we setup the Sonar + JaCoCo + Maven to get the code coverage. We will look into Setting up Sonar Server Locally, Integrate JaCoCo plugin with Sonar and Maven for Code Coverage, Find Code Coverage in Eclipse : EclEmma Configuration

Java 8 Features

Learn all about Java 8 features in details

Lambda Expression in Java 8

Ever wonder what Lambda Expression is? What Lambda expressions are compiled to? if no then you should go through this tutorial to know more about Lambda and how they are different than anonymous class.