React for Beginners

React is JavaScript Library used for building Rich UI and helps facilitate page interactions.

some best practices in react:

• you may want to close tags /> if they are empty. ex.

const output= <img src={user.someUrl} />;

keywords used throughout this post:

• attr - attribute
• output - displays the desired result
• UI - user interface

Introducing JSX in React -
React JSX: Allows us to put HTML into JavaScript.
ex:

const firstName = "Oteele"

in our html file, we can refer to the variable name firstName in an H1 tag like below:

<h1>my name is {firstName}</h1> // Oteele 

*OR try the below in your IDE of choice: *

function personName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Oteele',
  lastName: 'Ankasa'
};
const output= (
  <h1>
    Hello, {personName(user)}!
  </h1>
);

We can also specify attributes with JSX:
using quotes to specify string literals as attr.

const output= <a href="https://www.reactjs.org"> link </a>;

using curly braces to embed a JSX in an atrr.

const output= <img src={user.someUrl}></img>;

As a side note: Passing double quotes around a curly braces when embedding JSX in an attribute would not wok as expected."{}" ❌.
Better to ignore adding double quotes. {} ✅