Part 1: React functional components and JSX

You might be wondering from our REACT introduction why in our hello world syntax does the html goes inside the render function

ReactDOM.render(<h1>hello world!</h1>,document.getElementById("app"))

well the answer is simple react doesn't use Javascript in particular, but it uses something called JSX which is the combination of HTMl and Javascript Which is cool!

buuut it can be lengthy to write html in your render function imagine how your function will look like, and that's where React components come in the ground

Just as bad as this GIF is and I will fix it in the future, it's also a bad idea to put a lot of html in your render function and this is where components come to rescue

How to create a component in react js and why

components are actually functions, which makes total sense because that's the sol purpose of functions in the first place so to start making a function in react let's for example call it Myapp

and WHY use components is that it can be reusable and you can't bloat your function with html because it will be confusing to read

function Myapp(){
return( <ul>
         <li>first list</li>
         <li>second list</li>
         <li>Third list</li>
        </ul> )
}

you can also use arrow function if you want

last step which is calling that function by it's name Myapp by writing it in the render function as following

ReactDOM.render(<Myapp />, document.getElementById("app"))

and, remember this <Myapp /> isn't html it's JSX

and, at last this is how it should look like