The content of this blog is related to the React library or framework and its different abilities. Writing about these concepts has helped me to learn these topics with greater clarity!
React is a library/framework that is based on JavaScript and HTML. It uses JSX (JavaScript XML) and the different parts of the web application are typically distributed between components. Facebook created JavaScript to work seamlessly with React. The sum of these components are used to create a fully functioning web application. A component is a function that takes in raw data (typically props) and it returns a user interface. Here is an example of what a component in React might look like:
React uses declarative programming, which means that the developer describes the actions that they want the program to perform, and the program determines the end result of the program. In comparison to vanilla JavaScript which uses imperative programming, the developer is required to be very explicit when describing the actions of the application and how it performs those actions.
As I mentioned earlier, a React component is a function that takes props as an input and returns JSX. Props are a way to make components dynamic and reusable. This is done by passing props from parent to child components. Props can be any data type including strings, numbers, booleans, objects, functions, etc. The following code excerpt shows how props are passed from Parent to Child components (from the App to Toy Container) return statement:
In this example, toys is an object, and handleDeleteToy and onLikesIncrease are both functions. The value of props are enclosed in JSX curly braces.
Child components can accept props as objects when inputted as an argument in the component function. See in the excerpt below how the ToyContainer accepts toys, handleDeleteToy and onLikesIncrease as arguments:
From here, ToyContainer can either use the props itself or pass them down to other child components. The props arguments are defined as objects that React passes to the function when called. It will use whatever attributes we had to the JSX component as key-value pairs on that props object. It is important to remember that props are managed across components.
React has also the ability to destructure props. This capability allows us to extract multiple properties from an object. Before this destructuring ability was created in ES2015 with React, accessing the properties of an object was typically done with object literal notation.
Here is an example where the variable socialLinks is passed down to a child Component (SocialMedia) as a prop and in the SocialMedia component, dot notation is used to access the keys of the object:
Since socialLinks is an object in this example, destructuring can be applied to make the JSX simplified and cleaner:
One of the most critical elements of creating dynamic React applications is to introduce component state. In React, state is the data that is dynamic in your component. It is the data that changes as a user interacts with an application. Props are something that immutable, but state is something that is mutable. State allows us to maintain and update information within a component that does not require sending updated information from a parent component. Changing state of data can be accomplished by importing the useState hook into a component. The useState hook is essentially a built-in function. It is important to remember that state is managed within components.
This is an example of how the useState hook is imported into a component and how count state could be set up:
Inside the useState invocation within the component function requires the initial value of state to be defined. In this case a counter is set to 0. The state is defined as count, and the setter function is setCount. The useState hook will return a new array when state is invoked which has two variables, the count (current value) and setCount (function responsible for updating state).
Whenever it's necessary to update the counter in state, the setter function needs to be invoked. See the invocation of the setter function in the increment function below:
Here when the button is clicked (using an onClick event handler), it will increment the count based on our setter function and it will re-render the component. These are the basics of implementing state in React. Creating state can be implemented in all kinds of ways to represent changing data in applications.
Another aspect for a developer to use React is by using controlled forms. A controlled form is a form whose input values are derived from the state. This is an important quality of using forms with React because component state is always in sync with the DOM.
In order to make a controlled form, the following items are required:
- State needs to be created for the input to manage the user’s input value.
- An onChange event listener needs to be attached to the input to monitor the user’s behavior and update state as they interact with the field.
- A value attribute must correspond to a key in the state.
- An onSubmit listener must be added to the form tag
The image below shows an example of a Controlled Form entitled with the EmperorForm component. In this component, the state that is defined includes: name, reign, image, and info. The onChange event listener was included in the input tags where the form is updating the event.target.value inputted by the user. In other words, state is being updated by the user when inputting the values of the form. Each of the values in the four input fields correspond to each state defined. Lastly, the onSubmit listener was added to the form tag and included its own callback function of handleSubmit. This callback function defines the formData inputs of the emperor form. It also includes the clearing of the form values upon successful submission of the form for the four different state setter functions. For example, the clearing of the emperor name input is accomplished by this line of code: setName(“”). The handleSubmit function in this example also includes the form POST request of this formData information. The fetch request requires the callback function addEmperor to update the state and send it to the backend.
Another feature of React is client-side routing. This type of routing allows a developer to separate components on different “pages” in a single page application. Each page has its own distinct URL in client-side routing. The purpose of client-side routing is to handle all routing logic with JavaScript, without making any additional GET requests. Only the original GET request needs to be loaded from the server when using client-side routing.
To implement routing, some of these steps need to occur: installing react-router-dom, importing createBrowserrouter and RouterProvider from react-router-dom, creating the routes of the single page application, and making sure they have been initialized. See the code examples below of importing and providing routes and what that looks like in React:
React Router also provides two components that can be implemented to allow users to navigate each page. These are Link and NavLink. They function to render an tag to the DOM, which changes the
URL and tells React Router to re-render the page. This displays the new component. NavLink is used commonly to create navigation bars. These bars can be selected to navigate users to the particular link selected.
Here is example code of what using NavLink looks like to setup and later what renders on the single page application on the DOM for easy navigation between pages for the user:
One important feature to highlight on the routes page below is the path for the EmperorProfile component.
The EmperorProfile component in this piece of code has the following path: “/emperorprofile/:id”. This is significant because a URL parameter has been created, which is a segment of our URL that can change and contains data we can use in our components. This makes the route dynamic by using a URL parameter. The page will be the same that is displayed, but the data contained on the page will be dynamic based on what the user selects.
These are some of the important concepts I learned during the React phase. Hope you enjoy reading this blog post and happy coding!
Top comments (0)