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

Labels:

Comments

Post a Comment

Popular posts from this blog

Basic concepts on NodeJs

Usecases of NodeJS. Walmart and ebay. Node is not the best platform for CPU intensive heavy computational applications. But it is ideal for building fast and scalable network applications.  NodeJS is capable of handling a huge number of simultaneous connections with high throughput. For each connection NodeJS does not spawn new Thread causing max out of memory instead handle all in single thread using non-blocking I/O model. Using this architecture NodeJS has achieved over 1 Million concurrent connections. Bubbling errors up to NodeJS core event loop will cause crashing the entire program. Netflix and Uber. NodeJs is best for, I/O bound applications. Data streaming applications. Data intensive real-time applications. JSON APIs based applications. Single page applications. Modules in NodeJS. In order  a design to be reliable and maintainable should avoid defining variables and functions in the global scope. Instead we can use modular...
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

Callbacks,Promises,Async Await and Closure in JavaScript.

This weeks blog will be including about callbacks and issues of it,promises which was used to overcome the issues of callbacks and closure in JavaScript. Callbacks, promises and async await All theses ways are used to deal with asynchronous data. By default, JavaScript programs run using a single thread. Though there are ways to create new threads, JavaScript is considered as single threaded language. JavaScript does not wait for I/O operations to get completed, instead it continues the execution of the program. This is called as non-blocking I/O. So that JavaScript is an asynchronous programming language because of this NIO nature. Callbacks, Promises and Async Await. As an example when a request is made to a server it will take couple of seconds to response with the relevant data, therefore you do not want to stall your program till the data is returned. You must keep on going or doing something where callbacks come in. Extra facts. until es6 => callbacks were used es...
Post a Comment
Read more