Diary of a Developer: Sublime-React

Friday, October 7, 2016

ReactJS

What is ReactJS?

Following is the answer that I found when searched the above question on Google:

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time."

Links to read more about ReactJS:

https://www.tutorialspoint.com/reactjs/

https://www.codecademy.com

https://egghead.io/courses/getting-started-with-redux

https://css-tricks.com/learning-react-router/

How to access ReactJS libraries?

Accessing ReactJS library from cdn in the html file is one way. (Refer: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)

<!DOCTYPE html>
<html> 
<head>
<title>Creating React Component with React.createClass</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>

<body>
 <div id="app"></div>
 <script type="text/babel">
 var destination = document.getElementById("app");

 var App = React.createClass({
   render: function() {
     return (
       <div>
         <h1>Welcome World!!</h1>
       </div>
     )
   }
 });

 ReactDOM.render(
   <div>
     <App/>
   </div>, 
   destination
 ); 
 </script>
</body>

</html>

Accessing ReactJS related modules from npm and bundle them and provide them to the html file is another way. (Refer: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm)

How to create ReactJS components?

There are two ways to create the ReactJS components.

Using the traditional way: React.createClass
Using the ES6 way: extends React.Component

Setting up Sublime-Text for React JSX development:

http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/