React Learning Journey Day 1

Self Testing Questions

1. Why is React efficient?
2. how do you declare a variable in React?
3. What are something that you cannot use for naming an attribute in React? and Why? What is an alternative name?
4. What do you do when you have a JSX element that is single tag? (self closing)
5. How do you inject JavaScript code in between JSX code?
6. Write something that utilizes event listener in React.
7. The difference of event listeners in HTML vs in React?
8. Why cannot you use conditional statements directly inside JSX? What is an alternative solution?
9. Write something using Ternary Operator
10. How can && be used in React?

Why React is efficient

React: The Virtual DOM | Codecademy

Basically sounds like the Virtual DOM are much smaller than the real DOM and React does not update the whole “real” DOM but only compare the virtual with the real one’s snapshots to see what had been updated and only render the ones that had been updated which makes it so much faster than other JavaScript frameworks.

JSX syntax — same tag opening and close

When writing HTML statements inside a JSX object, make sure the opening and closing tag are the same. For example,

const example1 = (<div>hi</div>); {/* this works*/}

const example2 = (<p>first</p> <p>second</p>); {/* this does not*/}

JSX class name reservation

JSX gets compiled into JavaScript so there are things to watch out for. For example “class” cannot be an attribute name because it was reserved word in JavaScript. We can use “className” which gets automatically rendered as “class” attributes.

JSX single self closing tag with slash

We have to use <br /> instead of <br> and other self closing tag when using React.

Treating JSX coding like real JavaScript

if we write

ReactDOM.render(<h1>2 + 3</h1>,document.getElementById(‘app’));

We will just get “2+3” on our screen instead of 5 on the screen because JSX is different from JavaScript. However the way to get around is to use curly braces.

ReactDOM.render(<h1>{2 + 3}</h1>,document.getElementById(‘app’));

will be rendered as “5”.

JSX & environment

When you inject JavaScript into JSX, that JavaScript is part of the same environment as the rest of the JavaScript in your file.

That means that you can access variables while inside of a JSX expression, even if those variables were declared on the outside.

// Declare a variable:
const name = ‘Gerdo’;

// Access your variable
// from inside of a JSX expression:
const greeting = <p>Hello, {name}!</p>;

Event Listeners in JSX

List of valid events: https://reactjs.org/docs/events.html#supported-events

An event listener attribute’s name should be something like onClick or onMouseOver: the word on, plus the type of event that you’re listening for.

An event listener attribute’s value should be a function.

<img onClick={myFunc} /> //myFunc should be a valid function

Note that in HTML, event listener names are written in all lowercase, such as onclick or onmouseover. In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.

Example of onClick event listener implementation

Conditional Statements in JSX

if statements and for loops are not expressions in JavaScript, so they can’t be used in JSX directly. details

Workaround: write an if statement, and not inject it into JSX. Surround JSX with If statements.

Example of if statements

example of Ternary Operator

this means only do things after && if things on left of && is true.

A way to replace && with ||:

&& means only do second part of && when the first part is true. || in another way, is an exclusive or. Basically if we do {dontShowBackground || background} then background will show up when dontShowBackground is false and background will not show up when dontShowBackground is true.

Self Testing Questions Answers

1. Why is React efficient? A: uses virtual DOM to check what has been changed so only renders DOMs that are changed instead of the whole thing
2. how do you declare a variable in React? A: const e = <h1>hi</hi>; for one line declaration and const a = (<h1>hiii</h1>); add () for multiple lines
3. What are something that you cannot use for naming an attribute in React? and Why? What is an alternative name? A: class because it is reserved name in JavaScript. alternative is className which automatically gets converted to class after rendering
4. What do you do when you have a JSX element that is single tag? (self closing) A: add slash <br />
5. How do you inject JavaScript code in between JSX code? A:use curly brackets.
6. Write something that utilizes event listener in React. A: const e = (<img src = “some_url” onClick = {someFunction} />);
7. The difference of event listeners in HTML vs in React? A: HTMl use all lowercase while React use camel case like thisOne
8. Why cannot you use conditional statements directly inside JSX? What is an alternative solution? A: because they are not JavaScript expressions. Surround JSX with if statements.
9. Write something using Ternary Operator. A: const e = {<img src = age > 22 ? “someDribkingImage” : “TeenImage”};
10. How can && be used in React? A: if the stuff in left part is true then execute the right part.