React-Js Development for Steemit | Markup with JSX | Steem Alliance Community.

Hello Everyone,

How are you guys, I hope members of Steem alliance will be well and good, by the grace of God, I am also feeling well. My responsibility in this community is as a development manager. I have started the consistently tutorial base program to spread the knowledge of programming and development.

In this tutorial, I have selected the topic “Markup with JSX”. after the successful completion of react I will design a front end of steemit with extra features by using SDS API and steem js library. JSX is a programming language used in web development.

JSX integrates with JavaScript to provide the user interface. It is known as JavaScript xml. 'J' for java, 'S' for script and 'X' for xml when integrate these words then it makes JSX. The syntax of JSX code is slightly different from JavaScript code. The syntax of JSX is easier to read/write and understand.

When JSX code is written in JavaScript, it is converted to JavaScript code by a compiler. Dynamic and interactive user interfaces is created by using JSX in web development. we will also use it to make the steemit interface better than steemit by adding more functionality.

I want to clear a confusion that mostly developers have. React is the JavaScript lib but if we talk about JSX then it is the syntax extension. JSX allow us to write HTML like code in JavaScript. User interface is design dynamically in it, after designing the structure of UI React takes this code into DOM for rendering.

Example

const name = "@bountyking5";
const element = <h1>Hello, {name}! welcome on steemit</h1>;

In the Above example, Javascript expression are used in the {name} curly braces. It will render by combining the statement like this Hello, @bountyking5! welcome on steemit under the <h1> Tage. In the below screenshot you can see easily.

We can use the fragment at the place of <div>. A detail post is already published on it.

So, we can convert the simple html code into JSX by using JavaScript. function will help us to make the thing smooth and component also help to avoid the rewriting of code. I hope this post will be helpful for those users who have interest in development. for any discussion, please contact me on discord or in the comment section below.

// JSX Example for understanding.

function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (

    <div>
      <h1>React JSX Button</h1>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
}

Please cast witness vote to @bangla.Witness or set proxy to @rme.

_
Vote @bangla.witness as witness
Set Proxy @rme as proxy

Special Thanks.

Cc: @rme
Cc: @hungry-griffin
Cc: @stephenkendal

Thanks for giving your precious time to my post.
Follow | Upvote | Share | Comments
Follow me on Instagram.
Instagram

🆃🅷🅰️🅽🅺 🆈🅾️🆄