Code-Along Tutorial: Coding a Sacred Scriptures App With React

Prerequisites: Make sure to have your React environment set up and working. You can learn how to set up React here:

You can code along with the Sacred Scriptures App, or you can choose your own subject area…the basic mechanics of React coding will stay the same.
<h2>We are seeking to get to Phase 2: An MVP!</h2>
Remember to concentrate on getting “something” working. If your “something” is able to display what the App could become and generate some excitement or anticipation in those who review it, then you’re on the right track!
<h2>The less important stuff</h2>

<code>.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}</code>

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

/* Pagination CSS */
.pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}

.pagination li {
list-style: none;
margin: 0 5px;
}

.pagination a {
display: block;
padding: 8px 16px;
color: #333;
border: 1px solid #ccc;
text-decoration: none;
cursor: pointer;
}

.pagination a:hover {
background-color: #f4f4f4;
}

.pagination .active a {
background-color: #61dafb;
color: #fff;
border-color: #61dafb;
}

.pagination .disabled a {
color: #ccc;
pointer-events: none;
}

/* Quran Pagination CSS */

.quran-pagination {
display: flex;
list-style: none;
padding: 0;
justify-content: center;
}

.quran-pagination li {
margin: 0 5px;
cursor: pointer;
}

.quran-pagination li.active a {
background-color: #007bff;
color: white;
border-radius: 5px;
padding: 5px 10px;
}

.quran-pagination li a {
text-decoration: none;
color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
padding: 5px 10px;
}

.quran-pagination li a:hover {
background-color: #007bff;
color: white;
}

.quran-cover-image {
width: 777px; /* Adjust width to fit within the layout */
border: 1px solid #ccc; /* Adjust border color to match the overall color scheme */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Make the box shadow more subtle */
display: block; /* Ensure the image is displayed as a block element */
margin: 0 auto; /* Center the image horizontally within its container */
}

/* Bible styles */

.bible-submit-button {
padding: 10px 20px;
background-color: #84b2e2;
color: #fff;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.bible-submit-button:hover {
background-color: #3d4043;
}

Regarding styling and CSS, I recommend doing your best to reduce your in-line styling as much as possible and to create bare-bones CSS that will work. My coding style is to make sure things work first, and then consider styling.
<h2>Another Silly Little Detail</h2>
The “boilerplate” React files call the initial app: “React App,” I like personalizing things at least just a bit
<pre><code>

<!– manifest.json provides metadata used when your web app is installed on a user’s mobile device or desktop. See https://developers.google.com/…-manifest/ –>

<!– Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike “/favicon.ico” or “favicon.ico”, “%PUBLIC_URL%/favicon.ico” will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. –>
<noscript>You need to enable JavaScript to run this app.</noscript></code></pre>
<div id=”root”></div>
<pre><code></code></pre>
<!–
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
–>
<pre><code></code></pre>
So you can see, I changed the title to “Sacred Scriptures App.” Can you find that change?

I’ve chosen to develop a Sacred Scriptures App, and I tried to implement a global search from the begining — it was too much — each sacred scripture will receive its own search tool for now, but when this code was rendering it was pretty funny, the button shows a “coming soon message.”

<code>// Filenane: Search.jsx</code>

import React, { useState } from ‘react’;

function Search() {
const [searchTerm, setSearchTerm] = useState(”);
const [message, setMessage] = useState(”);

const handleSearch = (event) =&gt; {
event.preventDefault();
setMessage(‘Coming soon…’);
setTimeout(() =&gt; setMessage(”), 2000); // Hide the message after 2 seconds
};

return (
<div>
<h2>Stretch Goal Global Search</h2>
<form><input type=”text” value=”{searchTerm}” /> setSearchTerm(e.target.value)}
placeholder=”Functionality Soon To Come…”
/&gt;
<button type=”submit”>Search</button>
{message}</form></div>
);
}

export default Search;

Now, I am a very big fan of putting the filename as a comment in the first line of code. For me, it is settling, I don’t have to look at the application tab, and I know what file I am in…

Kinda neat how the “Coming soon…” message appears and then disappears after 2 seconds.

But that functionality doesn’t do much, so it is not in my current very very minimal MVP.

Next we will look at the basic components, the react router, and using an external API.

Before that, I made

https://github.com/dainiswmich…ptures-app

So that we can save our work as we go.