June 12, 2017 Getting Started with ReactJS

Have you ever thought of passing your HTML code into JavaScript code? How about displaying HTML elements via JavaScript?
All of this is possible with ReactJS.
React is an open-source JavaScript library for building user interfaces. In other words it’s a view of MVC which helps you to render HTML. ReactJS uses JSX to transpire the HTML element on the web page.
You might be wondering, do I need to learn a new programming language – JSX – to start building views with ReactJS?
Not really, JSX is just a blend of JavaScript and XML. JSX is a syntax extension of JavaScript. JSX enables React to build DOM nodes with HTML like syntax. React first converts JSX into a JavaScript file that is rendered by the browser, resulting in HTML code.
Browsers can not interpret JSX, so BABEL does it for us. BABEL converts JSX code in JavaScript and takes care of cross-browser compatibility. The bundling of the code is taken care of by WEBPACK, which handles JSX dependencies and binds the code.
ReactJS functions are called components. A React component lets you split the UI into independent reusable pieces so you can think about each piece in isolation. A component is responsible for returning React elements describing what should appear on the screen.
Components can be defined the way you want so you can get them to do exactly what you want. You can even make a component act like a Container or to act as a View.
A component as a Container can:

• Describe how things work
• Provide no DOM markup or styles
• Provide application data, do data fetching

A component as a View can:

• Describe how things look
• Have no app dependencies
• Receive only props, providing data and callbacks
• Rarely have it’s own state, when they do, it’s just a UI state

Props and Stats
ReactJS gives us power to pass data between components and we do it using props and states.
Understanding Props
Props is an abbreviation for properties.You can think of props as a function’s argument that is passed to a function to perform a certain operation. Similarly props act as an argument to a component.
Props are passed from a parent component to child component.
Understanding State
A State keeps the record of the information between the rendering of components.  Unlike props, a State’s values are changeable. A State is created in a component by declaring a constructor.
I will end this blog by summarizing this post and mentioning the prerequisite to get started with ReactJS.
We have learned:

• React is an open-source JavaScript library to build user interfaces. In other words it’s a View of MVC which helps you to render HTML.
• A react component let you split the UI into independent, reusable pieces, and think about each piece in isolation.
• We can define Component as Container and View.
• We use Props and State to pass the data between components.

Here’s what you  need to get started:
Node Package Manager
Babel
Webpack
Click here to participate in the Hello World challenge on Topcoder now!
Happy coding!