Overview about ReactJS?

What Is ReactJS?

Starting this tutorial with assuming that you have some familiarity with HTML and JavaScript & also assume that you’re familiar with programming concepts like functions, objects, arrays, and about classes.

Now I continue with ReactJS:

  • React Is Nothing but a JavaScript Library, which was created by Facebook in 2011.
  • React encourages the creation of reusable UI components.
  • React will efficiently update and render(display) just the right components when your data changes over time.
  • React follow uni-directional data flow, which reduces the boilerplate and reasonably easier than traditional data binding.
  • It powers up mobile apps using React Native.


Terms & Features of ReactJS:

1. JSX (JavaScript XML) :

  • JSX is an XML/HTML like extension to JavaScript. It isn’t necessary to use this, but it is recommended in React. Exm:
const val= <h1> Hello Message ! </h1>
  • As shown above, JSX syntax is neither in JavaScript nor HTML.
  • Like HTML, JSX tags have a tag name, attributes & children.
  • It also comes with the full features of ES6( ECMAScript 2015 ).
  • If an attributes wrapped in curly braces, then that is a JavaScript expression.

2. React DOM Render :

  • The method ReactDOM.render() is used to display the HTML Element’s :
<div id="root">Hello World!</div>

<script type="text/babel">
    <h1>Hello React!</h1>,

3. React Components:

  • React is all about the components.
  • React Components are nothing but similar to the JavaScript Functions.
  • The function name is known as the React Components (As shown Below “iTechinsiders” is a React Components)


<div id="root"></div>

<script type="text/babel">
function iTechinsiders()

return <h1>Hello React!</h1>;

ReactDOM.render(<iTechinsiders/>, document.getElementById('root'));

4. JSX Expression ;

  • Expression wrapping in Curly braces {} in JSX, known as JSX Expression.


<div id="root">Hello World!</div>

<script type="text/babel">
const name= 'itech';
ReactDOM.render( <h1>Hello {name}!</h1>, document.getElementById('root'));
5. Babel:
  • Babel allows using the newest feature of JavaScript(ES6).
  • Babel is a JavaScript Compiler which converts markup/programming lang into JavaScript (Means Browser does not understand JSX format that’s why it needs to convert into JavaScript).


#Adding React to an HTML Page:

<!DOCTYPE html>
<html lang="en">
<title>Test React</title>

<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load Babel Compiler -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>


<script type="text/babel">
   //  JSX Babel code goes here


Related Post

One Reply to “Overview about ReactJS?”

Leave a Reply

Your email address will not be published. Required fields are marked *