Getting Started with ReactJS

June 12, 2017 Shashank Khatri

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!

The post Getting Started with ReactJS appeared first on Topcoder.

Previous Article
What Do Positionless Basketball and Software Development Have in Common?
What Do Positionless Basketball and Software Development Have in Common?

Two things I love are sports and coding. Luckily for me, I combine both daily at Topcoder. As a child of......

Next Article
DS Weekly Challenges: Results
DS Weekly Challenges: Results

I’ve fallen behind on publishing the results of past Data Science challenges – well, that’s what one gets f...