Reflecting on my first React app

#webdev #beginners #react #css

Introduction

When I first began learning about React I was extremely confused when it came to importing and exporting components, how to structure an App efficiently, and how to decide how many components were needed. However, after creating my first ever React app, I gained some much needed confidence when it came to using this framework.

My React app isn't perfect, and I'm sure that I missed a few mistakes when debugging, however, creating this app made me really excited about the future projects I'll be able to create and work on.

For my Phase-2 assignment, I was tasked with creating a React single page application from scratch which must include:

At least 5 components
3 client-side routes
A json-server to create a RESTful API
Some CSS styling

Creating the App

I decided to create a diary app in which users can type in diary entries and view previous diary entries. For my previous assignment in Phase-1, I created a To-Do List App, so a diary app was a logical step up for me.

I began planning my diary app (in my real-life paper diary nonetheless) and decided upon this course of action:

Initial setup (of React, json-server etc)
Plan Layout (How many components? What components?)
Create components (Just the blueprint of the app)
Implement react router (My favourite part of the app)
Build components (Adding meat to the bone)
Code interactions with json-server
Additional features?

You may be surprised to see that CSS styling is not on this list but that is because I worked on the CSS styling throughout the project, instead of dedicating a set time for it. I also tested and debugged my app throughout its creation.

Overall, I decided that I wanted to create a diary app where users can enter a diary entry with a date, title, and content (obviously), view previous diary entries, and filter previous diary entries by date. My diary app would have 3 main pages: Home, New Diary Entry, and View Diary Entries - and a 4th page nested in View Diary Entries where users can open each diary entry individually to see more information.

My Favourite Part

My favourite thing to work on during the creation of my diary app was the client-side routing.

I used a switch statement in my App component so that my app only renders the first route that matches the URL. I had to add an exact path so that the Home component wasn't displayed whenever / was followed by anything.

function App() {
  return (
    <div>
      <Navbar />
      <Switch>

        <Route exact path="/">
          <Home/>
        </Route>

        <Route path="/newdiaryentry">
          <NewDiaryEntry/>
        </Route>

        <Route path="/viewdiaryentries/:id">
          <EntryDetails />
        </Route>

        <Route path="/viewdiaryentries">
          <ViewDiaryEntries/>
        </Route>

        <Route path="*">
          <h1>404 not found</h1>
        </Route>

      </Switch>
    </div>
  );
}

export default App;

I ensured that my paths reflected what the user would be doing at the moment and that users would be able to input a URL to navigate to the page they need to see.

Things I struggled with

Because of some unforeseen circumstances in my life, I was unable to complete work on the Phase-2 modules for a couple of weeks. This meant that I had to learn some concepts 'on the go' when working on my app and that I had to utilise concepts that hadn't yet solidified in my brain.

For example, the fact that when you update state, it's important to pass in a new object to the set state - therefore, you have to use the spread operator to make a copy of the object. I forgot this fact and so had to tinker a little with my code before I got some things working.

You can see the spread operator in my code in my handleInputChange function in my New Diary Entry component.

 const handleInputChange = (e) => {
        const { name, value } = e.target;
        setEntry(prevEntry => ({
        ...prevEntry, /* Spread operator creates copy of current entry state object and updates property by name with new value */
        [name]: value
    }));

The above function determines what property of the entry object needs to be updated, uses the spread operator to create a copy of the entry state, and updates the property specified by name with the new value.

Additional Features

After meeting the Phase-2 assignment requirements, I decided to add an additional feature: filtering diary entries by date. This is a very simple feature and it was quite easy to add, however, it made my site so much more interesting!

I really would've liked to add more additional features but I was quite pressed on time and wanted to focus more on building the React components and client-side routing.

Despite the fact that this app was for an assignment, I will continue working on it even after submitting. Ideally, I would add more interesting features, for example: a favouriting feature, search bar, more interactive UI, etc.

Conclusion

In conclusion, I am quite happy with the app I have created in the given time frame and I look forward to experimenting more with the React framework.