Toby Rogers

Toby Rogers

1563957086

A beginner's guide to writing good React code

What counts as good code and what counts as bad code is perhaps the subject of a future article post, but for now I want to list down a few helpful ideas that were not obvious to me when I first started writing in React four years ago.

React as of 2019 is the most popular library for the web.

One of it’s major selling points is that it integrates quite seamlessly with good old Javascript, giving you a lot more freedom to write your code however you want. However this freedom also makes it very easy to write bad or messy code.

Understand when to break down components

Aggressively separating everything into a component can be just as bad as being too conservative and cramming everything in just one or two components.

The trick is to find the balance in between the two extremes, where components that matter can just be used as plug and play, but at the same time you’re not stuck with a thousand component jigsaw puzzle.

When deciding if something should be split into its own component, ask yourself this :

  • Is it likely to be re-used?
  • Does it clearly help reduce the complexity of the parent component?

If the answer to either is yes, then it absolutely should be its own component.

If it’s not however, here comes your opportunity to make a judgement call.

Breaking a component down because you don’t want to deal with a 300 line component behemoth is fair in my opinion; but on the flip-side, if you find yourself willing to deal with a reasonably small and simple component and treat it as a single entity without breaking it down further, I think that’s fair too.

Let’s take a look at an example. I apologize in advance for the poor illustration.

Some components are easily identifiable.

Button should be a component, and so should Card since we’re seeing them being clearly re-used.

SearchBar and Disclaimer however lie in a sort of grey area.

I would say that SearchBar, even though it’s not re-used here, might have some latent potential to be repurposed. It also helps reduce the complexity of its parent to a certain extent, so I might make a component for it.

Disclaimer however, is much more ambiguous. Assuming that the disclaimer is specific to this screen, we’re not going to need it anywhere else, and I also don’t have any problem picturing it as part of the parent as a single entity. In this scenario, I might just leave it inside the parent, but along with increase in scale and complexity, this may prove subjective.

There are also components here that you should not make.

Components like ButtonText or CardText (for our simple non-dynamic card) would not be useful, and only add to the overall complexity of the code.

Take rendering the text inside Button for example. Ideally, you would want to pass the text as children (not as a prop) to the Button component from the parent directly, as such :

<Button>Card text goes here</Button>

and then within the component’s render() method, display the children :

class Button extends React.Component {
    render() {
        return <div>{this.props.children}</div>;
    }
}

Hence making a ButtonText component would be a bad idea as it takes away this flexibility and introduces an avoidable layer of complexity. CardText or CardContent in our case would be just as bad, but if your Card’s structure is not fixed and might contain dynamic content, then an argument could be made.

Identify your state and when it needs management

A common mistake I’ve seen repeated often is to just dump all component attributes into state.

Only those properties which should trigger a re-render on being changed via setState(), should be put into state.

Any other attribute that doesn’t need to re-render or change something on the UI, does not belong in state. Consider declaring it as a simple class property instead.

class Card extends React.Component {
    state = {
        visible: true, // Should trigger a re-render on being changed
    };
    wasHiddenBefore = false; // Not UI related, so it doesn't belong in state
}

With that out of the way, we should talk about the elephant in the room.

Oh God no, not you. Jesus Christ, talk about having traumatizing flashbacks.

I’m talking about State Management.

Redux, for example is a very popular library for state management.

However, Dan Abramov, the creator of Redux himself, often writes about how most people probably don’t even need it.

This is one of those instances where knowing a convention is not enough. You should also know when to use it lest you fall into problems created by reckless over-engineering.

Just like knowing when to separate components, when to use state management also has a similar answer: When it gets too complex without.

For most small websites, including this article, local state is good enough.

When the hassle of passing props around becomes too complex, like say you find yourself passing the same props down to so many components consecutively that simply imagining the flow takes significant effort, it might be time for state management.

Introducing state management before that point only adds to the complexity instead of removing it.

Don’t get tripped up by HOCs

The term ‘Higher Order Component’ can be a bit misleading if you’re not familiar with the etymology, because Higher Order Components are not components at all.

