Lilyan  Streich

Lilyan Streich

1603989600

6 Quick React Tips to Write A Better Code Pt.2

Learning new quick React tips is always good. A handful of tips can help you improve your code and results of your work. In this article, you will learn about another three quick React tips to write cleaner and more efficient code. You will learn about things such as pure components, conditional loading and propTypes and also two bonus tips. Take your React code to another level!

6 Quick React Tips to Write A Better Code Part 1.

Use pure components

In the previous part of React tips, we talked a lot about keeping our components small. With relation to that, we then discussed stateless, or functional, components. Let’s take this one step farther. Aside to classical, statefull Component, React also offer something called PureComponent. So, What is the difference between PureComponent and Component?

These two are very similar. The main difference is that the shouldComponentUpdate() method is not implemented in PureComponent. Instead, there is only comparison of the props and state of the PureComponent. This means that when component’s props or state doesn’t change, the component will not re-render.

This can be very useful in case in which you have an interface containing multiple small components inside one main component. Let’s say that all these small components are created via the classical Component API. Then, every time there is some change in the main component, that change will trigger re-rendering of all these small components as well.

On the hand, let’s say that you created your small components via PureComponent. In that case, change in the main component will not necessarily trigger re-rendering of all those smaller components. React will compare the props and state of these small components first. Only if props or state is different from the previous it will re-render them.

This can result in significant performance improvements. This is especially true if your UI contains a lot of smaller components that don’t need to be updated. When you use create these components via PureComponent API, as discussed, you will tell React to re-render these component only when there is a change in props or state of a specific component.

// Example of stateful component
// This will re-render when parent component changes
// Import React
import * as React from 'react'

export default class Article extends React.Component {
  handleClick = (e) => {}

  render() {
    return(
      <article>
        <h1 className="article__heading">{props.heading}</h1>

         Published on {props.published}

        <div className="article__slug">
          <p>{props.slug}</p>
        </div>

        <a className="article__link" onClick={this.handleClick}>Read more</a>
      </article>
    )
  }
}

// Example of stateless component
// This will re-render when parent component changes
import * as React from 'react'

export const Article = (props) => (
  <article>
    <h1 className="article__heading">{props.heading}</h1>

     Published on {props.published}

    <div className="article__slug">
      <p>{props.slug}</p>
    </div>

    <a className="article__link" onClick={props.handleClick}>Read more</a>
  </article>
)

// Example of pure component
// This will not re-render when parent component changes.
// It will re-render only if props or state of this component changes.
// Import React
import * as React from 'react'

export default class Article extends React.PureComponent {
  handleClick = (e) => {}

  render() {
    return(
      <article>
        <h1 className="article__heading">{props.heading}</h1>

         Published on {props.published}

        <div className="article__slug">
          <p>{props.slug}</p>
        </div>

        <a className="article__link" onClick={this.handleClick}>Read more</a>
      </article>
    )
  }
}

#react #javascript #reactjs #design development

What is GEEK

Buddha Community

6 Quick React Tips to Write A Better Code Pt.2
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Ray  Patel

Ray Patel

1619518440

top 30 Python Tips and Tricks for Beginners

Welcome to my Blog , In this article, you are going to learn the top 10 python tips and tricks.

1) swap two numbers.

2) Reversing a string in Python.

3) Create a single string from all the elements in list.

4) Chaining Of Comparison Operators.

5) Print The File Path Of Imported Modules.

6) Return Multiple Values From Functions.

7) Find The Most Frequent Value In A List.

8) Check The Memory Usage Of An Object.

#python #python hacks tricks #python learning tips #python programming tricks #python tips #python tips and tricks #python tips and tricks advanced #python tips and tricks for beginners #python tips tricks and techniques #python tutorial #tips and tricks in python #tips to learn python #top 30 python tips and tricks for beginners

Tyrique  Littel

Tyrique Littel

1604008800

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

  • J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

static analysis workflow

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

Lilyan  Streich

Lilyan Streich

1603989600

6 Quick React Tips to Write A Better Code Pt.2

Learning new quick React tips is always good. A handful of tips can help you improve your code and results of your work. In this article, you will learn about another three quick React tips to write cleaner and more efficient code. You will learn about things such as pure components, conditional loading and propTypes and also two bonus tips. Take your React code to another level!

