1. TIL (Today I Learned)

React

Why React?

Achievement Goals

1. Understand 3 characteristics of React and be able to explain.
2. Understand why JSX is explicit and can write it correctly.
3. Understand and be able to explain the neccessity of React component.
4. Use create-react app to run a simple development React app.

What is React?
React is a JavaScript open-source library for front end developing.

3 Characteristics of React

1. Declarative

• Easy to understand without the need to read deeply into the code. In DOM: you need CSS, HTML, and a JS file to work. However, in React you just need a CSS and JSX file. It allows you to see the structure and the action in one page which reduces the amount of work needed to develop a program.

2. Component-based

• React consists of independed and resuable components which helps you focus on the operating part of the development, good for maintenance, and also good for unit test.

3. Usable in different environments

• React is used in so many places and workplaces which is a good investment on your future career.

JSX

JavaScript XML (not a string or HTML)

Developed from JavaScript to make an element in React.

It's not possible to use JSX directly to run a browser, you need to use Babel to convert a JSX code into a JavaScript code.

Unlike DOM, you need only a CSS & JSX file to develop a web application.

JSX looks like an HTML.

JSX improves the simplicity of developing, which is a big reason you need to learn JSX.

Rule on using JSX

Rule #1:
When you want to write an element in JSX you have to use an opening & closing tag

Rule#2:

	<div class="greeting>Hello!</div> WRONG!
    <div className="greeting">Hello!</div> CORRECT!
    

Rule#3:
Use {}(brace) when using JavaScript in JSX.

	function App() {
	const name = 'Josh Perez';
    return (
	<div>
         Hello, {name}!
        </div>
       );
    }
    

Rule#4:
When writing a React element use capitalized letter.
All capitalized component is JSX is called a custom component.

Wrong Example:

	function hello() {
    	return <div>Hello!</div>;
        }
        function HelloWorld() {
        return <hello/>;
        }
        

Correct Example:

	function Hello() {
	return <div>Hello!</div>;
    	}
    
    	function HelloWorld() {
	return <Hello/>;
    	}
    

Rule#5:
Conditional rendering should use the ternary operator, not the 'if' statement

	<div>
    	  {
    	  (1+1 === 2) ? (<p>answer</p>) : (<p>false</p>)
          }
        </div>
        

Rule#6:
Whne showing multitple HTML elements in React, use the map() function. When using the map function you must put the "key" JSX property.

	const posts = [
    	  {id: 1, title: 'Hello WOrld', content: 'Welcome to learning React!'},
          {id: 2, title: 'Installation', content: 'You can install React from npm.'}
        ];
        
        function Blog() {
          const content = posts.map((post) =>
            <div key = {post.id}>
              <h3>{post.title}</h3>
              <p>{post.content}</p>
            </div>
          );
          return (
          <div>
            {content}
          </div>
        );
      }
      

2. 3 Things to be Thankful for

1. God reminded me that he gave me a promise and to rely on him. I thank God for giving me faith to put all in Him.
2. Thank God for a healthy day and happy day.
3. Thank God for keeping everyone safe throughout the day.

3. Ideas and Things to think about

1. Being calm and knowing that God already has plans for me is a fact that I should always know. So just enjoy the ride, in the God's way. Follow the rules.