React Get Element By Id
import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myList = ( <ul>
<li>Mama</li>
<li>Baba</li>
</ul>);
ReactDOM.render(
myList,
document.getElementById('app'));
https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a
Add class in div at reactjs selector
import React from 'react';
import ReactDOM from 'react-dom';
// Write code here:
const myDiv = (<div className="big">I AM A BIG DIV</div>);
ReactDOM.render(myDiv, document.getElementById('app'));
ReactDom required self-closing tag if not result might be error on render
const profile = (
<div>
<h1>I AM JENKINS</h1>
<img src="images/jenkins.png" />
<article>
I LIKE TO SIT
<br/>
JENKINS IS MY NAME
<br/>
THANKS HA LOT
</article>
</div>
);
How to add pure javascript inside react jsx?
a: add curly braces
...
ReactDOM.render(<h1>{2+3}</h1>,
document.getElementById('app'));
everything inside curly braces treated as regular javascript
How to use variable for javascript inside JSX?
a: Simple as declare variable and call it using curlyBraces
...
const theBestString = 'tralalalala i am da best';
ReactDOM.render(<h1>{ theBestString }</h1>, document.getElementById('app'));
Using Variable to add image or content
const pics = {
panda: "http://bit.ly/1Tqltv5",
owl: "http://bit.ly/1XGtkM3",
owlCat: "http://bit.ly/1Upbczi"
};
const panda = (
<img
src={pics.panda}
alt="Lazy Panda" />
);
const owl = (
<img
src={pics.owl}
alt="Unimpressed Owl" />
);
const owlCat = (
<img
src={pics.owlCat}
alt="Ghastly Abomination" />
);
You can save data by declare variable and display by combine it.
const goose = 'https://s3.amazonaws.com/codecademy content/courses/React/react_photo-goose.jpg';
// Declare new variable here:
const gooseImg = ( <img src={goose} /> );
ReactDOM.render(gooseImg,
document.getElementById('app'));
----------------------------------------------------------
note: ... equal to
import React from 'react';
import ReactDOM from 'react-dom';
