React framework may seem just a fad as there’s much ado it receives in the developer’s community. The question is where it’s worth spending your time to learn React JS, or it’s bound to quickly fade into oblivion.
Actually, React framework has shown itself to be more just a fad for a number of reasons, which are listed below:
Below, comes a React JS example to make you even more inspired to start digging into the technology with our React JS tutorial for beginners.
If you wonder, why React JS is so fast, then you have to learn about the powerful Virtual DOM that works like a mediator between the React code and what’s actually displayed in the browser window. Let’s say you have a piece of React code that depends on some data. Then, imagine that some change in the data occurs. What happens next, React identifies what has changed and updates the DOM with the result of the difference. React doesn’t have to update the whole real DOM (let’s say, the whole page), but just the parts of it, where something changed. Below, you’ll find the model, which shows how Virtual DOM works as a mediator in React – Browser interaction:
In this React JS example, you add the scripts, such as react.js and JSXTransformer.js to show the processor that you’re about to write your component using React JS. Then, you start writing your script node, specifying the script type as text/jsx. After specifying the type, you can start writing your React JS code snippet. It should be mentioned, that React uses ‘mounting’ of the elements, so your parent container should be div with the id ‘mount-point’.
Now, let’s write your first React JS example of code that’s actually rendered in the browser. Namely, it’ll be your first component, as the building blocks in React JS are called components. Use ‘React.render();’ to specify the text that’ll be rendered in the browser window:
Have you already grasped what you’ll see in the browser window? You’re right, the ‘Hello’ message that you entered in the code snippet.
Now, let’s say you want to make your greeting message an h1 heading, then the React JS example code snippet will look the following way:
And that’s actually it for the first time. Rendering a string of text is the simplest thing to do with React and now you know how to code it.