Introduction

Now that you’ve learned the fundamentals of React, it’s time to practice and expand your skills by making a React project from scratch! This assignment is open-ended when it comes to the actual content. You are free to create whatever you’d like, as long as it incorporates the requirements listed in these instructions.

Learning Goals

1. Build a React single page application from scratch

Build: In this context, “build” means to create or construct a web application. It involves writing the code, organizing the files and directories, setting up the server, and more.

React: React is a JavaScript library for building user interfaces, primarily for single-page applications. It was developed by Facebook in 2011 to power its news feed feature, and was later open-sourced in 2013. React is now maintained by Facebook and a community of individual developers and companies.

React is used by many large companies and startups alike for its efficient and flexible approach to building user interfaces. Some notable users of React include Facebook (for its news feed and Instagram site), Airbnb, Uber, Netflix, WhatsApp, and more.

The main reasons to not use React could be its learning curve, the need to write JavaScript extensively (even for simple tasks), and its library status (meaning you have to use other libraries to form a complete framework). React also uses a virtual DOM, which can be overkill for simple projects that don’t require a high level of interactivity.

Alternatives to React include Angular, Vue.js, Svelte, and traditional server-side rendered applications. Each of these alternatives have their own strengths and weaknesses, and the choice between them often depends on the specific needs and constraints of the project.

Single Page Application (SPA): A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of the browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app. In an SPA, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. Yes, it can have a navigation bar and take users to various views. It’s called a single page application because it only loads a single HTML page and then updates the body content dynamically as the user interacts with the app.

From Scratch: “From scratch” means starting from the beginning, without the use of any pre-existing elements. In the context of building a React application, it could mean setting up the development environment, creating the file structure, and writing all the code yourself. However, in practice, most developers use tools like “create-react-app” to set up the basic structure of the application, and then build the unique features of their app “from scratch” on top of that foundation.

3. Incorporate client-side routing

Client-side routing is a method for managing navigation in a web application without requiring page reloads from the server. In client-side routing, the route is handled internally by the JavaScript that is already on the page. This means you can move around your application, but the server that served it remains oblivious to the fact that navigation has happened. This is a key aspect of single page applications (SPAs), where the goal is to provide a smooth, app-like user experience. For more details, refer to this FreeCodeCamp article on client-side routing and this tutorial on React Router, a popular library for client-side routing in React.

4. Use data from an API

An API (Application Programming Interface) is a set of rules that allows different software applications to communicate with each other. It defines methods and data formats that a program can use to perform tasks such as reading and writing data, and managing tasks. APIs are used to enable the interaction between different software systems, and can be used to retrieve data from a server, update data on a server, or perform other operations. For more details, refer to this MuleSoft article on what is an API and this tutorial on using APIs with React.

Requirements

• You must make a single page application (only one index.html file) using create-react-app.
• Your app should use at least 5 components in a way that keeps your code well organized.
• There should be at least 3 client-side routes using React Router. Links to an external site. Be sure to include a nav bar or other UI element that allows users to navigate between routes.
• Use a json-server to create a RESTful API for your backend and make both a GET and a POST request to the json server. Use a form to make your post request, specifically a controlled form/component. Additionally, you may choose to incorporate data from an external API but it is not required.
• You should keep your json-server data simple: avoid nested data and associations. You’ll learn how to work with more complex data in the next two phases. Focus on the frontend for this project.
• Upon return of json from your POST request, a state update by a setState function is required!
• Add some styling: you’re encouraged to write your CSS from scratch, either by using styled components or writing CSS files and using id/className to style your elements. You can also incorporate a UI framework (like React Bootstrap, Semantic UI, or Material UI) if you prefer.

        // in App:
        function addMovie(newMovie){
            setMovies([...movies, newMovie]) // Updating movies state.
        }

        //in Form
        const configObj = {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({title: "Titanic"})
        }

        fetch('http://localhost:3000/movies', configObj)
            .then(res => res.json())
            .then(data => addMovie(data)) //THIS STATE UPDATE IS REQUIRED!!!
            // clear form

Remember: responsibility for re-rendering the page to display the updated list of movies should belong to the addMovie function; depending on a subsequent action to load the new data is not best practice.