Technically, they’re functions that take in a component, and return a new component.

Once you understand that, HOCs should become easier to work around. Use them as a level of abstraction over components. Think ‘class factory’ except without the nightmares.

With that in mind, do not call a HOC within a component’s render() method.

The reason why this is bad is because a new component will be mounted every time the parent component is re-rendered, meaning you lose the state of the generated component and all its children.

Embrace inline JSX-fu

There’s a thin line between code being readable, and too verbose.

You might think that conditional renders are best handled outside JSX for the sake of readability like so :

render() {
    let extra;
    if (this.props.newUser) {
        extra = <PromotionalOffers />
    }
    return (
        <>
            <Content />
            {extra}
        </>
    );
}

But I’d argue that the following code is just as readable if not more, and definitely tidier.

render() {
    return (
        <>
            <Content />
            { this.props.newUser && <PromotionalOffers /> }
        </>
    )
}

React Fragments as seen in both code snippets above can help you neatly structure your JSX further.

Again, the key here is moderation. If you take inline code patterns and turn it up to spaghetti levels of horror, you only have yourself to blame.

Write tests for your frontend

It seems that in the dark and fearful world of frontend development, there isn’t quite a consensus on what the absolute right way to do frontend testing is, but that doesn’t mean it can’t be done or that it shouldn’t be done.

If all the CI pipeline on your production application does, is run a linting check, then that’s a big oof.

Similar to how Test Driven Development has obvious advantages in backend development, it can stop you from creatively shooting yourself in the foot when applied to frontend as well.

Testing libraries such as Jest, react-testing-library and Enzyme will help you get there.

Snapshot testing is useful for writing unit tests for stable components that are not likely to keep changing.

On the other hand, you have functional tests or end to end tests which you should write to test aspects of the UI flow from the user’s perspective.

Writing tests is like having documentation. When it’s good, it’s really good; and when it’s bad, it’s better than nothing.

#reactjs #javascript #web-development

What is GEEK

Buddha Community

A beginner's guide to writing good React code
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

A Beginner’s Guide to React

It’s nearly the end of 2019, and you think you might finally be ready to get started learning ReactJS. You hear it’s become the most popular front end JavaScript framework. You sit down at your computer, and are ready to give it a go. Starting off, you probably jump straight in with Facebook’s official React tutorial. After that maybe another tutorial on medium. You do some reading here and there, and if you are like me, you end up pretty confused. You hear terms like “props”, “state”, “virtual dom”, “ES6”, “babel”, “webpack”, “higher-order components”, “Redux”, and much more. Soon you realise that learning React is not as easy as you once imagined and either quit or confusedly persevere on.

Does this sound like you? Because this is exactly how I felt when I started learning React. All I wanted to do was set up a simple React app, and I was getting very confused. I thought React had a fairly difficult learning curve, and I was feeling pretty overwhelmed.

I soon realised that React was fairly easy to learn, but the way I went about learning it was difficult. The problem was I didn’t know how to learn it. Firstly, I was relatively new to the world of front end development and I didn’t know what I was doing. I was somewhat familiar with HTML and only used JavaScript a few times. That certainly did not help. There were technologies and information that I should have spent a little more time learning prior to React, that would have lowered the learning curve tremendously.

This is what I would have liked to have known before I began writing a single line of React code:

Prerequisites

First, let’s nail out the basics. Before you start diving into React, you should probably have at least a little experience with each of the following:

- HTML

- CSS

- ES6 JavaScript

- NodeJS + NPM

If you are familiar with each of the above, then learning React is going to be a lot easier for you. React is big on JavaScript and HTML.


What is React

React is a JavaScript library built in 2013 by the Facebook development team. React wanted to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

Understand the Basic

React has 4 ideas that are key to getting started learning with React.

1.Components

React apps have component based architectures. Conceptually, components are more like JavaScript Functions.They accept inputs(called “props”) and return React elements describing what should appear on screen. Probably a title, an author’s name, the date published, some text, some photos, like buttons, share buttons, etc. If you were building this blog in React, each of these would most likely be a component.

