DEV Community: RohitrajDeshmukh

Most Essential Concepts You Should Know about React

RohitrajDeshmukh — Tue, 23 Nov 2021 13:25:54 +0000

What is JSX?

JSX stands for JavaScriptXML. It is a javaScript Extension syntax allows us to write HTML and javaScript together in React. It comes with all the feature and full power of javaScript. JSX is faster than regular javaScript.

What is Class Component And Funtional Component?

Class Component:-
A Class component requires you to extends from React.Components and create a Render function that returns a React Element. A class component is called as statefull class component. Whenever the state of the components changes the render method will call.
Functional Component:-
A Functional component accepts props as an argument and returns a React Element. There is no render method used in funtional component. A function component is called as stateless functional component. It render the user interface based on props.

What is Props?

Props Stands for properties. Props are nothing but a variable or object. Basically props are used to pass some data from one component to another component in react. The data flow between components is from paraent to child only.

what is State?

State is a kind of object which allow components to manage their own data in react. It control the behaviour of the component. The component re-render when the state of the object chnages.

What is React LifeCycle?

React LifeCycle has three main phase: Mounting, Updating, and Unmounting.

Mounting:-
Mounting means putting elements into the DOM.
React has four methods that gets called in the given order, when we mount a component:-
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
Updating:-
A component is updated whenever there is a change in the component's state or props.
React has five methods that gets called in the given order when a component is updated:-
getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Unmounting:-
when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one ethod that gets called when a component is unmounted:-
componentWillUnmount()

What is hooks?

Hooks are a new feature to React. It allows you to use state and other features without a class. It works with functional components. Hooks are nothing but a functions which hook into React state and lifecycle features from functional components.

React Components

RohitrajDeshmukh — Tue, 23 Nov 2021 06:00:42 +0000

What is component?

Components are basic building blocks of Ract App. A component is a class or a function that accepts inputs and returns react element that describes how the user interface should look. Components are independent and re-usable.

There are main two types of Components

Class Component
Functional Component

Class Component

A Class component requires you to extends from React.Components and create a Render function that returns a React Element. A class component is called as statefull class component. Whenever the state of the components changes the render method will call.

For Example

Create Class Component name as Demo

class Demo extends React.Component 
{
  render() 
  {
    return <h1>Hello, I am Rohitraj!</h1>;
  }
}

Functional Component

A Functional component accepts props as an argument and returns a React Element. There is no render method used in funtional component. A function component is called as stateless functional component. It render the user interface based on props.

For Example

Create Funtional Component name as Demo

function Demo() 
{
  return <h1>Hello, I am Rohitraj!</h1>;
}

Rendering a Component

Rendering a component means a component with render prop which takes a funtion that returns a React Element and call it.
Given below is the example where ReactDOM.render renders your component i.e. to the DOM in the root element.

Example

ReactDOM.render(<Demo />, document.getElementById('root'));

Components in Component

we can use components inside other component. Means we can create multiple funtions in one component and return one function into another funtion.

Example

function Demo() {
  return <h1>I am Rohitraj!</h1>;
}

function Sample() {
  return (
    <>
      <h1>Who are you?</h1>
      <Demo />
    </>
  );
}

ReactDOM.render(<Sample />, document.getElementById('root'));

Components in Files

We can create a new file with .js extension and inside that we create a funtion and returns some HTML element and we export this function. Given below you can see the example:-
Example
This is the new file we called it as Demo.js

function Demo() {
  return <h1>Hello, I am Rohitraj!</h1>;
}

export default Car;

This is what we called a Demo Component. Now you have to import this file in your application. So for that we use the import statment then the function_name and the path where the file is located. Given below you can see this:-

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo.js';

ReactDOM.render(<Demo />, document.getElementById('root'));

UI vs UX

RohitrajDeshmukh — Tue, 19 Oct 2021 14:31:55 +0000

                   UI and UX are not the same thing.

What is UI Design?

User interface design is focused on the look and layout. how each element of the product will look, including buttons, placeholders, text, images, checkboxes, and any visual interface elements people interact with.
UI focuses on a products aspects like color palettes, button styles, animation, graphics, typography, diagrams, widgets, and many other elements to make the websites, applications, plugins, themes, etc.
UI designers keep themselves updated on graphic patterns and design trends that evolve as customers tastes and behavior changes.
UI designers create one version that scales content and elements to match any screen size.

Main focus Of UI Designer

Graphic design: icons, shapes, and images to give meaning to the users actions.
Colors of the interface, illustrations, buttons, and text
Typography: fonts and styles such as bold, underlined, and italics.
Page layout: spaces between blocks, number of elements on the graphic interface, etc.

