React JS

ReactDOM.render

  1. The first argument is WHAT to render to the browser. This is always a “React element”.
  2. The second argument is WHERE to render that React element in the browser.
// jsdrops.com/react-dom2
const render = () => {
document.getElementById(‘mountNode’).innerHTML = `
<div>
Hello HTML
<input />
<pre>${new Date().toLocaleTimeString()}</pre>
</div>
`; ReactDOM.render(
React.createElement(
‘div’,
null,
‘Hello React ‘,
React.createElement(‘input’, null),
React.createElement(
‘pre’,
null,
new Date().toLocaleTimeString()
)
),
document.getElementById(‘mountNode2’)
);
};setInterval(render, 1000);
// jsdrops.com/bx2
function Button (props) {
return React.createElement(
"button",
{ type: "submit" },
props.label
);

}ReactDOM.render(
React.createElement(Button, { label: "Save"}),
mountNode
);
const Card = ({ props }) => {
return (
<img src={props.src} />
<a href={props.href}>Link</a>
)
};
  • useState()
  • useEffect()
  • useHistory()
  • useRef()
  • useLocation()
const Button = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};
const Button = () => {
const [count, setCount] = useState(0);
useEffect((evt)=>{
setCount(evt.setCont);
}, [])
return (
<button onClick={() => handleCount(count + 1)}>
{count}
</button>
);
};

--

--

--

A servant of my Allah

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Strawberries Company Website using HTML CSS

Build a blog with React, Wordpress using Gatsby

Simple guide to learning React from Scratch

5 Simple Web Development Projects

A picture of fully responsive website

Early Accessibility Testing

Controlling the Full-Screen Mode

Netflix on Fullscreen Mode

Fundamentals of Redux with React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store