4. Full React Tutorial #4 - Dynamic Values in Templates

TBD

01

we can place the following variables into jsx with {}

str
int
floats
arrays []
functions()

import './App.css';

function App() {
const title = 'Welcom to the new blog'
const likes = 50

return (
<div className="App">
    <div className="content">
        <h1>{title}</h1>
        <p>likes {likes} times</p>
        <p> { 10 }</p>
        <p> { [1,2,3,4] }</p>
        <p> { Math.random() * 100 }</p>
    </div>
</div>
);
}

export default App;

02

The same can be done with attributes

import './App.css';
function App() {
const title = 'Welcom to the new blog'
const googleLink = 'https://google.com'
return (
<div className="App">
    <div className="content">
        <h1>{title}</h1>
        <a href={ googleLink }>google</a>
    </div>
</div>
);
}
export default App;

03

boolean and objects cannot be inserted the same way

import './App.css';

function App() {
    const title = 'Welcom to the new blog'
    const likes = 50
    const person = {name: 'mario',age: 30}

return (
<div className="App">
    <div className="content">
        <h1>{title}</h1>
        <p>likes {likes} times</p>
        <p>{ person }
    </div>
</div>
);
}

export default App;