Dylan North

Dylan North

1566179583

14 Beneficial Tips to Write Cleaner Code in React Apps

Originally published by jsmanifest at jsmanifest.com

How you write code is one of the things they want to look at before making the hiring decision. Your code should be understandable by humans and not just by a machine.

The things listed in this article should apply more importantly the bigger your project becomes and might not be necessary for smaller ones. Just use your best judgment :)

Here are 14 Beneficial Tips to Write Cleaner Code in React Apps:

1. Destructure Your Props

Destructuring your props is a good way to help make your coder cleaner and more maintainable. That's because you clearly define or declare what something (like a component) is using and it doesn't force developers to read through the implementation of the component to find out all the props that are tied to the component.

It also gives you the ability to declare default values for them which you've probably seen plenty of times:

import React from 'react'
import Button from 'components/Button'

const MyComponent = ({ placeholder = ‘’, style, …otherProps }) => {
return (
<Button
type=“button”
style={{
border: 1px solid ${placeholder ? 'salmon' : '#333'},
…style,
}}
{…otherProps}
>
Click Me
</Button>
)
}

export default MyComponent

One of the coolest things I find about destructuring in JavaScript is that it lets you support different variations of parameters.

For example, if you had an authenticate function that used to taken in a token as a parameter to authenticate users and now wish to take in jwt_token because of a new server response structure, you can easily support both parameters without changing much of your code:

// before refactoring
async function authenticate({ user_id, token }) {
try {
const response = await axios.post(‘https://someapi.com/v1/auth/’, {
user_id,
token,
})
console.log(response)
return response.data
} catch (error) {
console.error(error)
throw error
}
}

// after refactoring
async function authenticate({ user_id, jwt_token, token = jwt_token }) {
try {
const response = await axios.post(‘https://someapi.com/v1/auth/’, {
user_id,
token,
})
console.log(response)
return response.data
} catch (error) {
console.error(error)
throw error
}
}

jwt_token will be evaluated by the time the code gets to token, so if jwt_token is a valid token and token is undefined, then the value of tokenwill become the value of jwt_token. If the token was already some truthy value (a real token), it will just keep itself.

2. Folderize Your Components

Lets take a look at this directory structure below:

  • src
  • components
  • Breadcrumb.js
  • CollapsedSeparator.js
  • Input
  • index.js
  • Input.js
  • utils.js
  • focusManager.js
  • Card
  • index.js
  • Card.js
  • CardDivider.js
  • Button.js
  • Typography.js

Breadcrumbs are commonly known to be associated with some sort of separator as one of their core functionalities. The CollapsedSeparatorcomponent is imported inside Breadcrumb.js, so we know that they are both related in implementation. However, someone who doesn’t know this information might assume that Breadcrumb and CollapsedSeparator are two completely separate components that are not related to each other at all–especially if CollapsedSeparator does not have any clear indications of it being related to a breadcrumb like having the prefix Breadcrumb(BreadcrumbCollapsedSeparator.js) for example.

Since we know that they are related we’d probably question why they aren’t in a folder like Input and Card is doing and start to make weird possible assumptions like “I wonder if someone put it there to see if I would take it out like a good samaritan…”. The effects of clean code practices should be the opposite–developers should be able to read your code and understand the situation in a snap!

Folderizing the breadcrumb looks something like this:

  • src
  • components
  • Breadcrumb
  • index.js
  • Breadcrumb.js
  • CollapsedSeparator.js
  • Input
  • index.js
  • Input.js
  • utils.js
  • focusManager.js
  • Card
  • index.js
  • Card.js
  • CardDivider.js
  • Button.js
  • Typography.js

Now no matter how many Breadcrumb related components are created after that, we will always know that they are related to Breadcrumb as long as they reside in the same directory:

  • src
  • components
  • Breadcrumb
  • index.js
  • Breadcrumb.js
  • CollapsedSeparator.js
  • Expander.js
  • BreadcrumbText.js
  • BreadcrumbHotdog.js
  • BreadcrumbFishes.js
  • BreadcrumbLeftOvers.js
  • BreadcrumbHead.js
  • BreadcrumbAddict.js
  • BreadcrumbDragon0814.js
  • BreadcrumbContext.js
  • Input
  • index.js
  • Input.js
  • utils.js
  • focusManager.js
  • Card
  • index.js
  • Card.js
  • CardDivider.js
  • Button.js
  • Typography.js
import React from ‘react’
import Breadcrumb, {
CollapsedSeparator,
Expander,
BreadcrumbText,
BreadcrumbHotdog,
BreadcrumbFishes,
BreadcrumbLeftOvers,
BreadcrumbHead,
BreadcrumbAddict,
BreadcrumbDragon0814,
} from ‘…/…/…/…/…/…/…/…/…/…/components/Breadcrumb’

const withBreadcrumbHotdog = (WrappedComponent) => (props) => (
<WrappedComponent BreadcrumbHotdog={BreadcrumbHotdog} {…props} />
)

