Skip to main content

Basic concepts on ReactJS

Props and State.

  • Props and state are the two basic ways to handle data in ReactJS. 
  • Props are used to pass data and behaviors from container components to child components.
  • Props are read only.
  • State is used to keep data which can be updated.
  • State is read write enabled.

State.

State is basically available through  'this.state', which is by default is null. Whenever the state changes on a component the component will  automatically re-render and update DOM (Document Object Model) if there are any changes else the DOM will not get touched at all.

Using state.

To change the state setState() method can be used. Since setTimeOut() method is used in the bellow example after a second (1000ms)  'Will'  will be changed to  'Bob'. 

Changing the state using  'setState()'

If the component has an internal value that does not effect the application state is appropriate. A side from that props can be used.

Props.

Props are injected to every other component.

Babel.

  • Most popular JavaScript transpiler.
  • Convert JavaScript es6 features and beyond to latest compatible version.
  • Babel polyfills are available to support new global objects. It uses core-js polyfills.
  • So far Babel compatibility with new features has been one of the best.
  • Debugging enabled via source maps.
  • In built code optimization.
  • Supports JSX (XML like syntax extension) and FLOW (Static type checker).

Webpack.

  • Most famous module bundler.
  • Support for build system as well as module bundling.
  • Split code into multiple files.
  • Supports CommonJS and AMD.
  • Extend using loaders (transpiling, css transformation, image optimization).
  • Supports production optimizations (minification, uglification).
  • Easy configuration with 4 steps - entry -> loaders -> plugins -> output.

Labels:

Comments

Post a Comment

Popular posts from this blog

Spring MVC Overview

Spring MVC is a java framework that is used to build web applications. It uses  Model-View-Control design pattern and implements basic features of core spring framework such as Inversion of Control, Dependency Injection How Spring MVC works. When the client sends a request the request is captured by the Dispatcher Servlet which act as the front Controller of the system. With the help of helpers( Handler Mappings, Controller, View Resolver, View) front controller will responds the client with HTML and data. When the Dispatcher Servlet gets the request from the client, the request is immediately sent to Handler Mappings. Handler Mapping will scan the URL and will respond to the Dispatcher Servlet with address of the class that can generate data for the web page which the end user has requested.  With the respond of the Handler Mapping Dispatcher Servlet will forward the request to the Controller, so that the data will be prepared and creates a java objec...
Post a Comment
Read more

RESTful API

Routers can be created according to REST principles such as get, post, put, delete etc..  GET  =>  get request to r etrieve data from database or data store(An array). POST  =>  post request to insert   data to database or data store(An array). PUT  =>  put request to update the data in database or data store(An array). DELETE  =>  delete request to delete data in database or data store(An array). Creation of routers. In this scenario I have created a schema call users using mongoose.  using mongoose the created users model is retrieved. GET request  using the keyword  " get"   the data can be retrieved.  retrieving all the users in the database. By giving a parameter in the url we can get information according to the given subject.  user is retrieved according to the _id. POST request  using the keyword  "pos t"   the...
Post a Comment
Read more

What is ExpressJS

Express is a very popular framework that is used in NodeJs. Express is build upon NodeJs and also it provides a lot of tools that makes node more easy to use by adding more functionalities. Most of the needed functionalities are handled by express which helps the users to only focus on the business logic and to easily setup routes and to render the things on screen in a fast, optimized and a secured manner. How to install ExpressJS? Express can be easily installed by the command  " npm i express"  . Installation of ExpressJs package.json file will be updated once the installation is successful. How to import ExpressJS? To import the installed express module we can use the command  " require("express") " . Accessing the imported express module. express can be accessed as given below using the given commands. Firstly a constant called app is created. And then using this give constant app ...
Post a Comment
Read more