Showing posts with label Code Funz. Show all posts
Showing posts with label Code Funz. Show all posts

Monday, 21 May 2018

IDE for React JS


IDE for React JS

- IDE means integrated development environment. It is a software suite that consolidates the basic tools developers need to write and test software. 

- An IDE normally consists of a source code editor, build automation tools, and a debugger. Most modern IDEs have intelligent code completion.

- Most modern IDE's have intelligent code compilation.

Few IDE's for React JS

1. Atom
It is a hackable, free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in Node.js, and embedded Git Control, developed by GitHub.

2. Visual Studio Code
- It is a source code editor developed by Microsoft for Windows, Linux and OS X.
- It includes support for debugging, embedded Git control, syntax highlighting, snippets, intelligent code completion and code refactoring. 
- It is customizable so users can change the editor's theme, keyboard shortcuts, and preferences.
- It is free and open-source.

3. WebStorm
- It is a powerful IDE for modern JavaScript development perfectly equipped for complex client-side development and server-side development with Node.js. WebStorm is built on top of the open-source IntelliJ Platform. 
- Its features include Intelligent Coding Assistance
Support for Latest Technologies, Version Control System, Seamless Tool Integration, Debugging, Tracing and Testing, Built in Terminal.  
- Its trial version is available for 30 days and later we need to obtain and register a license.

For my React application I am using Visual Studio Code because of its features and open-source benefit. 


# Visual Studio Code  Installation

1. Visual Studio Code Download Link  : https://code.visualstudio.com/download


2. Complete Code Installation
3. Right click and open the react project directory which we have previously created through Visual Studio Code by selecting Open with Code


Wednesday, 31 January 2018

React Introduction - What, Why, Who

React Introduction - What, Why, Who

What is react ?

ReactJS is an open source JavaScript library Developed by Jordan Walke, a software engineer working at Facebook


Why React?

1) It makes easier developing a large Single Page Application (SPA) because it allows a developer to break down the complex UI into simpler components. We can reuse components as needed and compose bigger components from smaller ones.


2) React’s reconciliation algorithm – It implements  in Virtual DOM that makes the application fast. Virtual DOM allows ReactJS to know when exactly to re-render because it can detect when the data has changed.

Note - DOM (Document Object Model) is an object that is created by the browser each time a web page is loaded which can dynamically add or remove the data at the back end.

3) One-Way Data Binding - ReactJS follows unidirectional data flow or one way data binding. Which means the data flows in a single direction because of this application’s state is contained in specific stores. As a result, rest of the components remains loosely coupled and application is more flexible leading to increased efficiency.

4) React follow the principle of immutable data. It means we create the copies of object and replace them instead of modifying the original.

5) Server-Side Rendering(SSR): It you to pre-render the initial state of our react components at the server side only. By this the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page instead of React downloading the JavaScript

Who uses React ?

Instagram web site and Facebook newsfeed section is developed with react and it is used by other companies such as PayPal, Uber, Apple and Airbnb.



Chapter : 1 - First code in Node JS Previously I have written a blog about Getting Started with Node JS and its installation. Now lets s...