React small tips and tricks

  1. 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 way
return <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"));

Love Web building technologies working as frontend team lead loves working on JavaScript tech stack, as Reactjs, Angular, HTML5