App.css

#root {
  margin: 0 auto;
}

App.jsx

import './App.css'

function App() {

const element1 = <h2>Hello, world!</h2>;
const element2 = (
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
)

console.log(element1)
console.log(element2)

 return (
    <>
      {/* JSX Practices */}
      <h1>JSX</h1>
    </>
  )
}

export default App

App.jsx

import './App.css'

const language = "JavaScript"

function App() {

 return (
    <>
      {language}
    </>
  )
}

export default App

App.jsx

import './App.css'

function BasicExpressions() {
  const name = "John";
  const age = 25;
  const isAdmin = true;
  
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age next year: {age + 1}</p>
      <p>{name + "'s Profile"}</p>
      <p>{`${name} is ${age} years old`}</p>
      <p>Admin status: {String(isAdmin)}</p>
    </div>
  );
}

function App() {
 return <BasicExpressions />
}

export default App