You can configure JEST with React Apps in few simple steps. Let’s follow these steps and get JEST ready into our React Apps.
Step 1:
You can setup your React App the way you want to with all your files residing under the src folder as in this project: react-redux-boilerplate.
All the dependencies for this app is present under in package.json.
Step 2:
Setup your .babelrc file so that you can work on JEST with ES6 as follows
{
"presets": ["react", "env", "stage-1"]
}
This is a brief post about getting started with React Native in iOS. I will walk you through the steps for running your first react native app in an iOS simulator. These steps are also present directly on react native’s official website. The reason of this post is that I will be using this post as a part of a guide that I am looking forward to make for developing an app from scratch. I shall put down all the obstacles I face with the solutions so that it makes it easier for you guys. Now let’s get started.
Development OS: macOS
Target OS: iOS
Step 1- Installing dependencies
Run the following commands in the terminal one after the other:
brew install node
npm install -g react-native-cli
Step 2- Installing XCode
The best way to install Xcode is via the Mac App Store. Once you install Xcode, it will also install the iOS Simulator and all the necessary tools to build your iOS app.
If you have already installed Xcode on your system, make sure it is version 8 or higher.
Step 3- Installing XCode command line tools
Once you are done installing XCode, open it and choose ‘Preferences’ from the XCode menu. Go to Locations and then from the Command Line tools dropdown, select the latest XCode version and install it.
Step 4 – Creating a new Application
Let’s create an application called TestApp. In the terminal, navigate to the desired location and run the following command:
react-native init TestApp
The above command will create a new react native application for you named as TestApp.
Step 5 – Running your application
cd TestApp
react-native run-ios
This will load your iOS simulator shortly and will show the following default screen.
That’s it. You are good to go, your first react-native iOS app is successfully running on a simulator now. Stay connected for more.
Recently, while working with React I came across this scalable ‘Component’ folder structure and since then my app is well organised and looks un-cluttered. Let’s consider we have different components in our app as follows:
| – src/
| – App.js
| – SearchLoader.js
| – SearchInput.js
| – SearchError.js
| – Button.js
| – index.js
| – TextField.js
The major problem I faced in the above directory structure is that as and when I kept adding components in my app, my src folder kept filling up. This created an issue when I had to find files related to a particular component. This gave me a hard time to find what I was looking for and cluttered my root folder. So I found the following approach which made it easy to organise my components.
Introduction
The basic definition of Web scraping would be ‘Web Data Extraction, it is a technique to extract large amounts of data from websites and the extracted data is usually stored on a local computer in different file formats.’ The purpose of such extraction might be consuming the data in any application, to analyze or study the extracted data for competitive purposes. I happen to engage myself in web scraping as I am working on an application where I had this requirement of fetching all my blog posts from both my WordPress sites. So I ended up with web scraping which suggested me that I can scrape data from any website and meet my requirements. This is a very brief article to let your hands on web scraping. At the end of this tutorial, you should be able to go ahead and scrape/ extract data from any website.
Here, I will be scraping the home page of both my WordPress sites and extract metadata such as the post title and post URL.
Hi there, now that React JS has been around for a quite long time with its marvelous performance and one this is one of the reasons that today it is been used on a wide basis to develop Single Page Applications. It became more exciting with the coming of React Native to develop your mobile apps. As you know, React Native lets you build your app in JavaScript. And yes, this is a complete mobile app, not some hybrid app or mobile web app.
The reason I am writing this article is that, as a tech enthusiast with a curious mind, I started to learn React Native by building a small app. It is a new technology, it was a bit difficult at the beginning to set up the entire environment and get my app running. So for the new bees who are trying their hands on, in this new technology, I would like to share some steps to help you set up your dev environment and successfully run your first React Native app. This entire article will be a very basic to the point with reference to the Android app.Read More »
Node.js seems a bit frightening to beginners, but it is not complicated at all. Here is a small tutorial which will help you to build your own node.js API within a fraction of an hour. This is a very quick and simple guide to Node.js, express framework and MongoDB.
You can access the entire code on GithHub.
Before you start building your API, you should know the basics of JavaScript, CRUD operations and REST APIs. Here you will be creating an API for a simple todo application where you will perform CRUD operations like create, read, update and delete on your todos.Read More »
In this article, we will learn about JavaScript Objects. But before that, let us recall all the data types in JavaScript as Object is one of the data types.
The latest ECMAScript standard defines seven data types in JavaScript:
Being a developer, if you plan to be a JavaScript Professional, you must know the main Javascript concepts. In this blog, I will start with the basics of Javascript by introducing Javascript and discussing some of its fundamental concepts.
JavaScript is a cross-platform, object-oriented scripting language with can be used within the web browsers to create interactive effects. It is an object-oriented language but not class based as compared to other conventional languages like JAVA. It is a small and lightweight language.Read More »
“ES6” which stands for ECMAScript 2015(6th Edition) is the current version of the ECMAScript Language Specification standard. It is the most recent update to Javascript and it has brought many changes to the language which makes it simpler to use and understand. As it is the latest update, you might want to use it in your browsers because obviously you want to be updated with the latest trends.
In the previous article of gulp i.e. Part 1, we learned to write a simple task and run it. Now let’s look more into gulp and write some tasks.
Gulp tasks are a bit more complex than the simple ‘hello’ task. They contain two additional gulp methods and a variety of gulp plugins which can be found at http://gulpjs.com/plugins/
Nikita Jajodia 