Getting Started With React
Whether you are new to programming or a seasoned developer you will hear about ReactJS. It is one of the most popular frameworks for building user-interfaces. Because of its ease of use and flexibility companies use it, including big companies like Facebook, Netflix, Google, and Twitter. There is whole lot to React that can’t just be wrapped in a single blog. However, I can cover the basic concepts needed to get your first a ReactJS app up and running.
Components
Components are simply objects that return HTML. See the picture below to help you visualize them. Basically you can make anything into a component and reuse them as you wish throughout your app. With React DOM manipulation is not necessary instead they ‘mount’ and ‘unmount’ components. There are two types of components: class and functional. Class components are responsible for the logic and rendering of smaller components. Functional components are the ones responsible for displaying the data passed in by the parent component.
JSX
Because components need to return HTML React developers created a new syntax that uses both JS and HTML, JSX. With vanilla JS it was possible to create HTML elements and append them to the DOM. For example if we wanted to create a simple paragraph tag with some text these would be the steps:
//Create the element
var para = document.createElement("p");//add the text we want to see
var node = document.createTextNode("This is new.");
para.appendChild(node);//finally append it to the DOM
var element = document.getElementById("div1");
element.appendChild(para);
These are the 3 steps required. Imagine how complicated and messy your code will get when creating a form. Now with JSX it is all just one step.
//functional componentfunction simpleTag(props){
return(
<div id="div1">
<p>This is new.</p>
</div>
)
}
This would return the exact same HTML as the example above. Which one would you prefer? Always remember that JSX can only return a single element. Which is why is common for developers to wrap everything in a div like in the example. Also every tag must have its closing tags. So <img> tags will require </img> to render.
Props vs. State
This is what makes React dynamic. What gives components the ability to talk to each other. State is commonly used to handle user interaction and can also be passed down to children components as props. Props is simply data passed down to smaller components to be rendered, similar to how attributes are passed down to HTML tags:
<img src="url" alt="text" align="direction"> => HTML<ImageCard url={url} caption={caption} /> => React
This concept tripped me up in the beginning as I did not know when to use which. A good way to think about it is that properties(props) are what you get from your parents and you can’t change them, like your eye color, height… Whereas state can change throughout your life. For example your emotional state may be boring now, but once you start understanding React components it will change.
Types of components
Class vs functional components. Other than the obvious, they have some other differences that will help you determine which one to use over the other. Anything you can do with a functional component you can also do with class component. However, it’s just not best practice to have a class component when all you are doing is simply rendering some HTML. It can also have an impact on performance since every file has to import, React.Component module.
The technology keeps evolving everyday and its best to keep up with it. However, these concepts make up most of React and will be enough to get you started. It will be confusing in the start but any new thing to learn will come with some confusion. Just know that it will make sense along the way. I can almost guarantee that once you begin working on your first ReactJS program you will fall in love with the framework and just want to learn more about it.