6 Quick React Tips to Write A Better Code Part 1.

Use pure components

In the previous part of React tips, we talked a lot about keeping our components small. With relation to that, we then discussed stateless, or functional, components. Let’s take this one step farther. Aside to classical, statefull Component, React also offer something called PureComponent. So, What is the difference between PureComponent and Component?

These two are very similar. The main difference is that the shouldComponentUpdate() method is not implemented in PureComponent. Instead, there is only comparison of the props and state of the PureComponent. This means that when component’s props or state doesn’t change, the component will not re-render.

This can be very useful in case in which you have an interface containing multiple small components inside one main component. Let’s say that all these small components are created via the classical Component API. Then, every time there is some change in the main component, that change will trigger re-rendering of all these small components as well.

On the hand, let’s say that you created your small components via PureComponent. In that case, change in the main component will not necessarily trigger re-rendering of all those smaller components. React will compare the props and state of these small components first. Only if props or state is different from the previous it will re-render them.

This can result in significant performance improvements. This is especially true if your UI contains a lot of smaller components that don’t need to be updated. When you use create these components via PureComponent API, as discussed, you will tell React to re-render these component only when there is a change in props or state of a specific component.

// Example of stateful component
// This will re-render when parent component changes
// Import React
import * as React from 'react'

export default class Article extends React.Component {
  handleClick = (e) => {}

  render() {
    return(
      <article>
        <h1 className="article__heading">{props.heading}</h1>

         Published on {props.published}

        <div className="article__slug">
          <p>{props.slug}</p>
        </div>

        <a className="article__link" onClick={this.handleClick}>Read more</a>
      </article>
    )
  }
}

// Example of stateless component
// This will re-render when parent component changes
import * as React from 'react'

export const Article = (props) => (
  <article>
    <h1 className="article__heading">{props.heading}</h1>

     Published on {props.published}

    <div className="article__slug">
      <p>{props.slug}</p>
    </div>

    <a className="article__link" onClick={props.handleClick}>Read more</a>
  </article>
)

// Example of pure component
// This will not re-render when parent component changes.
// It will re-render only if props or state of this component changes.
// Import React
import * as React from 'react'

export default class Article extends React.PureComponent {
  handleClick = (e) => {}

  render() {
    return(
      <article>
        <h1 className="article__heading">{props.heading}</h1>

         Published on {props.published}

        <div className="article__slug">
          <p>{props.slug}</p>
        </div>

        <a className="article__link" onClick={this.handleClick}>Read more</a>
      </article>
    )
  }
}

#react #javascript #reactjs #design development

Lilyan  Streich

Lilyan Streich

1603985880

6 Quick React Tips to Write A Better Code Pt.1

Have you ever wanted to know some quick React tips to help you write a better code? You are on the right place. This two-part series will give you six of these React tips. These tips will cover a variety of topics. However, all will share the same goal, to help you write a better code and make your work easier and more enjoyable. Let’s begin.

6 Quick React Tips to Write A Better Code Part 2.

Keep your components small

Take a look at some of your React components. How big are they? How much code do they contain? Is it easy for someone new who never worked with your components before to understand the code? There is usually some chance that at least some of your components will be quite big. This is especially true if you are a beginner without more prior experience with React or programming.

You don’t have to feel bad if this is your case, if your current practice results in quite big components. Almost everyone does in the beginning. You should see some of the code I wrote when I started working with React. Back then my code was a disaster. Well, there is still a lot of polishing to do. However, I am working on it and making a decent progress.

Many of us have some experience with bloated code and big React components. This is not the ideal state one should aim for, rather the opposite. Your React components should be small. Don’t be afraid that this practice will result to having “too” many files. This is something I was worried about when I started with Atomic Design. Yes, you will end up with more files.

On the other hand, it will be much easier for you to work with and maintain your code, as well as whole projects. This is one of the easiest React tips you can learn about. It is also one of those React tips you can implement almost immediately and often with relative ease.

Let’s take a look at a simple example of a landing page. This page will contain header, hero, a number of small sections and footer. In the first version we will put everything in one file.

#react #javascript #design development #reactjs