Part 1: Know How JSX works
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."