What is UX Design?

User experience is the overall experience a user has with a company's products or services. Good and bad user experience design is determined by how easy or difficult it is to interact with each element or aspect of a product or service.
User experience is the experience we have when we surf on a digital interface.
UX design determines how the interface works and how people interact with it.
UX designers conduct market research and analysis to educate themselves about customer’s needs and desires before designing the functionality of a product.

Main focus of UX Designer

Strategy.
Understanding the users needs.
Creation of prototypes, scenarios, etc.
Easy to use, user-friendly.

UI vs UX

         UI                       vs                   UX

1.UI stands for User                    1.Ux stands for User 
  Interface.                             Experience.

2.It refers to the Visual               2.Its about the feelings 
  elements that allow users               and emotions when 
  to interact with product.             interacting with product.

3.It focuses on the look                3.It focuses on overall    
  and feel.                               User friendliness.

4.The goal is to make product           4.The goal is to delight
  more usable and optimized               user with a product 
  for different screen size.              that is easy to use.

5.Mockups, Graphics, Layouts            5.Prototypes, Research, 
  etc.                                    Wireframes.

6.Visual strengths are task             6.Visual strengths are 
tasks flow and scenarios.                 colors and typography.

UX vs UI tools you should use.

Adobe XD: An all-in-one rapid prototyping tool for creating wireframes, interactive prototypes, and facilitating the design of web and mobile applications.
Figma: Collaborative prototyping tool where you can work online, remotely, live, and with several people.
Zeplin: an interface simplifying communication between teams and making it easier to find your way around by automatically generating all the colors, fonts, sizes, etc.
Marvel: A solution that helps quickly create animated models in just a few clicks. The Marvel application is available on Android and iOS to test live models in mobile version.
Maze: A very efficient tool for performing questionnaires and user tests remotely to generate detailed reports more quickly and easily.

SQL vs NO-SQL

RohitrajDeshmukh — Tue, 19 Oct 2021 06:12:16 +0000

What is SQL?

SQL Stands for Structured Query Language is a standardized programming language that's used to manage relational databases and perform various operations on the data in them.
SQL is used to communicate with a database.
You can easily create and manipulate the database, access and modify the table rows and columns, etc.
Examples of SQL MySQL, Oracle, SQL Server, PostGre, etc.

Advantages of SQL:

High-Speed Query Processing
Standardized Language
Portability
More than one Data View

What is NO-SQL?

NoSQL databases are non-tabular databases and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. They provide flexible schemas and scale easily with large amounts of data and high user loads.
Examples of NoSQL are MongoDB, DynamoDB, Cassandra, etc.

Advantages Of NO-SQL:

Flexible schemas
Horizontal scaling
Fast queries due to the data model
Ease of use for developers

SQL vs NO-SQL



       SQL                     vs                NO-SQL

1.SQL is a relational                1.No-SQL is a non-relational
database management system.            or distributed database 
                                         management system.

2.The query language used            2.The query language used in 
in this database system is            the No-SQL database systems
a structured query language.           is a non-declarative query 
                                         language.

3.The schema of SQL databases        3.The schema of No-SQL Data-
 is predefined, fixed,                 base is a dynamic schema
 and static.                            for unstructured data.

4.It follows the ACID model.         4.It follows the BASE model.

5.These databases are vertically     5.These databases are 
 scalable.                              horizontally scalable.

6.The database type of SQL           6.The database type of No-
is in the form of tables, i.e.          SQL is in the form of 
in the form of rows and columns.        document key-value, and 
                                              graphs.

7.Complex queries are easily         7.NoSQL databases cannot 
 managed in the SQL database.           handle complex queries.

8.All SQL databases require          8.Many No-SQL databases do 
object-relational mapping.              not require object- 
                                          relational mapping.

9.This database is not the           9.No-SQL database is a 
 best choice for storing               perfect option for storing 
 hierarchical data.                      hierarchical data.

10.SQLite, Ms-SQL, Oracle,          10.Redis, MongoDB, Hbase, 
PostgreSQL, and MySQL are              BigTable, CouchDB, and 
examples of SQL database systems.      Cassandra are examples of 
                                        NoSQL database systems.

GitLab

RohitrajDeshmukh — Sat, 09 Oct 2021 20:04:08 +0000

About

GitLab is The DevOps platform that empowers organizations to maximize the overall return on software development by delivering software faster and efficiently, while strengthening security and compliance. With GitLab, every team in your organization can collaboratively plan, build, secure, and deploy software to drive business outcomes faster with complete transparency, consistency and traceability.

