RVS COLLEGE OF ARTS AND SCIENCE - AUTONOMOUS

Re-accredited by NAAC with A+ Grade

242,Trichy Road, Sulur
Syllabus

Degree : PG Report as : 07-May-2024 09:51

Departmen : DEPARTMENT OF COMPUTER APPLICATIONS (MCA) Batch : 2023-2024

Course ELECTIVE II: MOBILE APP DEVELOPMENT USING REACT

Title
: Course Code : 33Q
NATIVE
Semester :3 Course Group : EL
Teaching Scheme in Hrs : 4 : 2 : 0 Credits :6
Map Code : D-THEORY - APPLICATION TL.Contact : 90
Theory CIA : 25 Theory SEE # : 75
Practical : -- Practical SEE : --
Programme : MCA # - Semester End

Course Outcomes
CO1 : Illustrate Props and State in React to develop an App and Use React Native to develop hybrid App

CO2 : Use App with lists, user inputs and debugging

CO3 : Demonstrate Navigation, Data and Map in App development
CO4 : Use Redux, Async Redux and Tools for managing state of App
CO5 : Apply Performance to App , deploy and testing App

UNIT 1 : ( LECTURE HOURS - 18 )

REACT, PROPS, STATE : Classes (Classes vs instances, Methods vs static methods vs properties, new,
constructor, extends, super) React, Imperative vs Declarative (Examples) Writing React (JSX,Components are just
functions) Props (Passed as an object to a component and used to compute the returned node) State (Adds
internally-managed configuration for a component) REACT NATIVE : How does React Native work? (JavaScript is
bundled, Separate threads for UI, layout and JavaScript) Differences between RN and Web (Base components, Style)
Event Handling and Components (React Native handlers often receive different arguments) Stateless Functional
Component (SFC) (Simplest component: use when you don’t need state) React.Component and Component
Lifecycle (Have instances, Maintain their own state, Have lifecycle methods that are automatically invoked) Mount,
Update, and Unmount (methods) WRITING REACT NATIVE : Expo (The fastest way to build an app) Import/Export
(Components are great for simplifying code) PropTypes (React can validate the types of component props at runtime)
How to Read Docs (required steps)

UNIT 2 : ( LECTURE HOURS - 18 )

LISTS, USER INPUT : Lists (ScrollView, ListView (deprecated),FlatList, SectionList) User Input (Controlled vs
uncontrolled components) USER INPUT, DEBUGGING : Handling multiple inputs (
exists in HTML, but not in React Native) Validating Input (Conditionally set state based on input value, Validate form
before submitting, Validate form after changing single input value) Keyboard Avoiding View (Native component to
handle avoiding the virtual keyboard, Good for simple/short forms) Debugging (React errors/warnings, Chrome
Developer Tools (devtools), React Native Inspector, react-devtools) External Libraries (Install using npm install
,Import into your project)

UNIT 3 : ( LECTURE HOURS - 18 )

NAVIGATION USING THE NAVIGATOR : React Navigation 5.0 (Introduction) Installing react navigation (Example)
The react native stack navigator (Example) React Native Navigation Examples (Using stack navigator to navigate
between the screen components, Tab Navigation, Using Drawer Navigation) DATA : Introduction (Examples) API (A
defined set of ways with which a resource can be interacted) Making Network Requests (fetch()) Promises (writing
asynchronous, non-blocking code, chaining callbacks and/or error handlers) Async/Await (writing async code as if it

Page 1 of 2
were synchronous) Transforming Data and Authentication (What is transformation? And What is Authentication?)
HTTP Methods and Response Codes (get() and post(), codes) MAPS AND LOCATION (EXPO COMPONENTS) :
Introduction (MapView, Location, Geocoding) Text or Delete (Contacts) A Compass (Magnetometer,DeviceMotion) A
Multimedia Board (Video,Audio, Fonts) A Photo Editor (ImagePicker,Simple Camera,Camera View, GestureHandler)

UNIT 4 : ( LECTURE HOURS - 18 )

REDUX : Other APIs (Push Notifications,Calendar, Gyroscope, Accelerometer, Pedometer) Scaling Complexity (Our
apps have been relatively simple, but we’re already starting to see bugs related to app complexity) Flux (An
application architecture for React utilizing a unidirectional data flow) Redux:Introduction (A data management library
inspired by Flux, Single source of truth for data) Reducer (Takes the previous state and an update and applies the
update, Should be a pure function) Store (Responsible for maintaining state, Exposes getter via getState()) Actions
(An action is a piece of data that contains the information required to make a state update) react-redux (React
bindings for redux, Provider gives children access to our redux store) ASYNC REDUX, TOOLS : Supporting Async
Requests (Where do we want to add this support? How do we change our API?) Redux Middleware (This allows us to
extend redux without having to touch the implementation, Any function with this prototype can be middleware)
Persisting State (redux-persist) Container vs Presentational Components (As an application grows in size and
complexity, not all components need to be aware of application state) Do I need Redux? (Redux helps apps scale,
but does add complexity, Sometimes, the complexity overhead isn’t worth it) JavaScript Tools (ESLint and Prettier)

UNIT 5 : ( LECTURE HOURS - 18 )

PERFORMANCE : Introduction (How quickly and efficiently something works,Performance optimization is the process
of making something work as efficiently as possible) Trade-Offs (Performance optimization usually comes at a
complexity cost) Measuring Performance (Be mindful of the environment setting of your application, React Native Perf
Monitor,Chrome Performance Profiler) Common Inefficiencies (Rerendering too often, Unnecessarily changing props,
Unnecessary logic in mount/update) Animations (Animations require both the JS and UI threads) DEPLOYING,
TESTING : Deploying (Deploy to the appropriate store by building the app and uploading it to the store, Set the
correct metadata in app.json,Build the app using exp,Upload to the appropriate store,Deploy new JS by republishing
from the XDE or exp) Testing (Test Pyramid,Unit Tests) Test Pyramid (Methodology for determining test
scale/granularity, Unit tests, Integration/Service tests, UI/End-to-end tests) Jest (Testing Redux Actions,Testing Async
Redux Actions) Code Coverage (Metric for tracking how well-tested an application, Get coverage report by passing --
coverage)

WEBSITES

https://courses.edx.org/courses/course-v1:HarvardX+CS50M+Mobile/course/

https://www.udemy.com/react-native-advanced/

https://www.udemy.com/react-native-the-practical-guide/

TEXTBOOKS
"Mastering React Native- A Beginners Guide" by Sufyan bin Uzayr CRC Press (Taylor & Francis Group) First Edition,
2023
REFERENCE BOOKS

https://courses.edx.org/courses/course-v1:HarvardX+CS50M+Mobile/course/

--- End of Statement ---

Page 2 of 2