React-Native Workshop 2019

React Native is an open-source mobile application framework that uses JavaScript to develop mobile applications for iOS and Android. The three-day workshop aimed at making five different applications like QR Scanner, TODO App, etc using React Native and various other softwares. The workshop was conducted by the Infotech Head of IETE-SF, Rushabh Shroff. He is adept in various programming languages and has garnered a lot of experience in the same.

Screenshot 2019-10-10 at 3.01.23 PM

Conducted by: Rushabh Shroff

Date: 8 th,9th,10th September, 2019.

Participants: 10-15

Objectives of the activity:

● To learn how to develop various mobile applications using React Native.

● To help students keep track of the evolving technology and incorporate the same in their future endeavours.

● To learn the basics of JavaScript.

Day 1: The workshop commenced with an introduction to React Native and its relevance in today’s age. Along with that, an overview was also given about the various topics that would be covered during the course of the workshop. Rushabh Shroff started off by asking the students to download certain softwares like node.js, visual studio code and Android Studio. These softwares were used to develop the mobile applications. He also instructed the students to use command prompt in order to access these softwares. After downloading all the softwares and initialising them, he moved on to the first Application- QR Scanner. To make the QR Scanner, one can connect their own mobile phone or can download any virtual device from Android Studio. In order to write the code for QR Scanner he used the Visual Studio Code which serves as a text editor. He then explained the basic syntax used in JavaScript used to design or style the mobile application i.e. how to write a text or to change the background of the viewing screen. To access the camera for QR Scanner a package is present on the React Native site. Although this package had a lot of errors, the students were assisted while correcting the errors in the code as well as explained the logic behind the same. After setting up the camera, he inserted a scan icon between the camera and the QR code. The set-up was now complete and the QR Scanner was successful in reading the QR codes.

Day 2: Using the same softwares that had been installed on Day 1, he started with a new applicationNotes. This project aimed at adding all the basic functionalities of the Notes application. The participants were then taught about “Navigators” in React Native and how to implement them. Navigators basically handle the transition between different scenes in your application. The drawer navigator and stack navigator majorly helped in bringing the Notes App together. The students also did some styling of this app by using the functions taught yesterday. They also handled the function of adding a new note.

Day 3: The last day of the workshop started by an introduction to “Promise” in React Native. He taught them the syntax of Promise and how to use them while building an application. Using Promise, the notes app was completed by adding the deleting and saving functionalities to the code. Later, he started with the courses app where he taught the students how to embed YouTube videos of various courses into an app. This app also handled the list of courses and videos. Then the students also learnt about APIs in React. Towards the end, the basics of web scraping including how to use web scraping to develop an app, was also covered.

Outcomes: ● The students learnt the syntax of JavaScript. ● The students understood the logic behind the codes used to develop the various applications. ● The students were successful in formulating the applications with assistance from the expert.

Photograph of the Event:

Screenshot 2019-10-10 at 3.07.01 PM.png