Brainstorming

Here are some project ideas:

• Movie Database App

This app would use an external API to fetch movie data. It would have components like MovieList, MovieDetail, SearchForm, and AddMovieForm. The app would make GET requests to fetch movies and POST requests to add a movie to a favorites list stored in a json-server.

• Task Tracker App

This app would use a json-server as a backend to store tasks. It would have components like TaskList, TaskDetail, AddTaskForm, and EditTaskForm. The app would make GET requests to fetch tasks and POST requests to add a new task.

• Recipe Finder App

This app would use an external API to fetch recipe data. It would have components like RecipeList, RecipeDetail, SearchForm, and AddRecipeForm. The app would make GET requests to fetch recipes and POST requests to add a recipe to a favorites list stored in a json-server.

• Sacred Texts Reader and Notes App

This app would use multiple external APIs to fetch sacred texts. It would have components like TextList, TextDetail, AddNoteForm, and Navbar. The app would make GET requests to fetch texts and POST requests to add a note to a text stored in a json-server.

Brainstorming further

Sacred Texts Reader and Notebook App

This application would allow users to read sacred texts from various religions and make notes. The app would use at least 5 components (e.g., TextList, TextDetail, AddNoteForm, Navbar, and App). It would have at least 3 routes (e.g., Home, Text Detail, and Add Note). The app would use multiple APIs to fetch the sacred texts, and a json-server to store the user’s notes. It would make both GET requests to the text APIs and GET/POST requests to the json-server. The POST request would be made from a controlled form in the AddNoteForm component. The app would also use state to manage the list of texts and notes, and it would update this state whenever a new note is added.

This idea would provide a good opportunity to practice working with multiple APIs, managing complex state, and building a useful and interactive web application. It would also be a unique project that could stand out in your portfolio.

        // In App.js
        function App() {
            const [texts, setTexts] = useState([]);
            const [notes, setNotes] = useState([]);

            // Fetch texts from API
            useEffect(() => {
                fetch('http://api.example.com/texts')
                    .then(res => res.json())
                    .then(setTexts);
            }, []);

            // Add note
            function addNote(newNote) {
                setNotes([...notes, newNote]);
            }

            // In AddNoteForm.js
            const configObj = {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(newNote)
            }

            fetch('http://localhost:3000/notes', configObj)
                .then(res => res.json())
                .then(addNote);
        }

Potential APIs

Bible

• bible-api.com
• API.Bible
• ESV API ESV.org: ESV API

Quran

• Quran Foundation API Docs – Quran.com: Quran API Documentation
• gadingnst/quran-api – GitHub: gadingnst/quran-api
• QuranJS / API: Introduction: QuranJS
• fawazahmed0/quran-api – GitHub: fawazahmed0/quran-api
• Quran API – Al Quran Cloud: Al Quran Cloud API
• Developers – Quran.com: Quran.com Developers

Hinduism

• Bhagavad Gita API: Bhagavad Gita API

Buddhism

• Buddhist Texts API: Dhammapada – Code Buckets: Buddhist Texts API: Dhammapada
• Aathaapi – Pure Theravada Buddhism Exposed: Aathaapi

Jainism and Zoroastrianism

The search results did not provide direct links to APIs for Jainism and Zoroastrianism sacred texts.

Finding the Best APIs

Bible

• bible-api.com: This API provides a comprehensive set of endpoints for accessing Bible text and related information. It offers various translations and versions of the Bible, including the English Standard Version (ESV).

Quran

• Quran Foundation API Docs – Quran.com: This API provides access to the Quran text, translations, and related information. It offers various endpoints for retrieving specific verses, chapters, and translations.

Hinduism

• Bhagavad Gita API: This API specifically focuses on providing access to the Bhagavad Gita text. It offers endpoints for retrieving verses, chapters, and translations.

Buddhism

• Buddhist Texts API: Dhammapada – Code Buckets: This API focuses on providing access to Buddhist texts, specifically the Dhammapada. It offers endpoints for retrieving verses and translations.

Installation

Follow these steps to create a new React application:

1. Navigate to the directory where you want to create your app.
2. Create a new directory for your app: mkdir sacred-scriptures-app
3. Move into the new directory: cd sacred-scriptures-app
4. Initialize a new React app in the current directory: npx create-react-app .
5. Start the development server: npm start

Now, you should be able to see your new React application by opening http://localhost:3000 in your browser.

Here’s an example of what your terminal might look like during this process:

    dainismichel@z1 phase-2-parallel-project % mkdir sacred-scriptures-app
    dainismichel@z1 phase-2-parallel-project % cd sacred-scriptures-app
    dainismichel@z1 sacred-scriptures-app % npx create-react-app .

    Creating a new React app in /Users/dainismichel/Development/code/phase-2/phase-2-parallel-project/sacred-scriptures-app.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template...

    ...

    Success! Created sacred-scriptures-app at /Users/dainismichel/Development/code/phase-2/phase-2-parallel-project/sacred-scriptures-app
    Inside that directory, you can run several commands:

        npm start
            Starts the development server.

        npm run build
            Bundles the app into static files for production.

        npm test
            Starts the test runner.

        npm run eject
            Removes this tool and copies build dependencies, configuration files
            and scripts into the app directory. If you do this, you can’t go back!

    We suggest that you begin by typing:

        cd /Users/dainismichel/Development/code/phase-2/phase-2-parallel-project/sacred-scriptures-app
        npm start

    Happy hacking!
    dainismichel@z1 sacred-scriptures-app %
                    

Running npm start

After running the command npm start, the application compiled successfully and is now running on a local development server. You can view the application in your web browser at http://localhost:3000 or on your network at the displayed network URL.

Note that this is a development build, which is not optimized for production. To create an optimized production build, you would use the command npm run build.

Here’s an example of what your terminal might display after running npm start:

            Compiled successfully!

            You can now view sacred-scriptures-app in the browser.

            Local:            http://localhost:3000
            On Your Network:  http://192.168.101.2:3000

            Note that the development build is not optimized.
            To create a production build, use npm run build.

            webpack compiled successfully

When you created the React application, several directories and files were created:

• node_modules/: This directory contains all the npm packages that your application depends on.
• public/: This directory contains the static files that your application will serve, such as the index.html file.
• src/: This directory contains the JavaScript and CSS files for your application. This is where you will do most of your work.
• package.json: This file lists the packages your project depends on, specifies versions of a package that your project can use using semantic versioning rules, makes your build reproducible, and therefore easier to share with other developers.
• package-lock.json: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. You won’t change this file directly.

Creating the React App

We are now going to connect to each Sacred Scriptures API one by one, step by step. Here are the APIs we will be working with, in the sequence we will connect to them:

Bible

• bible-api.com: This API provides a comprehensive set of endpoints for accessing Bible text and related information. It offers various translations and versions of the Bible, including the English Standard Version (ESV).

Quran

• Quran Foundation API Docs – Quran.com: This API provides access to the Quran text, translations, and related information. It offers various endpoints for retrieving specific verses, chapters, and translations.

Hinduism

• Bhagavad Gita API: This API specifically focuses on providing access to the Bhagavad Gita text. It offers endpoints for retrieving verses, chapters, and translations.

Buddhism

• Buddhist Texts API: Dhammapada – Code Buckets: This API focuses on providing access to Buddhist texts, specifically the Dhammapada. It offers endpoints for retrieving verses and translations.

Understanding App.js and Index.js

In a React application, App.js and index.js play distinct roles:

App.js

App.js is the main component of your React application. It is often the parent component of other components in your app. This is where you define the structure of your webpage and include other components. It’s like the blueprint of your application’s user interface. If you want to start with a simple “Hello World” test, you would place it in this file. For example:

            import React from 'react';

            function App() {
                return (
                    <div className="App">
                        <p>Hello World</p>
                    </div>
                );
            }

            export default App;
        

Index.js

index.js is the entry point of your React application. It’s where your App.js component is rendered to the DOM using the ReactDOM.render() method. This file also includes the service worker registration for progressive web apps and is where you would set up any necessary providers (like Redux or Context API providers).