Tutorials

ReactJS Tutorial - Basics


ReactJS - First Example


Please note that we will use JS REPL at https://jscomplete.com/repl  to run our example programs. to know more please have a look on previous section ReactJS - Overview

Now lets see how we can write and run our simplest helloworld component in run in the repl

function Helloworld(){
return (
<div>
Hello world!
</div>
);
}
ReactDOM.render(<Helloworld/>,mountNode);

The function Helloword defines a component called Helloworld which returns a simple div with hello world.

Please note that anything written inside return is looks like HTML but its not. It is a special syntax called JSX. We will talk about JSX in next section.

ReactDOM.render method takes two argument . one is your component and other input is root html of your application

For example suppose you have a container called

where you want to render your ReactJS app then you can write as below

ReactDOM.render(, document.getElementById("root"));

For our example as we are using js repl so mount node is okay. You can copy the code and go to http://jscomplete.com/repl paste in left tab and click run to run the application

 

We can use lambda expression to write function for example following component is exactly same as the previous one.

var Helloworld=()=>{
return(
<div>
Hello world !
</div>
);
}

ReactDOM.render(<Helloworld/>,mountNode);

here is exactly same

var Helloworld=(props)=>{
return(
<div>
Hello world !
</div>
);
}

ReactDOM.render(<Helloworld/>,mountNode);

We will see more about props in later sections



Please Share this page
Views : 74
Like every other website we use cookies. By using our site you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Learn more Got it!