Introduction

How to Create a React Native App Project With Expo

How to Format React Code Style with ESLint and Prettier

How to Add Material Design to React Native With Paper

Add React Native and Expo App Navigation with react-navigation

How to Create a Stack Navigator With react-navigation

How to Transition Between Screens in React Native Navigation

Navigation

How to Add the First Screen to a React Native App

How to Create a React Native Login Screen

Create a React Native Password Reset and Registration Form

Basic Screens

How to Add Firebase to a React Native App

Add Authorization Methods to a React Native App

How to Add a React Native Splash Screen

How to Add Google Sign In to a React Native App

Authorization

Add Bottom Nagivation to React Native With bottom-tabs

Add Drawer Navigation to a React Native App

Advanced Screens

This course will teach you how to create from scratch a simple login application using React Native.

You will get a step-by-step demonstration of solving some of the most common problems we encounter when building an application, including:

* project setup
* screen navigation
* user authorization
* state management

This course is perfect for beginners in mobile applications programming, and those who want to improve their React Native skills.

I came up with the idea for this course because React Native is the most popular cross-platform framework (according to JetBrains’ The State of Developer Ecosystem 2020, 42% of developers use it for their mobile apps). The popularity comes from the fact that developers still write with React code, but it’s shared across iOS and Android.

This course contains all the knowledge you need to create production-ready applications that can be released to the App Store and Google Play. I'll be introducing many tools that are commonly used when it comes to React Native applications, and that knowledge may come in handy in other projects as well.

This is how final product of this course looks like:

![start](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/start.png)
![login](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/login.png)
![register](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/register.png)
![forgot](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/forgot-password.png)
![home](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/home.png)
![drawer](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/drawer.png)
![profile](https://raw.githubusercontent.com/venits/react-native-market/master/assets/newline-app-template/profile.png)

I hope to see you in the course!

_Happy Coding 🚀_

In this course we are going to create from scratch a simple login application using React Native.

Creating a React Native Login

Importance of setting up development environment.

How to use design system (react-native-paper).

How to implement authorization with Firebase.

How to add bottom navigation and drawer menu.

In this lesson we are going to add two libraries which will improve our development experience.

 are libraries that together make your code more universal, as they make you stick to common programming style guidelines and patterns.

ESLint is a code linting tool that handles code quality and resolves coding style issues. If you are using 

Prettier is a code formatter that will take care of code quality. In 

The next step is adding ESLint and Prettier to our project. Doing it manually can take some time, so I recommend this 

 that comes with one command line that installs all the needed dependencies in our project.

exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)

After executing it in a terminal we have a few options to choose from:

After all the dependencies are installed, we can take a look at the generated files.

. They come with some default rules but these are not enough for our React Native project.

In the full source code for this course you can see complete configuration files that are tested and used by me. You can simply copy and paste them. They add some more specific rules, helpful for React Native projects.

Now, let me show you a small example of what exactly ESLint and Prettier can do for you.

As you can see our code editor lints one 

. The warning simply tells us that variable 

 is assigned a value but never used. This helps us to avoid defining variables that are never used in our code and yet take up memory. The error is linted by the Prettier rule that removes any unnecessary semi-colons to make our code cleaner and more readable. I know that it might be surprising to some of you but in JavaScript semi-colons are not really necessary in most cases.

Errors will be taken care of automatically when I save the file, thanks to Visual Studio plugins.

To sum up, after installing ESLint and Prettier, we no longer have to worry about styling issues and can focus on the functionality of our app.

In the next lesson we are going to add a design system to our app that will provide us with components such as 

Thank you and see you in the next lesson!

---
title: How to Format React Code Style with ESLint and Prettier
description: ESlint and Prettier
privateVideoUrl: https://fullstack.wistia.com/medias/m06xrnrcxy
isPublicLesson: true
---

# ESLint and Prettier

In this lesson we are going to add two libraries which will improve our development experience.

**ESLint and Prettier** are libraries that together make your code more universal, as they make you stick to common programming style guidelines and patterns.

ESLint is a code linting tool that handles code quality and resolves coding style issues. If you are using _Visual Studio Code_ I recommend this [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). You can find it by typing `ESLint` in the extensions tab.

Prettier is a code formatter that will take care of code quality. In _Visual Studio Code_ there is also a dedicated [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode). You can find it by typing `Prettier` in the extensions tab.

The next step is adding ESLint and Prettier to our project. Doing it manually can take some time, so I recommend this [GitHub repo](https://github.com/paulolramos/eslint-prettier-airbnb-react) that comes with one command line that installs all the needed dependencies in our project.

```shell
exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/paulolramos/eslint-prettier-airbnb-react/master/eslint-prettier-config.sh 2> /dev/null)
```

After executing it in a terminal we have a few options to choose from:

1.  Select package manager: (in my case it is `npm`)

    ![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.03_Eslint_and_Prettier/public/manager.png)
2.  Select configuration file format: (I recommend using `.js`)

    ![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.03_Eslint_and_Prettier/public/format.png)
3.  Enter max line length: (**80** is the most common and recommended)

    ![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.03_Eslint_and_Prettier/public/length.png)
4.  Select trailing comma style: (I recommend selecting `es5`). _If you are interested why, please read [this](https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8) article._

    ![](https://d2uusema5elisf.cloudfront.net/courses/creating-a-react-native-login/module_01/lesson_01.03_Eslint_and_Prettier/public/comma.png)

After all the dependencies are installed, we can take a look at the generated files.

In our project we can see two new files `.prettierrc` and `.eslintrc`. They come with some default rules but these are not enough for our React Native project.

In the full source code for this course you can see complete configuration files that are tested and used by me. You can simply copy and paste them. They add some more specific rules, helpful for React Native projects.

Now, let me show you a small example of what exactly ESLint and Prettier can do for you.

Let's define the following variable:

```js
const test = "123";
```

As you can see our code editor lints one _warning_ and one _error_. The warning simply tells us that variable `test` is assigned a value but never used. This helps us to avoid defining variables that are never used in our code and yet take up memory. The error is linted by the Prettier rule that removes any unnecessary semi-colons to make our code cleaner and more readable. I know that it might be surprising to some of you but in JavaScript semi-colons are not really necessary in most cases.

Errors will be taken care of automatically when I save the file, thanks to Visual Studio plugins.

To sum up, after installing ESLint and Prettier, we no longer have to worry about styling issues and can focus on the functionality of our app.

In the next lesson we are going to add a design system to our app that will provide us with components such as `<Buttons/>` and `<TextInputs/>`.

_Thank you and see you in the next lesson!_


Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Creating a React Native Login

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:24)

Introduction

Lesson 1: (3:13)

How to Create a React Native App Project With Expo

Lesson 2:

How to Format React Code Style with ESLint and Prettier

Lesson 3: (3:45)

How to Add Material Design to React Native With Paper

Module 2: Navigation

Lesson 1: (2:34)

Add React Native and Expo App Navigation with react-navigation

Lesson 2:

How to Create a Stack Navigator With react-navigation

Lesson 3:

How to Transition Between Screens in React Native Navigation

Module 3: Basic Screens

Lesson 1: (4:54)

How to Add the First Screen to a React Native App

Lesson 2: (6:42)

How to Create a React Native Login Screen

Lesson 3:

Create a React Native Password Reset and Registration Form

Module 4: Authorization

Lesson 1:

How to Add Firebase to a React Native App

Lesson 2:

Add Authorization Methods to a React Native App

Lesson 3:

How to Add a React Native Splash Screen

Lesson 4:

How to Add Google Sign In to a React Native App

Module 5: Advanced Screens

Lesson 1: (3:27)

Add Bottom Nagivation to React Native With bottom-tabs

Lesson 2: (3:05)

Add Drawer Navigation to a React Native App

How to Format React Code Style with ESLint and Prettier