Hello World in ReactJs

What is called ReactJs?

It is a javascript library for building user interactives.It is declarative and component based,It will efficiently update and render the right component when you make any change in data using Virtual DOM.Let's start our hello world tutorial...:-)

Create one HTML Page and named as index.html
In that HTML page paste the following code.After that i will explain that.

 <!DOCTYPE html>  
 <html>  
 <head>  
   <Title>React Tutorial</Title>  
 </head>  
 <body>  
     <h1>ReactJs Hello World</h1>  
     <div id="spaceForReact">  
       <p>  
         React makes me hide wait...If am visible to you means React is not working yet.  
       </p>  
     </div>  
     <script src="https://fb.me/react-0.14.6.js"></script>  
     <script src="https://fb.me/react-dom-0.14.6.js"></script>  
     <script>  
ReactDOM.render(React.createElement('h2', null, 'Hello world From NKTechBits'), document.getElementById('spaceForReact'));  
     </script>  
 </body>  
 </html>

React code contains on Script section,Starts with this two CDN's.

<script src="https://fb.me/react-0.14.6.js"></script>

<script src="https://fb.me/react-dom-0.14.6.js"></script>
First one contains library of react and second one contains react-DOM to use react with web DOM.
ReactDoM.render it's actually provides DOM of the component.
Render has introduces the new function called React.createElement,It creates a new elements to DOM.This function expects three parameters.
1: HTML elements should be in lower case and wihtout angle brackets.
eg:div,h1,p.
2: pass any parameters for that component in object,In our example just we sent as null.
3: Content of that Html element or child element of that html element.
And we provide next parameter of Render function,First one contains Html element,content of that DOM,Second parameter is an query selector is used to choose main element to rendered our component and append in web page.
We appended our component to the main element with the id "#spaceForReact",Once it is appended we can able to see our component in web page.

Ya it has been completed..Now open index.html in your browser and check your output.
will see you soon...with my next post in reactJs

NK Tweaks

Search This Blog

Hello World in ReactJs

Comments

Post a Comment