Introduction to React

JavaScript

An Introduction to JavaScript React

This line:

Const h1 =<h1>Hello World</h1>

… is not HTML, nor even JavaScript, but JSX

JSX is a syntax extension for JavaScript. JSX code is identical to HTML

It is placed within Javascript code but needs to be compiled into JavaScript.

JSX elements can go anywhere JS expressions can go -- saved in as an “variable” stored in an object or array.

const paragraph =<p>I am a navy bar</p>;

Not the "const" to define be variable and the line ending semicolon. LIke, HTML, JSX can support attributes, with quote marks:

const title =<p id="LeadPara">I am the lead para</p>

JSX expressions can be nested, through parenthesis:

const myParagraph = (
        	<div>
          	<p>
            I am the para that goes here
          	</p>
        	</div>
      );

Note that each JSX expression can only include one outer element. THis will not work:

const myParagraphs = (
          	<p>I am the para that goes here	</p>
        	<p>I am the para that goes here	</p>
      );

Instead use this:

const myParagraphs = (
    	<div>
          	<p>I am the para that goes here	</p>
        	<p>I am the para that goes here	</p>
		   	<div>
      );

Notes taken from the Codecademy class "Learn ReactJS: Part 1."

Other Tutorials