Skip to content

Instantly share code, notes, and snippets.

@anushka-beri
Last active November 18, 2021 07:27
Show Gist options
  • Save anushka-beri/62e3dbe538742bf1e6690e84d79fe5b5 to your computer and use it in GitHub Desktop.
Save anushka-beri/62e3dbe538742bf1e6690e84d79fe5b5 to your computer and use it in GitHub Desktop.
Summary of React JS lifecycles and state management.

What is a SPA (single-page-application) ?

Read Here. Just the first 3 points are enough.

What is ReactJS ?

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web apps. React also allows us to create reusable UI components. React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

Why do we use it?

  1. Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
  2. Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.
  3. Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
  4. Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
  5. Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
  6. It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
  7. Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

What is a state ?

Read this almost perfect medium article

Lifecycle Methods

Click here to view the diagram

What is redux and why we use it ?

Redux is used mostly for application state management. To summarize it, Redux maintains the state of an entire application in a single immutable state tree (object), which can’t be changed directly. When something changes, a new object is created (using actions and reducers). Avoid prop drilling. Read about actions, store and reducers

Redux Tutorial

You can find more but this one's the shortest and simplest

For a reading.

  1. Client-side and server-side
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment