I am learning React – Part 1

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces that was created at Facebook. It is an open source project that is maintained by developers at Facebook and a large community of contributors. React is mainly used to design single-page applications.

To learn React you should be familiar with HTML and CSS. As it is a JavaScript library so you should also know some JavaScript. Plus, as we’ll use ES6 syntax so familiarity with ES6 syntax is highly recommended.

React use something called JSX(that is JavaScript as XML) to define what the UI will look like. Our browser can’t understand JSX in its native representation, so an intermediate step is performed to convert JSX into JavaScript.  There are two ways to convert JSX to JavaScript:

  1. Build your app to generate the transpiled JavaScript output to correspond to the JSX source.
  2. Use the Babel library (that we are going to use here) to translate the JSX into JavaScript on the browser itself.

Let’s have a look at our first program…

My First Program:

Here are the main components of this program:

<script src=”https://unpkg.com/react@16/umd/react.development.js”></script> — Core React library

<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script> —the react-dom package that provides DOM-specific methods

<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script> — Babel JavaScript compiler that turns JSX into JavaScript

ReactDOM.render: The render method takes two arguments:

  1. The HTML-like elements (also known as JSX) that you want to output
  2. The location in the DOM where React will render the JSX.

JSX: JSX adds XML syntax to JavaScript. Just like XML, JSX tags have a tag name, attributes, and children.

My Second Program:

My Third Program:

And this is how it will look like

Article written by

Please comment with your real name using good manners.

Leave a Reply