My first approach to React

React is a innovative and modern web framework.
For me, these are the reasons for using React:

The component

React.js does not use Sun Shadow polymer as it gives you the opportunity to create your own components that you can later reuse, combine and nest together. React right now is one of the frameworks that are having more success, because components are easy to define and manipulate.

Efficiency and virtual DOM

The React approach to handle rendering is:

1) Render the DOM at server side, the virtual DOM.

2) Compare virtual DOM to the browser/actual DOM and figure out differences.

3) Update only the selective/changed nodes of browser DOM instead of re-rendering the entire DOM.

This allows React to have impressive performance.

Chrome React.js Tool

It makes application debugging much easier. After installing the extension, you will have a direct look into the DOM virtual just as if you were browsing in a DOM regular panel elements.

Easy to write javascript

React.js is really special. For ease of use the React team has created a special syntax “JSX” which mixes html and js in the same code snippet. This is not a requirement, but it helps us developers and it makes writing component very easy.

SEO Friendly

Many of JavaScript frameworks are not exactly search engine friendly.
React.js stands out from the crowd, because you can run React.js on the server, and the Sun Virtual will be created and returned to the browser as a normal web page.

React Project

The best project is Instagram created by React developers after the two companies (Facebook and Instagram), have joined forces.

Whatsapp Web

Netflix

And now, this is what it looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Your First Component</title>
    <link rel="stylesheet" href="styles.css"/>
    <!-- Import React library -->
    <script src="https://fb.me/react-0.13.3.js"></script>
    <!-- <script src="vendor/react/react.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="my-component"></div>

    <script type="text/babel">
      //Create Class for React Component
      var MyComponent = React.createClass ({
        render : function () {
          return (
            <div className="list">
              <h2>List</h2>
              <ul className="wrap-list" >
                <li className="el" > Link 1 </li>
                <li className="el" > Link 2 </li>
                <li className="el" > Link 3 </li>
              </ul>
            </div>
          );
        }
      });

      React.render( <MyComponent/>, document.getElementById('my-component') );
    </script>

  </body>
</html>

Best regards

Leave a Reply

wpDiscuz