Elewayte API & Backend Integration

1. A Journey into React Forms, APIs, Axios, and
CRUD Operations
Robin Sinha
MERN
Trainer,

2. • Creating Basic Forms in React
• RESTful APIs and CRUD
Operations
• Axios Requests and Frontend
Integration

3. • React forms are an essential part
of web development, allowing
users to input and submit data.
• They provide a way to collect
information from users and
interact with the backend.
• React forms enable creating
dynamic and interactive user
interfaces.

4. • State is managed by React.
• Form input values are stored in the
component's state and updated through
event handlers.
• Provides a single source of truth for form
data.
• Allows for validation and manipulation of
user input.
FORM INPUTS
CONTROLLED
COMPONENTS
• State is managed by the DOM.
• Form input values are accessed directly
from the DOM using refs.
• Typically used when form validation is
not required or handled by external
libraries.
• Can be simpler to implement for basic
forms.
UNCONTROLLED
COMPONENTS

5. <input type = "text"/>
Elewayte
<input
type = "text"
value = "Elewayte"/>
Elewayte
CONTROLLED
COMPONENTS
UNCONTROLLED
COMPONENTS
Example

6. APIs (Application
Programming Interface
APIs are mechanisms that enable
two software components to
communicate with each other
using a set of definitions and
protocols.

7. API call is initiated by the client application via a HTTP
request.
API generates a response containing the requested
data or performs the requested action.
Client processes the API response to extract data or
trigger further actions.

8. RESTful APIs
• REST (Representational State Transfer)
is an architectural style for designing
networked applications.
• RESTful APIs follow the principles of
REST and provide a stateless, scalable,
and uniform approach to API
development.

9. Fetching information from a database or external
service.
Submitting new data or updating existing data.
Connecting with services like payment gateways or
social media platforms.

10. HTTP Request Methods
The Hypertext Transfer Protocol (HTTP) is
designed to enable communications
between clients and servers.
Example: A client (browser) sends an HTTP
request to the server; then the server
returns a response to the client. The
response contains status information
about the request and may also contain
the requested content.

11. • Used for retrieving data from a server.
• Examples: fetching a user's profile, retrieving a list of
products, getting weather data.
• GET requests are typically safe, as they should not
modify server data.
• Parameters can be included in the URL or as query
parameters.
• Response data is returned in the body of the HTTP
response.
• Used for sending data to a server to create or
update resources.
• Examples: submitting a form, creating a new
user, adding a comment.
• POST requests can modify server data.
• Data is sent in the body of the HTTP request,
typically in JSON or form-urlencoded format.
• Response may contain the newly created
resource or a confirmation message.

12. Axios: Making
HTTP Requests
in React

13. It provides a simple and
intuitive API for handling AJAX
requests in React and other
JavaScript frameworks.
Axios is a popular JavaScript
library used for making HTTP
requests from the browser.

14. Axios supports all modern browsers and provides
consistent behavior for HTTP requests.
It offers features like interceptors, automatic JSON
parsing, and error handling.
Axios simplifies the process of making
asynchronous requests and handling responses.

15. IMPLEMENTI
NG THE
CRUD
FUNCTIONALI
TY
CREATE READ UPDATE DELETE
C R U D

16. Axios provides a convenient way to make HTTP
requests and interact with backend APIs to perform
CRUD operations.
Each CRUD operation corresponds to a specific HTTP
method: POST for Create, GET for Read, PUT for Update,
and DELETE for Delete.
Axios allows us to send these HTTP requests to the
appropriate API endpoints.

17. E-commerce
Product
Management
Social Media
Post
Management
Task
Management
Application

18. Front-end development, also known as
web integration or client side development
is the process of using HTML, CSS,
Javascript, and other languages to build
efficient and usable websites, web
applications and mobile apps.
Frontend Integration

19. Breakdown of
frontend
applications into
reusable modules
Implementation of
consistent
communication
patterns
Utilizing version
control systems
Robust
mechanisms to
handle exceptions
gracefully
Comprehensive
documentation for
integration
architecture

20. Example of a simple
frontend application
To-do List
app
Weather
app
Calculator Image
Slider

22. Validate skills, enhance
credibility, Stand out
from the competition,
Open doors to new
opportunities.
It showcases
experience, Highlights
problem-solving
abilities, Helps to
display initiative, build a
portfolio, Demonstrate
teamwork skills
Familiarize yourself
with system design
principles like
scalability, availability,
data consistency, and
security

23. In summary, we covered React forms, APIs, RESTful
APIs, HTTP methods (GET and POST), using Axios in
React, CRUD operations with APIs, and frontend-
backend integration. This knowledge enables you to
build dynamic web applications with seamless data
interaction and user experience.
Conclusion

24. ANY
QUESTIONS.??

25. +91 63834 53564
info@elewayte.com
www.elewayte.com
HSR Layout, Sector - 1, Bengaluru, KA