React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components.
Steps to create Hello World page
1) Create new .txt file and save as .html on your computer.
2) Add react.js, react-dom.js and browser.min.js links from CDN library to HTML header.
3) Add div tag with id="content" in body as a parent container to display custom text.
4) Add script type="text/babel" tag and start writing react code inside it.
type="text/babel" helps browser to render JSX inside script. JSX is a Javascript XML syntax transform. This lets you write HTML-ish tags in your Javascript.
5) Use ReactDOM's Render method. Our first argument is the component we want to render (i.e. h1), and the second is the DOM node it should mount to (i.e. div id="content").
6) We are ready. Open your HTML file in latest browser.
Example 1:
Ideal way is to create custom component classes with createClass method and render this component in your document. Lets create one below :
Example 2:
Both examples will produce same results, only we are using custom component in second example.
Hope you find this article helpful.
Comments