GitLab is an open core company which develops software for the software development lifecycle with 30 million estimated registered users and more than 1 million active license users, and has an active community of more than 2,500 contributors. GitLab openly shares more information than most companies and is public by default, meaning our projects, strategy, direction and metrics are discussed openly and can be found within our website. Our values are Collaboration, Results, Efficiency, Diversity, Inclusion & Belonging , Iteration, and Transparency (CREDIT) and these form our culture.

GitLab's team handbook, if printed would be over 8,000 pages of text, is the central repository for how we operate and is a foundational piece to the GitLab values.

It is GitLab's mission to make it so that everyone can contribute.

When everyone can contribute, users become contributors and we greatly increase the rate of innovation.

Key Features

Most of our internal procedures can be found in a publicly viewable 5000+ page handbook and our objectives are documented in our OKRs.
Our mission is to change all creative work from read-only to read-write so that everyone can contribute. This is part of our overall strategy.
Our values are Collaboration, Results, Efficiency, Diversity, Inclusion & Belonging , Iteration, and Transparency (CREDIT) and these form an important part of our culture.
Our Tanuki (Japanese for raccoon dog) logo symbolizes our values with a smart animal that works in a group to achieve a common goal, you can download it on our press page.

How DevOps is better with GitLab

GitLab is The DevOps Platform that empowers organizations to maximize the overall return on software development by delivering software faster and efficiently, while strengthening security and compliance. With GitLab, every team in your organization can collaboratively plan, build, secure, and deploy software to drive business outcomes faster with complete transparency, consistency and traceability.

Manage

Gain visibility and insight into how your business is performing.
GitLab helps teams manage and optimize their software delivery lifecycle with metrics and value stream insight in order to streamline and increase their delivery velocity. Learn more about how GitLab helps to manage your end to end value stream.

Plan

Regardless of your process, GitLab provides powerful planning tools to keep everyone synchronized.
GitLab enables portfolio planning and management through epics, groups (programs) and milestones to organize and track progress. Regardless of your methodology from Waterfall to DevOps, GitLab’s simple and flexible approach to planning meets the needs of small teams to large enterprises. GitLab helps teams organize, plan, align and track project work to ensure teams are working on the right things at the right time and maintain end to end visibility and traceability of issues throughout the delivery lifecycle from idea to production.

Create

Create, view, and manage code and project data through powerful branching tools.
GitLab helps teams design, develop and securely manage code and project data from a single distributed version control system to enable rapid iteration and delivery of business value. GitLab repositories provide a scalable, single source of truth for collaborating on projects and code which enables teams to be productive without disrupting their workflows.

Verify

Keep strict quality standards for production code with automatic testing and reporting.
GitLab helps delivery teams fully embrace continuous integration to automate the builds, integration and verification of their code. GitLab’s industry leading CI capabilities enables automated testing, Static Analysis Security Testing, Dynamic Analysis Security testing and code quality analysis to provide fast feedback to developers and testers about the quality of their code. With pipelines that enable concurrent testing and parallel execution, teams quickly get insight about every commit, allowing them to deliver higher quality code faster.

Package

Create a consistent and dependable software supply chain with built-in package management.
GitLab enables teams to package their applications and dependencies, manage containers, and build artifacts with ease. The private, secure, container and package registry are built-in and preconfigured out-of-the box to work seamlessly with GitLab source code management and CI/CD pipelines. Ensure DevOps acceleration and a faster time to market with automated software pipelines that flow freely without interruption.

Secure

Security capabilities, integrated into your development lifecycle.
GitLab provides Static Application Security Testing (SAST), Dynamic Application Security Testing (DAST), Container Scanning, and Dependency Scanning to help you deliver secure applications along with license compliance.

Release

GitLab's integrated CD solution allows you to ship code with zero-touch, be it on one or one thousand servers.
GitLab helps automate the release and delivery of applications, shortening the delivery lifecycle, streamlining manual processes, and accelerating team velocity. With zero-touch Continuous Delivery (CD) built right into the pipeline, deployments can be automated to multiple environments like staging and production, and the system just knows what to do without being told - even for more advanced patterns like canary deployments. With feature flags, built-in auditing/traceability, on-demand environments, and GitLab pages for static content delivery, you'll be able to deliver faster and with more confidence than ever before.

Configure

Configure your applications and infrastructure.
GitLab helps teams to configure and manage their application environments. Strong integration to Kubernetes reduces the effort needed to define and configure the infrastructure required to support your application. Protect access to key infrastructure configuration details such as passwords and login information by using ‘secret variables’ to limit access to only authorized users and processes.

Monitor

