React small tips and tricks
Nov 1 · 1 min read
- About the data types supported in the
jsx.
It Supports the following in the jsx.
- numbers/ string
- Array
- Set
- any iterables
// this is valid jsxconst testVar = new Set([2,3,3,4]);function App() {return (<div className="App"><h1>Hello CodeSandbox</h1><h2>Start editing to see some magic happen!</h2><button onClick={()=>console.log(window.location.reload())} >Test</button>{(testVar)} {`testVar Hellot ${testVar} {good for the printing}`}{ `Hello {testVar}` }</div>);}
2. How to print {} in the jsx.
// use template literal string for this
// if you want to print {myVar} in jsk. do it this wayreturn <div>
{ `{myVar} // will print the value` }
3. You have access to global variables in the jsx template unlike Angular , because jsx is javascript only.
render(){<div>
<button onClick={()=>console.log(document.querySelector("h1")); alert("hello", window)}></div>
4. You can run 2 or more(multiple) react apps on the same page.
function App() {return (<div className="App"><h1>Hello CodeSandbox</h1><h2>Start editing to see some magic happen!</h2><button onClick={()=>console.log(App,document.querySelector('App'))} >Test</button></div>);}const App2 = ()=> <h1> Hello this is good</h1>;ReactDOM.render(<App />, document.getElementById("root"));ReactDOM.render(<App2 />, document.getElementById("root2"));
