React JS Tutorial for Beginners – Introduction

React Js Tutorial for Beginners with example

  • What is react js?
  • Why ReactJS?
  • What is JSX Transformer?
  • Integrate with Html.

What is React js?

Well react allows you to build a website or webpages. Where if any part of your webpage changes were is dynamic then you can use react, that means if you want to achieve real time performance of your application so you can go with react js like your chat application or website notifications.

Why ReactJS?

Why react.js, So let me give you guys an example love when you react would be awesome to say that you are making some kind a social network and you had notifications a top your screen like facebook well instead love having to refresh your page every time to see when you got new notifications.

You can just use react and then wherever you got a new notification were update in real time, So another thing that our people use react a lot for is see that you are building like some kind of chat application.

What is JSX Transformer?

JSX is a special type of syntax, you can type instead just typing pure javascript.
JSX transformer for development called browser.js that can be included from a babel-core npm release or from CDNJS.

Integrate with Html.

Create HTML file and include library in

//Add React Js library from CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>

//Add JSXtransformer.js from cdn.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

//Add Jquery as you know.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Let see one example of reactjs below

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Tamtech</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

    <div id="content"></div>

    <script type="text/jsx">
    
        var FirstComponent = React.createClass({
            render: function() {
                return (
                        <h2>My name is React</h2>
                );
            }
        });

        React.render(<FirstComponent/>, document.getElementById('content'));

    </script>

</body>
</html>