Help reduce the severity and frequency of incidents.
Get feedback and the tools to help you reduce the severity and frequency of incidents so that you can release software frequently with confidence.

Protect

Protect your apps and infrastructure from security intrusions.
GitLab provides cloud native protections, including unified policy management, container scanning, and container network and host security.

React Navigation

RohitrajDeshmukh — Sat, 09 Oct 2021 19:37:26 +0000

In a web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn't have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.

React Navigation's native stack navigator provides a way for your app to transition between screens and manage navigation history. If your app uses only one stack navigator then it is conceptually similar to how a web browser handles navigation state - your app pushes and pops items from the navigation stack as users interact with it, and this results in the user seeing different screens. A key difference between how this works in a web browser and in React Navigation is that React Navigation's native stack navigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.
Let's start by demonstrating the most common navigator,
createNativeStackNavigator

Installing the native stack navigator library

The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library. To use the native stack navigator, we need to install
@react-navigation/native-stack

npm install @react-navigation/native-stack

Creating a native stack navigator

createNativeStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

NavigationContainer is a component which manages our navigation tree and contains the navigation state. This component must wrap all navigators structure. Usually, we'd render this component at the root of our app, which is usually the component exported from App.js.


import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

If you run this code, you will see a screen with an empty navigation bar and a grey content area containing your HomeScreen component (shown above). The styles you see for the navigation bar and the content area are the default configuration for a stack navigator, we'll learn how to configure those later.

Configuring the navigator

All of the route configuration is specified as props to our navigator. We haven't passed any props to our navigator, so it just uses the default configuration.

Let's add a second screen to our native stack navigator and configure the Home screen to render first:

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Now our stack has two routes, a Home route and a Details route. A route can be specified by using the Screen component. The Screen component accepts a name prop which corresponds to the name of the route we will use to navigate, and a component prop which corresponds to the component it'll render.

Here, the Home route corresponds to the HomeScreen component, and the Details route corresponds to the DetailsScreen component. The initial route for the stack is the Home route. Try changing it to Details and reload the app (React Native's Fast Refresh won't update changes from initialRouteName, as you might expect), notice that you will now see the Details screen. Then change it back to Home and reload once more.

Specifying options

Each screen in the navigator can specify some options for the navigator, such as the title to render in the header. These options can be passed in the options prop for each screen component:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ title: 'Overview' }}
/>

Sometimes we will want to specify the same options for all of the screens in the navigator. For that, we can pass a screenOptions prop to the navigator.

Passing additional props

Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches:

1.Use React context and wrap the navigator with a context provider to pass data to the screens (recommended).

2.Use a render callback for the screen instead of specifying a component prop:

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

Conclusion

React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.
Stack.Navigator is a component that takes route configuration as its children with additional props for configuration and renders our content.
Each Stack.Screen component takes a name prop which refers to the name of the route and component prop which specifies the component to render for the route. These are the 2 required props.
To specify what the initial route in a stack is, provide an initialRouteName as the prop for the navigator.
To specify screen-specific options, we can pass an options prop to Stack.Screen, and for common options, we can pass screenOptions to Stack.Navigator

React Sass

RohitrajDeshmukh — Thu, 30 Sep 2021 05:59:11 +0000

What is Sass

Sass is a CSS pre-processor.

Sass files are executed on the server and sends CSS to the browser.

Can I use Sass?

If you use the create-react-app in your project, you can easily install and use Sass in your React projects.

Install Sass by running this command in your terminal:

$npm install node-sass

Now you are ready to include Sass files in your project!

Create a Sass file

Create a Sass file the same way as you create CSS files, but Sass files have the file extension .scss

In Sass files you can use variables and other Sass functions:

mysass.scss:

$myColor: red;

h1 {
  color: $myColor;
}

Import the Sass file the same way as you imported a CSS file:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './mysass.scss';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

Output:

here we will get this output as the text "hello Style!" is in Red color.

React LifeCycle

RohitrajDeshmukh — Thu, 30 Sep 2021 05:15:02 +0000

Lifecycle of Components

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: Mounting, Updating, and Unmounting.

Mounting

Mounting means putting elements into the DOM.

React has four built-in methods that gets called, in this order, when mounting a component:

constructor()
getDerivedStateFromProps()
render()
componentDidMount()

The render() method is required and will always be called, the others are optional and will be called if you define them.

Updating

The next phase in the lifecycle is when a component is updated.

A component is updated whenever there is a change in the component's state or props.

React has five built-in methods that gets called, in this order, when a component is updated:

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate() The render() method is required and will always be called, the others are optional and will be called if you define them.

Unmounting

The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount()