ESlint is a pluggable linting utility for JavaScript and JSX.

On a today’s real world JavaScript web app, the complexity tends to grow, refactors will be needed, and although you probably know what you are doing, linting your code can save you a lot of headaches.

Besides styling, 2 spaces vs 4 spaces vs tabs, semicolon vs no semicolon, and so on, with just this configuration, you can catch the most frequent mistakes that I find myself and others doing:

//.eslintrc.json at the root of the project with ESLint 2.x.x:
{
    
    "extends": [
        "eslint:recommended", 
        "plugin:react/recommended" // optional, if using react
    ],    
    "env": {
        "es6": true,
        // your environment, node and/or browser:    
        "node": true, 
        "browser": true
    },
    "plugins": ["react"], // optional, if using react
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true  // if using jsx
        }
    },
    "rules": {
        // just some styling rules here or extra rules
    }
}

Install ESlint on your project:

npm install eslint --save-dev

If you are using React, you can install eslint-plugin-react for more linting rules and add it to your eslint configuration as stated above:

npm install eslint-plugin-react --save-dev

Then, configure your text editor and/or build tools as stated here.

Scope and ReferenceErrors

You master scope in JavaScript, sure, but take a look at these common mistakes. Surely you did one of them at least once (especially when refactoring): importing the same module a second time, importing a module but never using it, forgetting to export your React component or your module, block-scope declarations or simply forgetting to define a var in your scope (or misspelling one).

Leading commas and trailing commas

There is some debate regarding the pros vs cons of the use of leading commas in object literals or arrays, as well as the use of trailing commas.

I’m not discussing it here. Just letting you know that if “Haskell like” leading commas it’s not your thing, ESlint can help you minimize the “forgotten” comma when adding and removing items to objects and arrays. And you can also opt between allowing, requiring ou disallowing trailing commas. Of course, ESlint can’t help you here with the argument of clarity of diffs.

Specific to JSX

In html5, you can skip closing the self-closing tags. In JSX, all tags must be closed, either with the self-closing format or with a corresponding closing tag.

And yes, you know it, all adjacent JSX elements must be wrapped in a enclosing tag, but a just in time warning doesn’t hurt:

It’s not all

Although I used the above cases to illustrate the utility of ESlint, the recommended configuration of ESlint covers much more, and many times it’s all you need. You can always replace or add more rules depending on your team or preferences. Or you can use some common configurations out of the box with eslint-config-standard-react or eslint-config-airbnb. Or you can choose another linter.

But the bottom line here is: with little effort, you can save yourself and your team a lot of time and a lot of headaches.

Happy coding!

Common mistakes you can avoid with ESlint was originally published in Undefined is not a function on Medium, where people are continuing the conversation by highlighting and responding to this story.

Note that to use React.js you don’t need to use all the ecosystem, which many times, it’s what makes it difficult to begin with. But if you want to build a real app, you should:

1) Consider some development tools:

• Transpile jsx (and ES6) to ES5 — Babel
• Bundle all your components and modules to be served on the client — Browserify or Webpack (I choose Webpack).
• Have a development server with live-reload and hot-reload — Webpack can do this, and babel-transform can maintain the state of your app even if your code changes.
• Have a linting tool that supports ES6 and JSX.
• The browser extension from Facebook React Dev Tools is great.

Babel

Babel is a JavaScript compiler that has support for the latest version of JavaScript through syntax transformers. It supports JSX with the React preset.

The best way to get started is this repo.

Note to Sublime users: Use it together with the babel-sublime package.

Webpack

Webpack is a module bundler. This means webpack takes modules with dependencies and emits static assets representing those modules.

• It often replaces grunt or gulp because it can build and bundle CSS, preprocessed CSS, compile-to-JS languages and images, among other things.
• You can (and should) use npm modules and your own modules on the client
• You can use loaders (babel-loader to transpile jsx and ES6 to ES5, css loaders to allow you to import css files…)

The best way to get started is this great repo of Pete Hunt Webpack how to.

ESlint

ESlint is a pluggable linting utility for JavaScript and JSX.

You can use some common configurations out of the box with eslint-config-standard-react or eslint-config-airbnb or do your own configuration.

2) Consider a Routing Solution

React-Router

I like React-Router. It keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.

The best way to get started is here.

3) Consider a State manager

There are many Flux implementations — an application architecture that Facebook uses for building client-side web applications -, but the one I like the most is Redux.

Some people like to use immutable collections for JavaScript like immutable.js to maintain the state immutable, but is not a requirement (as long as you don’t mutate the state).

Redux

Redux is a predictable state container for JavaScript apps.

• The state of your app is stored in an object tree inside a single store.
• The only way to change the state tree is to emit an action, an object describing what happened.
• To specify how the actions transform the state tree, you write pure reducers.

The best way to start is watching the Dan Abramov’s Redux course videos alongside the official documentation. You have the notes (and partial transcription) of the videos here.

react-router-redux

Keep react-router and redux in sync — react-router-redux

Redux DevTools

I also suggest you to use this great and fun Redux DevTools browser extension. Your development workflow will never be the same :)

4) Choose your client-server interaction

In today’s world there are two dominant architectural styles for client-server interaction: REST and ad hoc endpoints, don’t forgetting Websockets.

But if you feel adventurous you can try GraphQL — a data query language and runtime -, together with Relay — a JS framework for building data-driven React applications, both from Facebook. This tutorial and this post should help you get started.

5) Consider Server side rendering

(aka Universal (before aka Isomorphic) apps)

Universal JavaScript means the same code runs in different environments, in this case, on the client and on the server (thank you node.js). This can help SEO and initial loading time of your SPA and can be easily achieved with React Router SSR.

6) Consider some tests

There are some utilities (besides all major test runners and assertion libraries out there):

• ReactTestUtils — an add-on of React.
• Enzyme — a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output — from Airbnb.
• mjackson/expect and expect-jsx that lets you write better assertions.
• deep-freeze to recursively Object.freeze() on objects and functions and test immutability.

7) Don’t re-invent the wheel

• A collection of awesome things regarding React ecosystem

Here are some of the great examples, tutorials and starter kits:

• React Redux Universal Hot Example
• Isomorphic Redux demo, with routing and async actions
• survive.js — Redux version here
• Find your Perfect Starter Kit here

If you are looking for some external components and libraries to use on your project:

• https://react.rocks/
• Follow ReactJSnpm that publishes tweets when #ReactJS related libraries are updated on NPM

8) Breathe. It’s web development

Yes, It’s web development. Things move fast. You don’t need to master everything and there will always be that brand new technology that the cool kids will gonna want to use. Use what you need, and what makes sense to your project. If you want, start with the basics, and as your project grows, if you feel that something is missing, opt-in for those tools. Refactoring is easy as long as you do it in a regular basis and structure your code well.

Meanwhile, follow some guys on twitter, they will keep you covered.

Happy coding.

15 Feb 2016 #reactjs #javascript #frontend

Originally published at staminaloops.github.io.

React Ecosystem — A summary was originally published in Undefined is not a function on Medium, where people are continuing the conversation by highlighting and responding to this story.

EDIT 18 Mar 2017: Psst psst, take a look at the new Create React Native App -https://github.com/react-community/create-react-native-app — Create a React Native app on any OS with no build config!

Make sure you have the latest version of node and npm installed. If not:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash - 
sudo apt-get install -y nodejs

Afterwards, you should install/upgrade your npm:

npm install -g npm

It is recommended that you alter your default npm package folder to avoid needing sudo when installing global packages. Please follow this guide: https://docs.npmjs.com/getting-started/fixing-npm-permissions

Install the latest JDK

From here.

Alternative (not tested, but taken from google developers):
Here are the steps to install Java: If you are running a 64-bit distribution on your development machine, you need to install additional packages first. For Ubuntu 13.10 (Saucy Salamander) and above, install the libncurses5:i386, libstdc++6:i386, and zlib1g:i386 packages using apt-get:*

sudo dpkg --add-architecture i386 
sudo apt-get update 
sudo apt-get install libncurses5:i386 libstdc++6:i386 zlib1g:i386

For earlier versions of Ubuntu, install the ia32-libs package using apt-get:

apt-get install ia32-libs

Next, install Java:

apt-get install sun-java6-jdk

Install the Android SDK

export ANDROID_HOME=<path_where_you_unpacked_android_sdk>

Configure your SDK

• Open the Android SDK Manager

cd <path_where_you_unpacked_android_sdk>/tools ./android

In the window that appears make sure you check:

• Android SDK Build-tools version 23.0.1
• Android 6.0 (API 23)
• Android Support Repository

Click “Install Packages”

Install watchman

Facebook recommend installing watchman, otherwise you might hit a node file watching bug. You will need autoconf and automake. You may optionally build watchman with pcre and python support. For python support, you will also need setuptools and may need to install a python-dev or python-devel package.

sudo apt-get install automake
sudo apt-get install autoconf 
sudo apt-get install python-setuptools 
sudo apt-get install python-dev git clone https://github.com/facebook/watchman.git 
cd watchman git checkout v4.4.0 # the latest stable release ./autogen.sh ./configure make sudo make install

Check that is installed with watchman -v

Install Genymotion

(source):

1. This Android Emulator requires Virtualbox, so first search for and install virtualbox in Ubuntu Software Center.
2. Register https://cloud.genymotion.com/ (free for personal use).
3. Download the installer after your login the website: https://www.genymotion.com/download/.
4. If you save the installer in the default Downloads folder, press Ctrl+Alt+T to open terminal. When it opens, run below commands one by one:

cd ~/Downloads/ chmod +x genymotion-2.1.0_x64.bin ./genymotion-2.1.0_x64.bin

It first navigate to Downloads folder, then give executable permission, and finally start the installer. Of course you need to change the file-name version to yours.

cd to installation directory, then run: ./genymotion

Install React Native

npm install -g react-native-cli

Start a project

react-native init AwesomeProject

This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/iOS/AwesomeProject.xcodeproj and a gradle project in AwesomeProject/android/app.

Develop

1) Init genymotion

<path_where_you_unpacked_genymotion-2.1.0_x64.bin>/genymotion/genymotion

Example if you save the installer in the default Downloads folder:

~/Downloads/genymotion/genymotion

Choose an emulator and download it.

2) On a new terminal run from AwesomeProject root directory:

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

react-native run-android

to install the generated app on your emulator and start the Node server which enables live code reloading.

react-native start

Check your Genymotion. To see your changes you have to open the rage-shake-menu (CRTL+M for Genymotion), and then press Reload JS. Enable live reload for.. live reload.

Troubleshooting

See this gist

13 Feb 2016 #reactnative #ubuntu #android

Originally published at staminaloops.github.io.

Install React Native Android on Ubuntu was originally published in Undefined is not a function on Medium, where people are continuing the conversation by highlighting and responding to this story.