const WorldOfBreadcrumbs = ({
BreadcrumbHotdog: BreadcrumbHotdogComponent,
}) => {
const [hasFishes, setHasFishes] = React.useState(false)

return (
<BreadcrumbDragon0814
hasFishes={hasFishes}
render={(results) => (
<BreadcrumbFishes>
{({ breadcrumbFishes }) => (
<BreadcrumbLeftOvers.Provider>
<BreadcrumbHotdogComponent>
<Expander>
<BreadcrumbText>
<BreadcrumbAddict>
<pre>
<code>{JSON.stringify(results, null, 2)}</code>
</pre>
</BreadcrumbAddict>
</BreadcrumbText>
</Expander>
{hasFishes
? breadcrumbFishes.map((fish) => (
<>
{fish}
<CollapsedSeparator />
</>
))
: null}
</BreadcrumbHotdogComponent>
</BreadcrumbLeftOvers.Provider>
)}
</BreadcrumbFishes>
)}
/>
)
}

export default withBreadcrumbHotdog(WorldOfBreadcrumbs)

3. Name Your Components Using Standard Naming Conventions

Naming your components using standard conventions makes it easier for other developers to read your code.

For example, higher order components usually becomes prefixed with withwhich most people are used to:

import React from ‘react’
import hoistNonReactStatics from ‘hoist-non-react-statics’
import getDisplayName from ‘utils/getDisplayName’

const withFreeMoney = (WrappedComponent) => {
class WithFreeMoney extends React.Component {
giveFreeMoney() {
return 50000
}

render() {
  return (
    &lt;WrappedComponent
      additionalMoney={[
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
      ]}
      {...this.props}
    /&gt;
  )
}

}

WithFreeMoney.displayName = withFreeMoney(${getDisplayName( WrappedComponent, )}$)
hoistNonReactStatics(WithFreeMoney, WrappedComponent)

return WithFreeMoney
}

export default withFreeMoney

If you decide to do something different like this:

import React from ‘react’
import hoistNonReactStatics from ‘hoist-non-react-statics’
import getDisplayName from ‘utils/getDisplayName’

const useFreeMoney = (WrappedComponent) => {
class WithFreeMoney extends React.Component {
giveFreeMoney() {
return 50000
}

render() {
  return (
    &lt;WrappedComponent
      additionalMoney={[
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
        this.giveFreeMoney(),
      ]}
      {...this.props}
    /&gt;
  )
}

}

WithFreeMoney.displayName = useFreeMoney(${getDisplayName( WrappedComponent, )}$)
hoistNonReactStatics(WithFreeMoney, WrappedComponent)

return WithFreeMoney
}

export default useFreeMoney

It’s perfectly valid JavaScript and there’s nothing wrong with naming it this way. But there’s already a standard naming convention for use which have already reached the scene with react hooks. Just be careful when you’re sharing your code especially when you’re asking for help because people might already be adapted to seeing common established conventions every day.

4. Avoid the Boolean Trap

You have to be extra careful when deciding your output when it comes to the primitive booleans to determine output value of something. It’s known to be a code smell and it forces the developer to look at the source code / implementation of the component to be able to make an accurate assumption of the end result.

For example, if we declared a Typography component that takes these available options: ‘h1’‘h2’‘h3’‘h4’‘h5’‘h6’‘title’‘subheading’

How would you figure out how they’ll be applied when they’re passed in like this?

const App = () => (
<Typography color=“primary” align=“center” subheading title>
Welcome to my bio
</Typography>
)

Those who are more experienced with React (or more appropriately, JavaScript) might already guess that title will proceed over subheadingbecause by the way the ordering works, the last one will overwrite the previous.

But the problem is that we won’t be able to truly tell how far title or subheading will be applied without looking at the source code.

For example:

.title {
font-size: 1.2rem;
font-weight: 500;
text-transform: uppercase;
}

.subheading {
font-size: 1.1rem;
font-weight: 400;
text-transform: none !important;
}

Even though title “wins”, the text-transform: uppercase CSS line still won’t be applied because subheading declares higher specificity with text-transform: none !important; in its implementation. If we aren’t careful enough it might become really difficult to debug a styling issue especially when it won’t show any warnings/errors to the console. This can complicates the component’s signature.

Here’s just one example of a cleaner alternative to re-implement the Typography component that solves the issue:

const App = () => <Typography variant=“title”>Welcome to my bio</Typography>

Typography

import React from ‘react’
import cx from ‘classnames’
import styles from ‘./styles.css’

const Typography = ({
children,
color = ‘#333’,
align = ‘left’,
variant,
…otherProps
}) => {
return (
<div
className={cx({
[styles.h1]: variant === ‘h1’,
[styles.h2]: variant === ‘h2’,
[styles.h3]: variant === ‘h3’,
[styles.h4]: variant === ‘h4’,
[styles.h5]: variant === ‘h5’,
[styles.h6]: variant === ‘h6’,
[styles.title]: variant === ‘title’,
[styles.subheading]: variant === ‘subheading’,
})}
>
{children}
</div>
)
}

Now when we pass variant=“title” in the App component, we will be assured that only title will be applied and it saves us the trouble of having to look at the source code to determine the outcome.

You can also just do a simple if/else to compute the prop:

let result
if (variant === ‘h1’) result = styles.h1
else if (variant === ‘h2’) result = styles.h2
else if (variant === ‘h3’) result = styles.h3
else if (variant === ‘h4’) result = styles.h4
else if (variant === ‘h5’) result = styles.h5
else if (variant === ‘h6’) result = styles.h6
else if (variant === ‘title’) result = styles.title
else if (variant === ‘subheading’) result = styles.subheading

But the best benefit from this is that you can just do this simple, clean one-liner and call it a day:

const result = styles[variant]

5. Use Fat Arrow Functions

Using fat arrow functions is a shorter and concise way of declaring functions in JavaScript (which is more appropriately named a function expression in this case).

However, there are certain times when you don’t want to use fat arrow functions over function expressions, like when you need the hoisting.

In React, the same concept applies similarly. However, if you don’t need hoisting it’s a nicer alternative (in my opinion) to use the arrow syntax:

// Function declaration version
function Gallery({ title, images = [], …otherProps }) {
return (
<CarouselContext.Provider>
<Carousel>
{images.map((src, index) => (
<img src={src} key={img_${index}} />
))}
</Carousel>
</CarouselContext.Provider>
)
}

// Arrow / Function expression version
const Gallery = ({ title, images = [], …otherProps }) => (
<CarouselContext.Provider>
<Carousel>
{images.map((src, index) => (
<img src={src} key={img_${index}} />
))}
</Carousel>
</CarouselContext.Provider>
)

But you can hardly tell the benefits in this example… The beauty of arrow functions shine when you do simple one-liners:

// Function declaration version
function GalleryPage(props) {
return <Gallery {…props} />
}

// Arrow / Function expression version
const GalleryPage = (props) => <Gallery {…props} />

And one-liners makes everyone happy! :)

6. Put Independent Functions Outside of Your Custom Hooks

I see some people declaring functions inside their custom hooks when they aren’t really needed by them. This makes the custom hook a little bloated and harder to read as it gets longer because some developers might begin to question if the hook actually does depend on the function being inside the hook. If it’s not, its better to move it outside so that there’s a clear understanding of what the dependencies of the hook are and which ones aren’t.

Here’s an example:

import React from ‘react’

const initialState = {
initiated: false,
images: [],
}

const reducer = (state, action) => {
switch (action.type) {
case ‘initiated’:
return { …state, initiated: true }
case ‘set-images’:
return { …state, images: action.images }
default:
return state
}
}

const usePhotosList = ({ imagesList = [] }) => {
const [state, dispatch] = React.useReducer(reducer, initialState)

const removeFalseyImages = (images = []) =>
images.reduce((acc, img) => (img ? […acc, img] : acc), [])

React.useEffect(() => {
const images = removeFalseyImages(imagesList)
dispatch({ type: ‘initiated’ })
dispatch({ type: ‘set-images’, images })
}, [])

return {
…state,
}
}

export default usePhotosList

Looking at the example, removeFalseyImages actually doesn’t need to be inside the custom hook and can instead be extracted outside and still be used without any problems inside of the hook since it doesn’t interact with any of its state.

7. Stay Consistent

Staying consistent is also a commonly recommended approach in JavaScript.

As for React, stay consistent with:

  1. Imports and exports
  2. Naming components, hooks, HOC’s, classNames

When importing and exporting components, I sometimes like using this syntax when I want to put exports in between:

import App from ‘./App’

export { default as Breadcrumb } from ‘./Breadcrumb’

export default App

But I equally love this syntax:

export { default } from ‘./App’
export { default as Breadcrumb } from ‘./Breadcrumb’

Whichever one you like doing, just make sure that you’re consistent with choosing one for each project so that it stays simple.

Staying consistent with naming conventions is also a very important rule.

When you define a hook like useApp, it’s important to name your next hook with the prefix use like useController.

If you don’t, what you end up doing is something like this:

// custom hook #1
const useApp = ({ data: dataProp = null }) => {
const [data, setData] = React.useState(dataProp)

React.useEffect(() => {
setData(data)
}, [])

return {
data,
}
}

// custom hook #2
const basicController = ({ device: deviceProp }) => {
const [device, setDevice] = React.useState(deviceProp)

React.useEffect(() => {
if (!device && deviceProp) {
setDevice(deviceProp === ‘mobile’ ? ‘mobile’ : ‘desktop’)
}
}, [deviceProp])

return {
device,
}
}

Importing the two hooks:

import React from ‘react’
import useApp from ‘./useApp’
import basicController from ‘./basicController’

const App = () => {
const app = useApp()
const controller = basicController()

return (
<div>
{controller.errors.map((errorMsg) => (
<div>{errorMsg}</div>
))}
</div>
)
}

export default App

It’s not immediately obvious that basicController is a custom react hook just like useApp is and forces the developer to look and read inside the code to really figure out the truth. If we kept it consistent, it wouldn’t have turned out that way because we can make it obvious:

const app = useApp()
const controller = useBasicController()

8. Componentize Duplicate Elements

Componentize is just a fancy way of saying “converting duplicate elements to their own reusable component”.

Everybody has their reasons for writing duplicate code in React whether it was intentional or an accident.

What ever the cause, it’s a good idea for you to not leave plenty of duplicode code untouched.

For one, you’re probably forming a habit of likely doing that again because you didn’t care about the previous duplicated code. How are you a team player by doing this? You’re putting a burden on your teammates in the future because they’re probably going to get frustrated seeing duplicate elements and they might even be confused especially when they’re put to the task of editing them.

The worst part is for them to get criticized by their duplicate code when they didn’t even write it. When they do, just took one for the team on your behalf. Repay them back by avoiding the duplication in the future!

Lets take a look at this code below and componentize the duplicate parts:

const SomeComponent = () => (
<Body noBottom>
<Header center>Title</Header>
<Divider />
<Background grey>
<Section height={500}>
<Grid spacing={16} container>
<Grid xs={12} sm={6} item>
<div className={classes.groupsHeader}>
<Header center>Groups</Header>
</div>
</Grid>
<Grid xs={12} sm={6} item>
<div>
<img src={photos.groups} alt=“” className={classes.img} />
</div>
</Grid>
</Grid>
</Section>
</Background>
<div>
<Section height={500}>
<Grid spacing={16} container>
<Grid xs={12} sm={6} item>
<div className={classes.labsHeader}>
<Header center>Labs</Header>
</div>
</Grid>
<Grid xs={12} sm={6} item>
<div>
<img src={photos.labs} alt=“” className={classes.img} />
</div>
</Grid>
</Grid>
</Section>
</div>
</Body>
)

Now if someone were to tell you to change the grid sizes from xs={12} sm={6} to xs={12} sm={4} it would become a hassle because you have to change that four times.

The beauty of compenentizing is that you can just make a single change and it will reflect throughout all of the grids:

const SomeComponent = ({ classes, xs = 12, sm = 6, md, lg }) => {
const BodySection = ({ header, src }) => {
const gridSizes = { xs, sm, md, lg }
return (
<Section height={500}>
<Grid spacing={16} container>
<Grid {…gridSizes} item>
<div className={classes.groupsHeader}>
<Header center>{header}</Header>
</div>
</Grid>
<Grid {…gridSizes} item>
<div>
<img src={src} alt=“” className={classes.img} />
</div>
</Grid>
</Grid>
</Section>
)
}

return (
<Body noBottom>
<Header center>Title</Header>
<Divider />
<Background grey>
<BodySection header=“Groups” src={photos.groups} />
</Background>
<div>
<BodySection header=“Labs” src={photos.labs} />
</div>
</Body>
)
}

At its most basic level of extraction, this became much easier for humans to read and maintain while still keeping the normal implementation in place!

9. Keep Your Components Simple

Something I’ve learned while working for a production web app wasn’t to keep your components simple, but to avoid making your components complicated.

Here’s an example of a component that was unnecessarily complicated:

ConfirmAvailability.js

import React from ‘react’
import Grid from ‘@material-ui/core/Grid’
import Typography from ‘@material-ui/core/Typography’
import MenuItem from ‘@material-ui/core/MenuItem’
import Select from ‘@material-ui/core/Select’
import Time from ‘util/time’

/**

  • Timezone picker. Automatically detects the timezone from the client’s device but also displays
  • a clock using this timezone to make sure it is correct. If not, the user may override it.
  • NOTE: Be careful about Date().getTimezoneOffset(). It does two things differently from standard
  •  1. Time difference is in minutes
    
  •  2. Time difference is from local to UTC, not UTC to local. This means it will be negative of
    
  •      the expected UTC format
    

*/
export default class TimeZonePicker extends React.Component {
state = {
time: new Date(),
offset: -(new Date().getTimezoneOffset() / 60),
}

componentDidMount() {
this.props.setOffset(this.state.offset)
}

handleChange = (event) => {
const d = new Date()
d.setTime(
d.getTime() +
d.getTimezoneOffset() * 60 * 1000 +
event.target.value * 3600 * 1000,
)
this.setState({
time: d,
offset: event.target.value,
})
this.props.setOffset(event.target.value)
}

render() {
const timezones = []
for (let i = -12; i <= 14; i++) {
timezones.push(
<MenuItem key={i} value={i}>
{i > 0 ? ‘+’ : null}
{i}
</MenuItem>,
)
}

return (
  &lt;React.Fragment&gt;
    &lt;Grid container justify="space-between"&gt;
      &lt;div&gt;
        &lt;Typography&gt;Current time&lt;/Typography&gt;
        &lt;Typography variant="h6" gutterBottom&gt;
          {Time.formatTime(this.state.time)}
        &lt;/Typography&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;Typography&gt;Set timezone&lt;/Typography&gt;
        &lt;Select value={this.state.offset} onChange={this.handleChange}&gt;
          {timezones}
        &lt;/Select&gt;
      &lt;/div&gt;
    &lt;/Grid&gt;
  &lt;/React.Fragment&gt;
)

}
}

The component was intended to be a simple component but since the logic was tightly coupled it was responsible for multiple things. At the time this code was written, react hooks was not yet released, but there were still higher order components and render props. So we’ll just use one of those patterns to rewrite this to be simpler just to demonstrate how to keep your components simpler (without changing the functionality):

SelectTimeZone.js

import React from ‘react’

/**

  • Timezone picker. Automatically detects the timezone from the client’s device but also displays
  • a clock using this timezone to make sure it is correct. If not, the user may override it.
  • NOTE: Be careful about Date().getTimezoneOffset(). It does two things differently from standard
  •  1. Time difference is in minutes
    
  •  2. Time difference is from local to UTC, not UTC to local. This means it will be negative of
    
  •      the expected UTC format
    

*/

class SelectTimeZone extends React.Component {
state = {
time: new Date(),
offset: -(new Date().getTimezoneOffset() / 60),
}

componentDidMount() {
this.props.setOffset(this.state.offset)
}

handleChange = (event) => {
const d = new Date()
d.setTime(
d.getTime() +
d.getTimezoneOffset() * 60 * 1000 +
event.target.value * 3600 * 1000,
)
this.setState({
time: d,
offset: event.target.value,
})
this.props.setOffset(event.target.value)
}

getTimeZones = () => {
const timezones = []
for (let i = -12; i <= 14; i++) {
timezones.push(
<MenuItem key={i} value={i}>
{i > 0 ? ‘+’ : null}
{i}
</MenuItem>,
)
}
return timezones
}

render() {
return this.props.render({
…this.state,
getTimeZones: this.getTimeZones,
})
}
}

TimeZonePicker.js

import React from ‘react’
import Grid from ‘@material-ui/core/Grid’
import Typography from ‘@material-ui/core/Typography’
import MenuItem from ‘@material-ui/core/MenuItem’
import Select from ‘@material-ui/core/Select’
import Time from ‘util/time’

const TimeZonePicker = () => (
<SelectTimeZone
render={({ time, offset, getTimeZones, handleChange }) => (
<Grid container justify=“space-between”>
<div>
<Typography>Current time</Typography>
<Typography variant=“h6” gutterBottom>
{Time.formatTime(time)}
</Typography>
</div>
<div>
<Typography>Set timezone</Typography>
<Select value={offset} onChange={handleChange}>
{getTimeZones()}
</Select>
</div>
</Grid>
)}
/>
)

export default TimeZonePicker

Now we have a much cleaner approach and extracted out the logic from its presentational counterpart. Unit testing these components now becomes much easier!

10. Use useReducer if useState becomes complex

When you’re having multiple states to keep track of, using useState begins to become harder to manage.

This can look something like this:

import React from ‘react’
import axios from ‘axios’

const useFrogs = () => {
const [fetching, setFetching] = React.useState(false)
const [fetched, setFetched] = React.useState(false)
const [fetchError, setFetchError] = React.useState(null)
const [timedOut, setTimedOut] = React.useState(false)
const [frogs, setFrogs] = React.useState(null)
const [params, setParams] = React.useState({ limit: 50 })
const timedOutRef = React.useRef()

function updateParams(newParams) {
if (newParams != undefined) {
setParams(newParams)
} else {
console.warn(
‘You tried to update state.params but the parameters were null or undefined’,
)
}
}

function formatFrogs(newFrogs) {
const formattedFrogs = newFrogs.reduce((acc, frog) => {
const { name, age, size, children } = frog
if (!(name in acc)) {
acc[name] = {
age,
size,
children: children.map((child) => ({
name: child.name,
age: child.age,
size: child.size,
})),
}
}
return acc
}, {})
return formattedFrogs
}

function addFrog(name, frog) {
const nextFrogs = {
…frogs,
[name]: frog,
}
setFrogs(nextFrogs)
}

function removeFrog(name) {
const nextFrogs = { …frogs }
if (name in nextFrogs) delete nextFrogs[name]
setFrogs(nextFrogs)
}

React.useEffect(() => {
if (frogs === null) {
if (timedOutRef.current) clearTimeout(timedOutRef.current)

  setFetching(true)

  timedOutRef.current = setTimeout(() =&gt; {
    setTimedOut(true)
  }, 20000)

  axios
    .get('https://somefrogsaspi.com/api/v1/frogs_list/', { params })
    .then((response) =&gt; {
      if (timedOutRef.current) clearTimeout(timedOutRef.current)
      setFetching(false)
      setFetched(true)
      if (timedOut) setTimedOut(false)
      if (fetchError) setFetchError(null)
      setFrogs(formatFrogs(response.data))
    })
    .catch((error) =&gt; {
      if (timedOutRef.current) clearTimeout(timedOutRef.current)
      console.error(error)
      setFetching(false)
      if (timedOut) setTimedOut(false)
      setFetchError(error)
    })
}

}, [])

return {
fetching,
fetched,
fetchError,
timedOut,
frogs,
params,
addFrog,
removeFrog,
}
}

export default useFrogs

This would become more manageable if you were to convert this to a useReducer:

import React from ‘react’
import axios from ‘axios’

const initialFetchState = {
fetching: false
fetched: false
fetchError: null
timedOut: false
}

const initialState = {
…initialFetchState,
frogs: null
params: { limit: 50 }
}

const reducer = (state, action) => {
switch (action.type) {
case ‘fetching’:
return { …state, …initialFetchState, fetching: true }
case ‘fetched’:
return { …state, …initialFetchState, fetched: true, frogs: action.frogs }
case ‘fetch-error’:
return { …state, …initialFetchState, fetchError: action.error }
case ‘set-timed-out’:
return { …state, …initialFetchState, timedOut: true }
case ‘set-frogs’:
return { …state, …initialFetchState, fetched: true, frogs: action.frogs }
case ‘add-frog’:
return { …state, frogs: { …state.frogs, [action.name]: action.frog }}
case ‘remove-frog’: {
const nextFrogs = { …state.frogs }
if (action.name in nextFrogs) delete nextFrogs[action.name]
return { …state, frogs: nextFrogs }
}
case ‘set-params’:
return { …state, params: { …state.params, …action.params } }
default:
return state
}
}

const useFrogs = () => {
const [state, dispatch] = React.useReducer(reducer, initialState)
const timedOutRef = React.useRef()

function updateParams(params) {
if (newParams != undefined) {
dispatch({ type: ‘set-params’, params })
} else {
console.warn(
‘You tried to update state.params but the parameters were null or undefined’,
)
}
}

function formatFrogs(newFrogs) {
const formattedFrogs = newFrogs.reduce((acc, frog) => {
const { name, age, size, children } = frog
if (!(name in acc)) {
acc[name] = {
age,
size,
children: children.map((child) => ({
name: child.name,
age: child.age,
size: child.size,
})),
}
}
return acc
}, {})
return formattedFrogs
}

function addFrog(name, frog) {
dispatch({ type: ‘add-frog’, name, frog })
}

function removeFrog(name) {
dispatch({ type: ‘remove-frog’, name })
}

React.useEffect(() => {
if (frogs === null) {
if (timedOutRef.current) clearTimeout(timedOutRef.current)

  timedOutRef.current = setTimeout(() =&gt; {
    setTimedOut(true)
  }, 20000)

  axios
    .get('https://somefrogsaspi.com/api/v1/frogs_list/', { params })
    .then((response) =&gt; {
      if (timedOutRef.current) clearTimeout(timedOutRef.current)
      const frogs = formatFrogs(response.data)
      dispatch({ type: 'set-frogs', frogs })
    })
    .catch((error) =&gt; {
      if (timedOutRef.current) clearTimeout(timedOutRef.current)
      console.error(error)
      dispatch({ type: 'fetch-error', error })
    })
}

}, [])

return {
fetching,
fetched,
fetchError,
timedOut,
frogs,
params,
addFrog,
removeFrog,
}
}

export default useFrogs

Although this may arguably not be cleaner than the useState approach when you look at it, it is easier to manage when you’re implementing the custom hook using the useReducer version because you don’t have to worry about keeping track of state updates in multiple parts of the hook since you’ll have it all defined in one place inside the reducer.

We’ve also now defined an “official” set of rules of how the manipulation of state.frogs will be manipulated inside the reducer function and have a direct, clearer separation of logic. In other words, if we were to continue using useState for this there won’t be a pre-defined entity unlike the useReducer where all the logic was placed inside the reducer.

In the useState version, we had to declare functions inside the hook in order to figure out the next part of the state, in addition to writing the logic, where as in the useReducer version we didn’t have to do that and instead moved them to the reducer function. We just needed to call the type of action and that’s all it needed to worry about :)

11. Use Function Declaration In Dull Areas

A good example of this is the useEffect clean up handler:

React.useEffect(() => {
setMounted(true)

return () => {
setMounted(false)
}
}, [])

As react developers who know what this does it’s not a problem. But if you assume that other people are going to be reading your code it’s a good idea to be explicit with code like this using function declarations because we get to name them to our advantage. For example:

React.useEffect(() => {
setMounted(true)

return function cleanup() {
setMounted(false)
}
}, [])

This more clearly describes what happens when you return the function.

12. Use Prettier

Prettier helps you and your team stay consistent with code formatting. It saves time, energy, and reduces the need to discuss the style in code reviews. It also enforces clean code practices which you can configure based on your opinions on what feels right and what doesn’t.

13. Use Small Fragment over Large Fragment

Small fragment

const App = () => (
<>
<FrogsTable />
<FrogsGallery />
</>
)

Large Fragment

const App = () => (
<React.Fragment>
<FrogsTable />
<FrogsGallery />
</React.Fragment>
)

14. Put Things in Order

Something I like to do when writing code is to put things in order, like when importing files (except the react import):

import React from ‘react’
import { useSelector } from ‘react-redux’
import styled from ‘styled-components’
import FrogsGallery from ‘./FrogsGallery’
import FrogsTable from ‘./FrogsTable’
import Stations from ‘./Stations’
import * as errorHelpers from ‘…/utils/errorHelpers’
import * as utils from ‘…/utils/’

Some of you may think to yourself that this isn’t even in alphabetical order. That’s only part of what this ordering scheme is.

The way I like to order my imports for a clean approach is using these guidelines, in order of precedence:

  1. React import
  2. Library imports (Alphabetical order)
  3. Absolute imports from project (Alphabetical order)
  4. Relative imports (Alphabetical order)
  5. import * as
  6. import ‘./<some file>.<some ext>’

And I also like to order variables in other ways:

const character = (function() {
return {
cry() {
//
},
eat() {
//
},
hop() {
//
},
jump() {
//
},
punch() {
//
},
run() {
//
},
scratch() {
//
},
scream() {
//
},
sleep() {
//
},
walk() {
//
},
yawn() {
//
},
}
})()

Following a guideline helps for a cleaner code base.

Conclusion

And that concludes the end of this post! I hope you found this to be useful and stay tuned for more!

Originally published by jsmanifest at jsmanifest.com

=======================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

#reactjs #javascript #web-development

What is GEEK

Buddha Community

14 Beneficial Tips to Write Cleaner Code in React Apps
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

Top 10 React Native App Development Companies in USA

React Native is the most popular dynamic framework that provides the opportunity for Android & iOS users to download and use your product. Finding a good React Native development company is incredibly challenging. Use our list as your go-to resource for React Native app development Companies in USA.

List of Top-Rated React Native Mobile App Development Companies in USA:

  1. AppClues Infotech
  2. WebClues Infotech
  3. AppClues Studio
  4. WebClues Global
  5. Data EximIT
  6. Apptunix
  7. BHW Group
  8. Willow Tree:
  9. MindGrub
  10. Prismetric

A Brief about the company details mentioned below:

1. AppClues Infotech
As a React Native Mobile App Development Company in USA, AppClues Infotech offers user-centered mobile app development for iOS & Android. Since their founding in 2014, their React Native developers create beautiful mobile apps.

They have a robust react native app development team that has high knowledge and excellent strength of developing any type of mobile app. They have successfully delivered 450+ mobile apps as per client requirements and functionalities.
Website: https://www.appcluesinfotech.com/

2. WebClues Infotech
WebClues Infotech is the Top-Notch React Native mobile app development company in USA & offering exceptional service worldwide. Since their founding in 2014, they have completed 950+ web & mobile apps projects on time.

They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, WebClues Infotech provides top-notch React Native App solutions that meet the needs of their clients.
Website: https://www.webcluesinfotech.com/

3. AppClues Studio
AppClues Studio is one of the top React Native mobile app development company in USA and offers the best service worldwide at an affordable price. They have a robust & comprehensive team of React Native App developers who has high strength & extensive knowledge of developing any type of mobile apps.
Website: https://www.appcluesstudio.com/

4. WebClues Global
WebClues Global is one of the best React Native Mobile App Development Company in USA. They provide low-cost & fast React Native Development Services and their React Native App Developers have a high capability of serving projects on more than one platform.

Since their founding in 2014, they have successfully delivered 721+ mobile app projects accurately. They offer versatile React Native App development technology solutions to their clients at an affordable price.
Website: https://www.webcluesglobal.com/

5. Data EximIT
Hire expert React Native app developer from top React Native app development company in USA. Data EximIT is providing high-quality and innovative React Native application development services and support for your next projects. The company has been in the market for more than 8 years and has already gained the trust of 553+ clients and completed 1250+ projects around the globe.

They have a large pool of React Native App developers who can create scalable, full-fledged, and appealing mobile apps to meet the highest industry standards.
Website: https://www.dataeximit.com/

6. Apptunix
Apptunix is the best React Native App Development Company in the USA. It was established in 2013 and vast experience in developing React Native apps. After developing various successful React Native Mobile Apps, the company believes that this technology helps them incorporate advanced features in mobile apps without influencing the user experience.
Website: https://www.apptunix.com/

7. BHW Group
BHW Group is a Top-Notch React Native Mobile App Development Company in the USA. The company has 13+ years of experience in providing qualitative app development services to clients worldwide. They have a compressive pool of React Native App developers who can create scalable, full-fledged, and creative mobile apps to meet the highest industry standards.
Website: https://thebhwgroup.com/

8. Willow Tree:
Willow Tree is the Top-Notch React Native Mobile App Development Company in the USA & offering exceptional React Native service. They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, Willow Tree has top-notch React Native App solutions that meet the needs of their clients.
Website: https://willowtreeapps.com/

9. MindGrub
MindGrub is a leading React Native Mobile App Development Company in the USA. Along with React Native, the company also works on other emerging technologies like robotics, augmented & virtual reality. The Company has excellent strength and the best developers team for any type of React Native mobile apps. They offer versatile React Native App development technology solutions to their clients.
Website: https://www.mindgrub.com/

10. Prismetric
Prismetric is the premium React Native Mobile App Development Company in the USA. They provide fast React Native Development Services and their React Native App Developers have a high capability of serving projects on various platforms. They focus on developing customized solutions for specific business requirements. Being a popular name in the React Native development market, Prismetric has accumulated a specialty in offering these services.
Website: https://www.prismetric.com/

#top rated react native app development companies in usa #top 10 react native app development companies in usa #top react native app development companies in usa #react native app development technologies #react native app development #hire top react native app developers in usa

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers

Carmen  Grimes

Carmen Grimes

1595494844

How to start an electric scooter facility/fleet in a university campus/IT park

Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?

Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.

Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.

To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.

What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.

Micro-mobility: What it is

micro-mobility

You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.

Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.

You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.

You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.

As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.

Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.

As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.

All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.

This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!

Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.

Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.

How micro-mobility can benefit you

benefits-micromobility

What advantages can you get from micro-mobility? Let’s take a deeper look into this question.

Micro-mobility can offer several advantages to the people on your campus, e.g.:

  • Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
  • Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
  • Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
  • Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.

#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Carmen  Grimes

Carmen Grimes

1595491178

Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike

mobile-best-electric-bikes-scooters https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides

To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.

Features

  • Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
  • Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
  • Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
  • Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
  • Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
  • Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package

Specifications

  • Maximum speed: 20 mph (32 km/h)
  • Range per charge: 41 miles (66 km)
  • Maximum Power: 500W
  • Motor type: Fat Bike Motor: Bafang RM G060.500.DC
  • Load capacity: 300lbs (136kg)
  • Battery type: 13.6Ah Samsung lithium-ion,
  • Battery capacity: On/off-bike charging available
  • Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
  • Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
  • Rear Suspension: spring, preload adjustment
  • Built-in GPS

Why Should You Buy This?

  • Riding fun and excitement
  • Better climbing ability and faster acceleration.
  • Ride with confidence
  • Billy folds for convenient storage and transportation.
  • Shorty levers connect to disc brakes ensuring you stop on a dime
  • belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike

genze-best-electric-bikes-scooters https://www.genze.com/fleet/

Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.

Features

  • 2 Frame Options
  • 2 Sizes
  • Integrated/Removable Battery
  • Throttle and Pedal Assist Ride Modes
  • Integrated LCD Display
  • Connected App
  • 24 month warranty
  • GPS navigation
  • Bluetooth connectivity

Specifications

  • Maximum speed: 20 mph with throttle
  • Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
  • Charging time: 3.5 hours
  • Motor type: Brushless Rear Hub Motor
  • Gears: Microshift Thumb Shifter
  • Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
  • Battery capacity: 36V and 350 Wh
  • Weight: 46 pounds
  • Derailleur: 8-speed Shimano
  • Brakes: Dual classic
  • Wheels: 26 x 20 inches
  • Frame: 16, and 18 inches
  • Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore

norco-best-electric-bikes-scooters https://ebikestore.com/shop/norco-vlt-s2/

The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.

Features

  • VLT aluminum frame- for stiffness and wheel security.
  • Bosch e-bike system – for their reliability and performance.
  • E-bike components – for added durability.
  • Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
  • Practical design features – to add convenience and versatility.

Specifications

  • Maximum speed: KMC X9 9spd
  • Motor type: Bosch Active Line
  • Gears: Shimano Altus RD-M2000, SGS, 9 Speed
  • Battery type: Power Pack 400
  • Battery capacity: 396Wh
  • Suspension: SR Suntour suspension fork
  • Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV

bodo-best-electric-bikes-scootershttp://www.bodoevs.com/bodoev/products_show.asp?product_id=13

Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.

Features

  • Reliable
  • Environment friendly
  • Comfortable riding
  • Fashionable
  • Economical
  • Durable – long service life
  • Braking stability
  • LED lighting technology

Specifications

  • Maximum speed: 45km/h
  • Range per charge: 50km per person
  • Charging time: 8 hours
  • Maximum Power: 3000W
  • Motor type: Brushless DC Motor
  • Load capacity: 100kg
  • Battery type: Lead-acid battery
  • Battery capacity: 60V 20AH
  • Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime