Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • JSX in ReactJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 161
    Comment on it

    JSX is JavaScript syntax extension.

    1. JSX is a pre-processor step that adds XML syntax to JavaScript.

    2. It isn't necessary to use JSX in React development, but it is recommended.

    3. It makes React more elegant.

    4. JSX tags have a tag name, attributes, and children which is similar to XML.

    5. If an attribute value is enclosed in quotes, the value would be a string.

    6. If the value wrapped in braces, the value would be an enclosed JavaScript expression.

       

    JSX Syntax Needs Some Attention

    1. Nested Element

        These need to wrap it in one container element to return multiple elements.   

     

    var NestedComponent = React.createClass({
        render: function () {
            return (
                <div>
                    <h1>Hello,</h1>
                   <h1>Hi,</h1>
                   <h2>how r u</h2>
                </div>
                );
        }
    });
    ReactDOM.render(<NestedComponent />, document.getElementById('divNestedContent'))

     

    2. JavaScript Expressions

        JavaScript expressions can be used inside of JSX. You just need to wrap it with curly brackets {}.
        We cannot use if-else in jsx instead of ternary or conditional expression.

     

    var JSExpression = React.createClass({
        render: function () {
            var i = 2;
            return (
                <div>
                    <p>1+1</p>
                    <p>{1 + 1}</p>
                    <p>{i == 1 ? 'True' : 'False'}</p>
                </div>
                );
        }
    });
    ReactDOM.render(<JSExpression />, document.getElementById('divJSExpression'))
    


        
    3. Styling
        React recommends using inline styles for this camelCase syntax is used. The other way of doing styling is to set "className" with style.

    4. Comments
        Comments are need to put in curly brackets {}.
       
    5. Naming Convention
        React components starts with Uppercase. For  defining class and for, you should use "className" and "htmlFor"

    var Hello = React.createClass({
        render: function () {
            var MyStyle = {
                fontSize: 40,
                color: 'blue',
            }
            return (
                <div>
                  <h1 className='header'>ReactJS </h1>
                  <h1 style={MyStyle}>ReactJS </h1>
                    
            {/*Multi line comment...*/}
                  
            </div>
            );
        }
    });
    ReactDOM.render(<Hello />, document.getElementById('divMyStyle'))*/
    

    Hope, it will help you.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: