React Part 2 – JSX in ReactJS

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'));

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.