React Insights: a simple ‘Blogs Application’ from Scratch (Part-1)
Creating with Ease: A Beginner’s guide to simple ‘React Application’.
Note: This series is divided into multiple parts & logically divided into sections with a specific objective. Feel free to skip to specific section or follow along step by step to craft your own React application from scratch.
Links to every other section of this series>
Part 1: React Environment setup ||| Part 2: How to list Data on webpage with React ||| Part 3: How to fetch data using React ||| Part 4: How to use Routing capabilities in React ||| Part 5: How to use useParams hook to load page based on URL ||| Part 6: How to use form fields on React application ||| Part7: How to perform delete action in React
How to create a React application
As you learn React, let’s simplify things. Join in building a basic React application from scratch, without getting lost in documentation and tutorials.
The objective is to develop a web application that displays ‘Blog Listings’ by making server calls to fetch, create, list & delete newly added blogs. We will route between pages without making hefty server calls, & taking advantage of Single Pane of Glass (SPA) applications. Throughout the process, we will implement hooks, specifically useState and useEffect, gaining insights into their practical use in managing state and handling side effects in component renderings within real web applications.
React revolves around the concept of reusable code and components, aiming to modularize, maintain, and optimize the codebase. As we craft basic layout components to structure our web app, we’ll additionally develop custom hooks to encapsulate repetitive actions managed by React hooks, enhancing the componentization of our project.
Although it might feel like a lot, with the step-by-step guide & logical division of the application in several parts, I strongly hope it will become more accessible to comprehend and demystify this straightforward application.
This article doesn’t aim to instruct React, as there are abundant resources from esteemed authors available for that purpose. Instead, the goal is to kickstart the process of creating a simple application. The focus is on applying the knowledge, experiencing the creation of a functional prototype for a web application using React hooks and components, and feeling a sense of accomplishment.
Basics & Environment Setup
React components are authored in JSX templates, but browsers execute only JavaScript. Therefore, it’s necessary to transpile our project’s HTML to render on the DOM. This ensures that when the application is loaded in the browser, the browser interprets and serves the content in the appropriate language.
To initiate the transpilation process for the project, it’s necessary to download a Node server. This server plays a crucial role in transpiling the project files into JavaScript and bundling them for optimal execution.
Ensure that Node is installed on your system. To verify its presence, execute ‘node -v’ in the terminal. If Node is installed, you will see the version number as the output. We require version 5.x or higher to utilize the accompanying npx feature available with Node 5.x and above.
If Node is not installed on your system, please use the official link provided below to download and install it.
Bootstrap the react application
Setting up a React project can be approached in various ways, and one of the easiest methods is to start with ‘Create React App’. This tool comes preloaded with all the essential files, scripts, and configuration files such as Babel and Webpack.
Simple first steps are — open terminal, navigate in to directory, where we want to setup the react project. Follow the below command, this will create the react project in your system, if prompted for installation, agree to prompt.
Once installed, there is a prompt indicating how the project can be compiled & transpired
Go to the recently created React project and examine the file structure. The “node_modules” directory houses the project dependencies, which are installed from a public artifact repository. The determination of which dependencies to install and their precise versions is directly influenced by the “package.json” file. Any newly installed package will be reflected with an entry in the “node_modules” directory.
The “public” folder is a repository for files accessible to the browser. It includes the pivotal “index.html” set as the starting point in the web server configuration for initializing the web application in the browser. The entire React code is injected into this file, and React takes charge of managing all subsequent content loading within “index.html” exemplifying the principles of a ‘Single-Page Application’.
The Src folder is where all the source files resides, including JSX and CSS. These files are later transpiled via Babel to create the JavaScript bundle that the browser can understand.
Preview the application in browser
The next step involves previewing the application in the browser. To do this, run the script provided within the project scaffolding, as specified in the package.json file.
Running this command will effectively initiate the development server on your terminal, serving the React application by default on port 3000. If port 3000 is already occupied, you can choose to start the local server with an alternative port and load the React application accordingly.
The content displayed in the browser originates from the “App.js” file, which is rendered on the root element in the DOM as specified in the “index.html” file. Upon inspecting the page, you’ll observe that all the content is contained within the root element.
Make modifications
To start, let’s make the necessary edits in the required file and observe the impact in the browser.
“App.js” serves as the root component of the React application, acting as the top-level file under which all components are nested. We can modify the content within the “return” function of “App.js” with different text. The code within the “return” function is referred to as JSX template.
Changes will automatically load in the browser once the file is saved, thanks to the local development environment server’s auto-reload feature. After making the modifications, check the browser to see the reflection of the new changes.
Now that the React project is installed and configured, let’s dive into the exciting phase of crafting an actual web application. This application will have the capability to list blogs, display blog details, add new blogs, and delete existing ones.
Design Layout: as a side note, lets quickly review how typically the web pages are layout in broad areas on a application page
Every application is shaped by creating a web layout that is both highly usable and user-friendly. This allows users to navigate the page effortlessly and take actions, enabling them to access information and values of interest. A well-designed web application has the ability to streamline various actions and values without overwhelming the user, as long as it is structured thoughtfully with meaningful layout orientations.
The key components of layout design includes Header/Navbar, Sidebar/Left Navigation, Content/Body/Main/Home, and Footer.
As an example for a Blog application, we’ll exclusively utilize the Header and Main area to structure the page. Depending on requirements, additional components can be developed, allowing for further enhancement of the application.
Create React Components
We’ll develop a <Navbar> component to serve as the top header, and within it, nest additional components or JSX to incorporate action buttons and the application’s title.
The Body area will be utilized to showcase lists and details of each blog. To achieve this, we must create two more components that should be nested under the root component, App.js. <Home> & <Navbar> are two components we will add.
Within the Navbar, we’ve included anchor links to load pages and established a route for creating a ‘New blog’. Currently, this triggers a server call, although the server isn’t defined yet. Our objective, however, is to reduce server calls for page reloads. To achieve this, we’ll employ react-router for routing and page loading.
Nest both the components inside App.js
The outcome will resemble the snapshot below, appearing like a skeleton lacking the skin. To address this, we will utilize CSS properties to add colors, margins, and other styling elements.
This can be done by adding CSS classes and definitions in the index.css file, which is already imported in the index.js file. In this example application, we will integrate all the stylings in index.css. However, it is generally considered a best practice to isolate and organize CSS files based on components, adhering to the modularity approach in React.
This will arrange the DOM elements in the browser, providing the visual appearance and experience of an application.
Learnings so far
- Set up React application from scratch using the ‘Create React App’
- Layout the web page structure
- Create components for page sections, style them
Conclusion
Embarking on a React app doesn’t have to be daunting, especially when you know the exact steps to kickstart the process. This is how we create a web application using Create React App: commence the local development environment server, make necessary adjustments, and load the application in the browser.
Looking ahead, our next endeavor involves updating the files to integrate React hooks for state management. Additionally, we’ll explore the fundamentals of rendering a data listing on the webpage, focusing on blogs in our case.
Hope this helps!!! Please check out the rest of the parts in the series.