Thursday, November 1, 2018

Getting Started with reactJs JSX tutorials with examples

In this blog post, We are going to Learn JSX tutorials with Syntax and examples usage in React application
Learn React JSX  Tutorials with examples

React JSX Tutorials 

This tutorial covers the following topics  of ReactJS
  • Introduction 
  • JSX Syntax
  • Display react component to DOM
  • JSX CSS inline Styles 
  • Attributes  and props
  • Javascript Expressions
  • Javascript events
  • Comments usage
  • JSX Examples 
  • jsx editors support
  • Naming Code Conventions

what is JSX


JSX is abbreviated as Javascript XML.JSX is a javascript code with XML Syntax.  This can be used in react applications for templating the content in JSX files. The syntax is similar to place HTML code in javascript. 
Content in the jsx contains tags.
Each tag has a name attributes and children. JSX code needs compiler or transpiler to convert to javascript.  Babel plugin needs to configure for compile it. These files are included in javascript or files with extension is JSX
Content can be created either placing HTML in javascript code of jsx file or using React.createElement
advantages
  • the code is readable and easy to write When you place HTML code inside javascript
  • Typesafe and gives errors during the coding phase
  • Performance is good as compilation phase converted to javascript

Display HTML or JSX elements into DOM 

React provides ReactDom class render method display JSX content to DOM. If any content exists in DOM, will be modified to new content.
The syntax is
ReactDom.render(JSX Content or React Component, DOM element)

how to add comments to jxs file

Comments can be added using /* comment */ enclosed in curly braces. Comments can be added either single comments and multi-line comments
Single line comments
const JSXString={/*This is Single line comments example

*/}
Multi-Line Comment 
Here is comments example for adding multiple lines

{/*
This multi line comment example
Display the header */}

React CSS Styles

In normal HTML tags, you can use class attribute for applying styles. In JSX, We will use className instead of class for styles className Usage
 render() {
    return (
      <div className="mystyle">
      {/*  <label>{this.state.data}</label>
        <button onClick = {this.updateState}>Click Me</button>*/}
        <h1>Heading One</h1>
        <h2>Heading Two</h2>
        <h3>Heading Three</h3>
      </div>
    );
  }   
  
Inline Styles usage 
Inline styles can be defined using the style properties attribute. Style contains the CSS styles object In the below example, Defined my styles object. this can be referenced in styles using {} syntax like style={mystyles}) of an HTML elements
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    let mystyles = {
      color:'green',
      fontWeight:'bold'
    };
    return (<div style={mystyles}>This is CSS Inline Styles usage example</div>);
  }
}

export default App;
JSX attributes and props declaration 
In Html, attributes can be defined with inbuilt and custom attributes In the example below Defined HTML attribute data-customattribute Added Custom properties myprop="myproperties"


import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
  <div>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3 data-customattribute = "custom value" myprop="myproperties">Header 3 </h3>
</div>);
  }
}

export default App;
Javascript events usage in JSX 
In JSX, all HTML attributes and events are camel cased. Meaning onclick event in javascript becomes an onClick event in JSX Here is an example for Events example in JSX. Event handlers are functions defined. This will be referenced and assigned using {} syntax assigned to Javascript events
import React, { Component } from 'react';
import './App.css';

class App extends Component {  
  render() {
    var clickEventFunction = function clickEvent() {
      console.log('Click Event Fired');
    };
  
    return (
  <div>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3 onClick={clickEventFunction} >Header 3 </h3>
</div>);
  }
}

export default App;

JSX Example 

Simple Hello World Example

const JSXString=<div>Hello World</div>
Multiple or Nested Elements JSX
 If you are adding multiple elements, You need to be enclosed in a container or parent element. If there is no parent element, it gives compilation error JSX expressions must have one parent element In the below examples, We have two header elements which have parent element like div Valid JSX code
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
  <div>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
</div>);
  }
}
export default App;
Invalid JSX code which compilation error JSX expressions must have one parent element

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
    <h1>Header 1</h1>
    <h2>Header 2</h2>
);
  }
}
export default App;

Javascript expressions usage 

Expressions can be used in JSX content. Expressions can be enclosed within {} syntax


 import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
  <div>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3 - {4+5}</h3>
</div>);
  }
}

export default App;

React JSX coding naming conventions 

These are naming conventions followed as per ESLint conventions

  • React components are saved jsx extension 
  • File names follow Pascel names like MyComponent.jsx 
  • Always use self close tags which has no children elements like <br/> instead of <br></br> 
  • JSX attributes must use double quotes, for Javascript, you can use single quotes prop names follows camelCase rules 
  • Each tag should have closing tag- for example like <div> <div/> or <div> </div> Self closing tags should be closed like <br> in HTML tags works without closing tag, in JSX should be written like <br></br>, Otherwise it throws compilation error JSX element br has no corresponding closing tag 

JSX Editors or IDE Support 

To speed up the development, We need to have many features like Auto Complete, Debugging, Code Syntax and many features required. JSX has support for all popular editors like below

  • Visual Studio Code Editor - React Dev Tools 
  • Atom Editor 
  • Nuclide 
  • Sublime Text Editor 
  • Webstorm IDE 
  • Eclipse IDE for React

Related article


EmoticonEmoticon