The Intro! : ReactJS & JSX experience frontend react

Hai allocaters! :)

Here I am again, Zahra, one of your lovely hipsters from allocateam :)

Like I said before, I will share with you guys every week about what I have done, what I have learned and anything that I can share with you guys from PPL.

If you guys interested to learn about react, this post (maybe) will help you a little (I hope so). This post can help you guys to know the intro about react. No, I won't say that it would be easy, but I will let you guys know how I learned about react. 

For the intro, I never ever know about react before.  The first time I knew about react is recent, in the PPL class. That's why for my first task is to learn about react. I really learned about it from the start. The good thing is, I found interesting web which is https://www.codecademy.com. Codeacademy will give you some explanation about React. After that, it will give you instructions and you have to code it by your self. 

On codeacademy, ReactJS: Part 1 will be divided into 3 parts. First, You will learn about JSX, and it includes the intro and advanced JSX. Second, you will learn about React Components and the last is Components Interacting. 

On the intro, they present you about JSX, a syntax extension for JavaScript that was written to be used with React. JSX code looks a lot like HTML. Then, I learned about JSX Elements. JSX Element is a basic unit of JSX. Here's an example of a JSX element:

<a> Hello guys, We are allocateam!</a>

This JSX element looks exactly like HTML. The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file. Other than that, you guys will learn about attributes in JSX. JSX elements can have attributes, just like HTML elements. A JSX attribute is written using HTML-like syntax. Example of it is: 

<a href="http://www.allocateam.com"> Hello guys, We are allocateam!</a>

href="http://www.allocateam.com" is example of attribute in JSX. href is a name and the http is a value of the attribute. A single JSX element can have many attributes like HTML. You will also learn about nested, outer elements, rendering and passing variables in JSX. Then you will move to the React Component section. 

React applications are made out of codes that are responsible for one job called component. before you make components, you have to import React and ReactDOM library first. There is one class of JavaScript called React.Component, you have to use it for making your own component class. You can make a class by using this code:

class YourComponentNameGoesHere extends React.Component {}

You do really have to open codeacademy because it will tell you a lot about Component Class Instructions and all about rendering in React. Remember, you have to code all the instructions all by your self.

That all about the intro of React. You want to know more? Trust me, the time that I took for studying about react is so worthy. I thank Codeacademy for the good things on there! 

Thank you! See you on the next post!

pict source: https://www.youtube.com/watch?v=yc8fg7gWbBA