If you create a component for a share button, you can reuse that component to build other share buttons, or reuse it across multiple different kinds of articles. This is the idea with React. You are building components that then can be used and reused to build bigger components.

2. Props

Props is short for properties. Properties are how you pass information unidirectionally from parent to child components. I like to think of them as property attributes or parameters, since it is conceptually similar to passing arguments into a function, and syntactically similar to HTML attributes. Look at the example used previously. If this were a React component, the props would be what you are passing in as “src”, “alt”, “height”, and “width”. You can also pass in callback functions for the child to execute such as “onClick”.

3. State

Many React components will be stateful components. State is exactly what it sounds like. It’s the internal state of your component. Think of a checkbox on a web page. It can either be checked or unchecked. When the user clicks on the checkbox, it will check the box if it is unchecked, and when the user clicks it again it will uncheck the box. The checkbox is an example of a stateful component. In this example, the internal state of the checkbox would be a boolean that would either be checked true or checked false.

While many components have state, some are stateless. Just because lots of components have state doesn’t mean that every component needs to be stateful. Sometimes it makes sense to omit state from a component. Think of an image html tag.

**<img src=”smiley.gif” alt=”Smiley face” height=”42" width=”42">**

If this image tag would be an example of a stateless component. You are passing in parameters, but the image tag itself does not have an internal state that it needs to manage itself.

4. React lifecycle

React is much easier to understand if you have a basic idea behind the React component lifecycle. The React lifecycle describes when and how a component should mount, render, update, and unmount in the DOM. React has lifecycle hooks (React component methods) that help you manage state, props, and work with the lifecycle flow.

Image for post

Image for post

**React component lifecycle has three categories **— Mounting, Updating and Unmounting.

  1. The render_() _is the most used lifecycle method.
  • It is a pure function.
  • You cannot set state in render()

2. The componentDidMount() happens as soon as your component is mounted.

  • You can set state here but with caution.

3. The componentDidUpdate_() _happens as soon as the updating happens.

  • You can set state here but with caution.

4. The componentWillUnmount_() _happens just before the component unmounts and is destroyed.

  • This is a good place to cleanup all the data.
  • You cannot set state here.

5. The shouldComponentUpdate_() _can be used rarely.

  • It can be called if you need to tell React not to re-render for a certain state or prop change.
  • This needs to be used with caution only for certain performance optimizations.

6.The two new lifecycle methods are getDerivedStateFromProps() and getSnapshotBeforeUpdate().

  • They need to be used only occasionally.
  • Not many examples are out there for these two methods and they are still being discussed and will have more references in the future.

Note: You can read more about React’s lifecycle here

These are only the basics to get started.

#react-for-beginner #react-lifecycle #react #react-components #ui

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Why ReactJS?

React JS is the most popular JS library for building UI (User Interfaces), which is created by Facebook. We can build fast Single Page, modern Applications, or websites with React. So, the question here arises is why React is so important. Let’s put some light on the features of react.

Features of React JS

Image for post

  1. Reusable UI components: Consider the Flipkart website, I want the same header on checkout, listing and account page etc. So, it’s better we should make one common
    component and import in all other modules.
  2. **React Virtual DOM: **In React, Virtual DOM exists, which is like a lightweight copy of the actual DOM. Virtual DOM improves app performance since JS virtual DOM is faster than the regular DOM.

#reactjs #beginners-guide #basics-of-react #react-for-beginner #react-course #react

Samanta  Moore

Samanta Moore

1621137960

Guidelines for Java Code Reviews

Get a jump-start on your next code review session with this list.

Having another pair of eyes scan your code is always useful and helps you spot mistakes before you break production. You need not be an expert to review someone’s code. Some experience with the programming language and a review checklist should help you get started. We’ve put together a list of things you should keep in mind when you’re reviewing Java code. Read on!

1. Follow Java Code Conventions

2. Replace Imperative Code With Lambdas and Streams

3. Beware of the NullPointerException

4. Directly Assigning References From Client Code to a Field

5. Handle Exceptions With Care

#java #code quality #java tutorial #code analysis #code reviews #code review tips #code analysis tools #java tutorial for beginners #java code review