Hi all, from this material we are going to create a sample react app from scratch, which will include the concepts from setting up a proper project with TDD and BDD approach along with linting.

New to React? Please check https://raghavendrank.medium.com/react-is-simple-32bfb4f9233 to get to know the basics.

In this Part-1 we are going to use the below libraries and tools to set up our project.

  1. React
  2. For E2E testing will use Cypress, Jest, Enzyme, Sinon, and Istanbul for code coverage
  3. We will use Typescript to follow OOPS concepts like enums, interface, types, etc.,
  4. Storybook to document components for reuse and…


Continued part of “React Is Simple”. In this section, we will see some of the life cycle methods and hooks.

1. React Lifecycle

What? Life cycle methods are the functions that will execute based on the phase of the component.

1. render(): To display elements on the screen.
2. constructor(props): Typically called before mounting and used for initializing “state”, binding an “event handler” and creating a “ref” to an instance.
3. componentDidMount(): is invoked immediately after a component is mounted. Best place to make API calls.
4. componentDidUpdate(): is invoked immediately after updating occurs. Best place to update data UI…


Continued part of “React Is Simple”

Component:

What is a Component? Components are nothing but a part or element of a larger application. Which may have its own logic in it.

Why do We Need to divide them as components? By dividing the complex page into multiple components allows us to manage them easily, and re-use them. By following this methodology we are going to achieve one of the core concepts called “Composition” in React.

How does it work? The component can be either “stateful” or “stateless.”

When to use what type of component?

  • Whenever the frequently data changes, and…


Before learning any library or technology, the first step we must ask ourselves 5W and 1H. This makes us use the library wisely. So in this article, we will see 5W and 1H about React.

What? : React is a JavaScript library for building user interfaces efficient manner.

Why? : we need to use React compared with other UI libraries or frameworks.

1. Composition: This follows DRY(Don't Repeat Yourself), dividing big pages into multiple chunks of components and re-using them.

2. Code Splitting: for further maintenance

3. Performance: Ensures faster rendering by using virtual-dom and diff algorithm.

4. Size: Less…


Hi all, it's a continued part of full-stack development, here we will build the wireframes using Figma and write the test cases using the Jest, Enzyme, and Cypress. We will do the i18n configuration and redux configurations.

And we are going to build a “Blog” application to use all our code setup. Where the user can upload an article, edit, view, and delete the articles.

Usecase:

* User can Sign In/ Sign Up
* User can see the total article counts which he/she posted
* User can edit his profile
* User can add, edit, view, and delete articles
*…


Hi all, its a continue part of full stack development, here we are going to dockerize the react application which we built, and also creating the containers for nodeJS backend API and mongoDB database.

We developers will be working with different projects with various versions, when switching between projects we can get conflicts/clashes between the versions, so for this we can choose NVM to resolve this issue (Applicable for only NodeJS!).

Short Note on NVM:

Why NVM? Node Version Manager — it helps you manage and switch between different Node versions with ease.

  1. NVM setup.
  2. To check version of NVM…

Raghavendra Nk

Full stack developer, interested in building web apps and mobile apps. And sharing the knowledge.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store