Forem: William Jackson

How to Set up Rails MongoDB App in 10 minutes

William Jackson — Thu, 12 Aug 2021 10:45:30 +0000

“MongoDB is a document database with the scalability and flexibility that you want with the querying and indexing that you need.”

In this article, I am going to show you how to setup schema-less database MongoDB with your Rails 5 application. I am using Ubuntu 14.04, Ruby 2.5.1 and Rails 5.2 for this tutorial.

If you have not installed Ruby on Rails MongoDB on your machine, then you first need to install it. Here are the steps.

$ sudo apt-key adv - keyserver hkp://keyserver.ubuntu.com:80 - recv 2930ADAE8CAF5059EE73BB4B58712A2291FA4AD5

$ echo "deb [ arch=amd64 ] https://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.6 multiverse" | sudo tee
/etc/apt/sources.list.d/mongodb-org-3.6.list

$ sudo apt-get update

$ sudo apt-get install -y mongodb-org

I have Ubuntu 14 but if you are using older or newer version then these steps may vary. You can find more details to install Rails MongoDB for these versions Here.

Read More: How to install and use MongoDB with Rails 6

Once you finish the setup, start the MongoDB server. Here are some additional commands for that. To set up MongoDB:

To start MongoDB use:

$ sudo service mongod start

To stop MongoDB use:

$ sudo service mongod stop

To restart MongoDB use:

$ sudo service mongod restart

Let’s move to the Rails part now!

Create a new rails application to use Ruby MongoDB. Make sure that you add –skip-active-record.

$ rails new my_mongo_app --skip-active-record

If you notice, there is no database.yml and no sqlite3 gem is added automatically. Now we have to add two gems which will be a bridge for us between Rails and MongoDB.

Add the following gems to Gemfile.

gem 'mongoid', '~> 6.0'

gem 'bson_ext'

Now do bundle install. Now we have to generate mongoid.yml file which is similar to database.yml file for us.

Run the following command to generate MongoDB configuration files.

rails g mongoid:config

Now update mongoid.yml file based on your MongoDB configurations and create a database with rake db:create Mongoid provides these generators to manage database with these rake tasks.

Read Also : Extracting text from image using Google Cloud vision OCR with Ruby

To add a model you can use scaffold and Mongoid will automatically add a module include Mongoid::Document in that class. Here’s the Rails scaffold example and code:

rails g scaffold article name:string content:text

This will generate all files as we usually have in normal scaffolding and you can access it from /articles.

That’s it. Your Rails application is ready for use with MongoDB. For more details regarding Ruby mongo gem visit, this page If you want to get more Rails specific details, then visit this page.

Top 50 React Native interview questions (with answers) ✔✔

William Jackson — Tue, 10 Aug 2021 18:33:05 +0000

React is one of the most popular JavaScript front-end frameworks on the market today, and its popularity continues to grow. It’s estimated that over 8,000 companies use this JavaScript framework, including big names like Facebook, Instagram, Airbnb, and more. Many companies are looking for talented React developers.

Cracking your React Native interview is essential to landing one of these roles. To help you prepare, we’ve gathered the top 50 React Native interview questions. This guide includes questions and answers. Let’s get started!

We’ll cover:

25 React Native interview questions with answers
25 more interview questions to explore
Next steps

React Native interview questions with answers

1. How is React Native different from ReactJS?

React Native is a JavaScript framework that was developed by Facebook to meet the growing needs of mobile app development. It’s open-source and based on JavaScript. It was designed to build native mobile apps with reusable components. It uses a lot of ReactJS components but implements them in a native way across different devices. It invokes the native rendering APIs in Objective-C (for IOS) and Java (for Android).

ReactJS was also developed by Facebook. It’s an open-source JavaScript library used for developing responsive user interfaces for mobile and web applications. It has a library of reusable components that are meant to help developers build the foundation for their apps.

Let’s take a look at some of their key differences:

Syntax: React Native and ReactJS both use JSX, but ReactJS uses HTML tags, and React Native doesn’t.
Navigation: React Native uses its own built-in navigation library, while ReactJS uses a react-router.
Animation: ReactJS uses CSS animations. React Native uses its animated API.
DOM: ReactJS uses a virtual DOM with a partial refresh. React Native needs to use its native API when rendering UI components.
Usage: ReactJS is mainly used for web app development, while React Native focuses on mobile applications.

2. What is JSX?

JavaScript XML, or JSX, is a XML/HTML template syntax used by React. It extends ECMAScript, which allows XML/HTML-like text to coincide with JavaScript and React code. It allows us to put HTML into JavaScript.

It’s faster than normal JavaScript, makes it easier to create templates, and uses components. It comes with the full power of JavaScript, and you can use it with React to describe what the user interface should look like. Let’s take a look at a Hello World! in JSX:

const element = <h1>Hello World!</h1>;

3. What are the core React Components and what do they do?

The core React components include:

Props: You can use props to pass data to different React components. Props are immutable, which means props can’t change their values.
ScrollView: ScrollView is a scrolling container that’s used to host multiple views. You can use it to render large lists or content.
States: You use states to control components. The state is mutable in React, meaning that it can change the value at any time.
Style: React Native doesn’t require any special syntax for styling. It uses the JavaScript object.
Text: The text components display text in your application. It uses textInput to take input from the user.
View: View is used to build the UI for mobile applications. It’s a place where you can display your content.

4. How do you install and create a React Native application?

Before you begin, make sure you have Node.js and NPM installed on your system.

To install a React Native application, you can use the following command:

$ npm install -g create-react-native-app

To create a React Native project, you can use the following command:

$ create-react-native-app AppName

To navigate in your project, use the following command:

$ cd AppName

And to start your project, run this command:

$ npm start

5. What is Redux and when should you use it?

Redux is a state management tool for JavaScript applications. It helps you write apps that are consistent, apps that can be run in different environments, and apps that are easy to test.

Not all applications need Redux. It’s designed to help you determine when you experience state changes. According to the official Redux documentation, here are some examples of when you’d want to use Redux:

Your app state is updated frequently
You have a large amount of app state and it’s needed in many places within the app
The logic to update your app state is complicated
You want to see how the state is being updated over time
Your app has a medium or large-sized codebase and will be worked on by multiple people

6. What is `state` and how do you use it?

In React Native, state handles data that is changeable. state is mutable, meaning that it can change the value at any time. You should initialize it in the constructor, and then call setState when you want to change it. Let’s look at a code example of how to create a text class component using state data:

import React, {Component} from "react";
import {Text, StyleSheet} from "react-native";

class TextExample extends Component{
    constructor(props){
      super(props);
      this.state = {
          titleText: "What is React Native?",
          bodyText: "React Native is a JavaScript framework."
      };
    }
}

7. How do you debug React apps and what tools can you use?

There are many different ways to do your debugging in React Native applications. Since React Native has both IOS and Android environments, there’s a wide range of different problems you can encounter and a wide range of different tools needed. We’re going to explore a few different ways to debug. Let’s start with outlining the dev menu:

Developer menu

The developer menu includes some different ways to debug and access debugging tools.

Reload: reloads the app
Debug JS Remotely: opens to a JavaScript debugger
Enable Live Reload: causes the app to reload automatically after selecting “Save”
Enable Hot Reloading: watches for changes
Toggle Inspector: toggles the inspector interface so we can inspect UI elements and their properties
Show Perf Monitor: monitors performance

Chrome DevTools

You can use these DevTools to debug React Native apps. You need to make sure that it’s connected to the same WiFi. If you’re using Windows or Linux, press Ctrl + M+, and if you’re using macOS, press Command + R. In the developer menu, you select “Debug JS Remotely” and it will open the default debugger.

React Developer Tools

To use React’s Developer Tools, you have to use the desktop app. These tools allow you to debug React components and styles.

React Native Debugger

If you’re using Redux in your React app, this is a good debugger for you. It’s a desktop app that integrates Redux’s and React’s developer tools in one app.

React Native CLI

You can use the React Native command-line interface to do debugging as well.

8. Build a React app that does nothing except say “Hello World!”

import React from "react";
import { Text, View } from "react-native";

const HelloWorldApp = () => {
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center"
            }}>
            <Text>Hello World!</Text>
        </View>
    )
}
export default HelloWorldApp;

9. Can you write code for Android and IOS in the same codebase?

Yes, you can! React takes care of all of the native component translations.

10. Describe how to re-render a FlatList.

You can re-render a FlatList by using the extraData property. Let’s look at a JavaScript code example:

<FlatList
    data={data}
    style={FlatListstyles}
    extraData={this.state}
    renderItem={this._renderItem}
/>

When we pass extraData={this.state} to the FlatList, we ensure it’ll re-render itself when the selected state changes. Since FlatList is also a PureComponent, we need to set this prop so it knows to re-render items.

Read More : 👉👉 Top 50 React Native interview questions (with answers)