Contents
Introduction
As we dive further into web development, we begin to learn about React by Facebook. When beginners start coding, they do so imperatively but React approaches coding declaratively. These are different programming paradigms that change the way programmers code.
Imperative programming is when the programmer explicitly specifies each step. Declarative programming focuses on the task that needs to be done and does not specify how it is achieved. In other words, imperative programming is described as “do this then do that,” whereas declarative programming is described as “tell me what you want and not how to get there.”
There are many benefits to declarative programming:
- It is easier to scale and incorporate into larger programs.
- It is easier to debug and maintain the code.
Components
In order to program declaratively, React takes advantage of components that each have a specific role in the overall application.
Components are different groups of code that work together to create a functional React application. For example, one component can take care of the main menu, while another renders from a database API. By separating these “building blocks” of code, programmers can work on specific functions of the app more easily than they could for a monolithic block of code.
Components are structured in a hierarchy that can be illustrated in a wireframe. Here is an example of a component hierarchy:
In the example above, the App.js component is at the top-level. Other common components are the NavBar.js (containing code to render the navigation menu) and Home.js components (containing code to display the Home page). The remaining components work together in tandem to create the functionality of the application.
The lines between the components indicate how they are connected. For example, the NavBar.js and Home.js components are child components of App.js and sibling components to each other. RecipeItem.js is a child component of RecipesList.js, which is another child component of App.js. These relationships illustrate how information is transferred from component to component.
React components require that we import some crucial modules from a library of dependencies.
Dependencies are a collection of pre-written code modules that the program needs to function properly.
To initialize React, we need to import the React and ReactDOM modules from the react and react-dom dependencies, respectively. ReactDOM is invoked with two arguments. The first is the React component being rendered and the second is the location to render it at. This can be done in index.js. We can think of this as our starting file.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById(‘root’));
App.js is the top-level component from our example above. From there, all the other components are called in the order shown in the hierarchy.
Components also require an export statement to be able to transfer data to either its parent or child component.
A typical export statement in most components is placed at the bottom of the .js file.
export default App;
Think of the export default line as a return statement for the component itself. Speaking of return statements, what do these components return?
JSX
When we code imperatively, we must make all the changes in the HTML file ourselves. Whenever we need to manipulate the DOM (Document Object Model), we must write specific code step by step to detail it out. For example, we may need to create a new element, update that new element then finally append it to the DOM to see changes in our browser. With React, we code declaratively meaning we do not need to write all that out. Instead, we can tell React to change the HTML by returning JSX.
JSX (JavaScript XML) is a JavaScript extension that allows us to write HTML-like code in our JavaScript file. This opens the door to directly manipulating our DOM, without having to tell it to create, update and append.
Each component is essentially a function that returns some JSX. This JSX is rendered on a virtual DOM, through the return and export default statements, whenever the component is called. By going through a virtual DOM, React calculates the minimum number of changes needed to update the real DOM. This results in a faster and more efficient render. Here is a simple example:
import React from "react";
function Home() {
const name = "John";
return (
<div id="home">
<h1>Welcome to Recipe Journal!</h1>
<h3>Click on "Recipes" to see a list of recipes.</h3>
<h3>Click on "Add Recipe" to add a new recipe to the list.</h3>
<h3>Let's start cooking, {name}!</h3>
</div>
);
}
export default Home;
It is convention to capitalize the names of functions that represent components. This helps to distinguish them from regular HTML elements and other functions in your code. It is important to remember to make sure that the function returns only one element. In our example, we return one <div id=”home”></div> with multiple elements inside.
Whenever we want to code JSX, we use parenthesis around it. If we need to go back to JavaScript inside our JSX, we need to use curly brackets. In our example, we need access to the variable name inside our last <h3> tag so we encase {name} in curly brackets.
props
If we want to make our code more dynamic, we introduce the use of props.
props(short for properties) are a tool for passing information from a parent to child component.
When a parent component renders a child component, it can pass data to the child component by providing it as props. The child component can then access and use this data as needed.
When we want to run a component, we go to its parent component and invoke it. To do this, we must import the child component, like we would with any necessary modules.
import React from "react";
import RecipeItem from "./RecipeItem";
function RecipesList() {
const currentRecipe = {
name: "Pizza",
servings: 3
}
return (
<div>
<RecipeItem recipe={currentRecipe} />
</div>
);
}
export default RecipesList;
We define the currentRecipe object with two keys. In our return statement, we call the RecipeItem.js component and pass down currentRecipe as recipe. Think of these as arguments for RecipeItem.js. Now let’s look at RecipeItem.
import React from "react";
function RecipeItem({ recipe }) {
return (
<div className="item">
<h3>{recipe.name}</h3>
<h3>{recipe.servings}</h3>
</div>
);
}
export default RecipeItem;
Inside the parameter, we pass the prop as recipe, making sure to destructure it correctly by using curly brackets around it. This gives us access to that object, where we can grab the values of its keys as we would with any object.
Conclusion
React is a popular JavaScript library for building user interfaces for all kinds of different web and mobile applications. It uses declarative programming that allows us, as programmers, to describe what we want in our code without explaining how to get there. It makes use of components and props to return JSX in a way that makes it easy to manipulate the DOM via virtual DOM. Because of its efficiency, it has garnered a large active community and ecosystem, making it very appealing for future software developers.
This guide is meant to serve as a learning tool for people who are just starting to learn Javascript. Please read from the official React website for further detail. Thank you for reading and if you have any questions or concerns about some of the material mentioned in this guide, please do not hesitate to contact me at jjpark987@gmail.com.
Top comments (0)