Skip to main content

ReactJS - why, what and what not


ReactJs is a JavaScript library for building user interfaces. React focuses only on V (view) layer of MVC applications. Here are some features specific to react:
  1. JSX - 
    • A combination of both JavaScript and HTML used to render UI elements. 
    • Even though it's usage is not mandatory within react apps, it is recommended to use this as React considers building and rendering UI components an integral part of JS as we have event handlers, listeners e.t.c..
    • JSX is just react friendly way of defining your HTML within JavaScript code as under the hood it uses regular JavaScript functions to render.
    • Here is an example comparing JSX code and JavaScript code to create the same element:
      • JSX:
      • const heading = <h1 className="main-titles">Hello, React</h1>
      • Without JSX:
      • const heading = React.createElement(
               'h1', 
               { className: 'main-titles' }, 
               'Hello, React'
     )
  2. Components:
    • Components are one of the finest features and building blocks of react. 
    • These are used to build manageable, maintainable and re-usable pieces of code.
    • Components let you split the UI code into multiple pieces and let you think about each piece in isolation this makes it really powerful library for large-scale applications.
  3. Unidirectional data flow:
    • React follows one-way data flow policy.
    • This means while designing an app you should always nest your child components within your parent components, these parent components will hold the data in an immutable variable called "state". 
    • The state is then passed from parent component to child components.
  4. Virtual DOM:
    • Here's the official definition from documentation: The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
    • Virtual DOM eliminates the pain of manually targeting and updating the DOM elements to update UI, which makes it more developer friendly so whenever you made an update to component state React itself will take care of updating the DOM to match the new state.
    • With Virtual DOM performance of the app gets improved as you're only updating the components whose state has been changed.
Resources:

Happy Coding ✌
Labels:

Comments

Post a Comment

Popular posts from this blog

Spring Boot - RestTemplate PATCH request fix

  In Spring Boot, you make a simple http request as below: 1. Define RestTemplate bean @Bean public RestTemplate restTemplate () { return new RestTemplate (); } 2. Autowire RestTemplate wherever you need to make Http calls @Autowire private RestTemplate restTemplate ; 3. Use auto-wired RestTemplate to make the Http call restTemplate . exchange ( "http://localhost:8080/users" , HttpMethod . POST , httpEntity , String . class ); Above setup works fine for all Http calls except PATCH. The following exception occurs if you try to make a PATCH request as above Exception: I / O error on PATCH request for \ "http://localhost:8080/users\" : Invalid HTTP method: PATCH ; nested exception is java . net . ProtocolException : Invalid HTTP method: PATCH Cause: Above exception happens because of the HttpURLConnection used by default in Spring Boot RestTemplate which is provided by the standard JDK HTTP library. More on this at this  bug Fix: This can b...
Post a Comment
Read more

RADUS#4 - Caching the response in REST API's

  Caching in spring boot app: Caching can be used to provide a performance boost to your application users by avoiding the business logic processing involved again and again, load on your DB, requests to external systems if the users request data that's not changed frequently Different types of caching: We'll be focusing more on in-memory caching in this post i listed other options available to have an idea. In-memory caching You'll have a key-value data stores that stores the response of the request after it is served for the first time There are multiple systems like Redis, Memcached that do this distributed caching very well By default Spring provides concurrent hashmap as default cache, but you can override CacheManager to register external cache providers. Database caching Web server caching Dependencies needed: Maven < dependency > < groupId > org . springframework . boot </ groupId > < artifactId > spring - boot - starter - cache ...
Post a Comment
Read more

Settings.xml for Maven, JFrog

For development and deployment of applications we always use an artifactory in real-time world to host artifacts needed for your build and also as a target to deploy artifacts generated in the build process. For Maven, to communicate with artifactory we need a settings.xml file which is usually located at "/User/rake/.m2/settings.xml" this file consists of how to authenticate to the artifactory servers and authorizations to read/ write to different locations like release, snapshots e.t.c... Settings.xml can be generated using the artifactory you're using which in my case is JFrog , but here's a sample settings file for your reference incase you're feeling lazy☺ <?xml version="1.0" encoding="UTF-8"?> <settings xsi:schemaLocation= "http://maven.apache.org/SETTINGS/1.1.0 http://maven.apache.org/xsd/settings-1.1.0.xsd" xmlns= "http://maven.apache.org/SETTINGS/1.1.0" xmlns:xsi= "http://www.w3.org/2001/XM...
Post a Comment
Read more