Topcoder Getting Started with ReactJS

Getting Started with ReactJS - A blog that is supplemented by a Fun Challenge!

  • ReactJS uses JSX to transpire the HTML element on the web page.
  • React first converts JSX into a JavaScript file that is rendered by the browser, resulting in HTML code.
  • BABEL converts JSX code in JavaScript and takes care of cross-browser compatibility.
  • ReactJS functions are called components.
  • ReactJS gives us power to pass data between components and we do it using props and states.

Have you ever thought of passing your HTML code into JavaScript code? How about displaying HTML elements via JavaScript?

@Topcoder: Getting Started with ReactJS – A blog that is supplemented by a Fun Challenge!

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:

A component as a View can:

Props and Stats

ReactJS gives us power to pass data between components and we do it using props and states.

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 cannot change values during the lifecycle of the component.Props are passed from a parent component to child component.

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:

Here’s what you need to get started:

Soon we will be launching a fun series of ReactJS challenges. Stay tuned.

Happy coding!

Topcoder Getting Started with ReactJS