Final React Project

#reactnative #redux #javascript

I did it - I finished my final project for Flatiron School!! It is a simple Symptom Tracking app built with Ruby on Rails backend and React frontend. This was difficult to do, partially because I found React to be the most challenging thing we've learned in Flatiron, and partially because I was doing it after sustaining an injury (my own symptom journal during this time was the inspiration for the app - I took my little notebook and made it digital!)

Despite React being challenging to learn (in my opinion), it is a lot of fun once you get over the learning curve. React is a JavaScript library and a powerful tool for building SPAs. It relies on state management and rendering it to the DOM. In my app, I also used Redux. Redux is a way to store and interact with state and allow the data to be manipulated and passed between components.

Here are some useful graphics that helped me understand React and Redux:

Here is an example of the way state is used in my project. This is from the Form component:

class SymptomsForm extends Component {
  state = {
    title: "",
    severity: "",
    notes: "",
  };

  handleChange = (e) => {
    const { name, value } = e.target;
    this.setState({
      \[name\]: value,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.addSymptom(this.state);
    this.setState({
      title: "",
      severity: "",
      notes: "",
    });
    if (
      this.state\["title"\] !== "" &&
      this.state\["severity"\] !== "" &&
      this.state\["notes"\] !== ""
    ) {
      this.props.history.push("/");
    }
  };

This is also where Redux comes in:

State is within an object tree inside of store. In order to change that state tree, an action must be used (an object), and that action must be dispatched to the store. Dispatching requires using reducer functions. This is an example from my project of those both look:

The action which creates the symptom after the form is filled out and the user hits submit:

export const addSymptom = (symptom) => {
  return (dispatch) => {
    fetch("http://localhost:3000/symptoms", {
      method: "POST",
      body: JSON.stringify(symptom),
      headers: { "Content-Type": "application/json" },
    })
      .then((res) => {
        if (res.status === 422) {
          alert("Please fill out all fields");
        }
        return res.json();
      })
      .then((symptoms) =>
        dispatch({ type: "ADD\_SYMPTOMS", payload: symptoms })
      );
  };
};

Reducer:

export const symptomsReducer = (state = \[\], action) => {
  switch (action.type) {
    // case 'FETCH\_SYMPTOMS':
    //   return action.payload;
    case 'ADD\_SYMPTOMS':
      return \[...state, action.payload\];
    // case 'DELETE\_SYMPTOM':

    // return \[      
    //   ...state.filter(item => item.id !== action.payload)
    //  \];
    default:
      return state;
  }
};

The switch statement here allows the program to determine which function should be executed based on type. I commented out the other functions to show what the reducer would look like only with the addSymptom action. The reducer sees that the action was taken, and returns the state accordingly. Payload is basically just the data in the action object.

Ultimately, I think React is great tool, and I definitely plan to expand this project. I want to add a user auth, and a heat map calendar like the GitHub one to reflect entries. Stay tuned! For now, here are the links to this project:

API

Client

Top comments (12)

Imran • Aug 12 '21

May I know which tool you used for the gif ?

stuxnat • Aug 12 '21

sure! I embedded it with this:

![gif](GIF URL HERE)

r-julien • Aug 13 '21

I think he was asking for the tool you used to create the gif :-)

Ashley Hindmarsh • Aug 17 '21

As Natalie hasn't responded, I'll suggest that it was an existing stock animated gif (i.imgur.com/jl9CSOO.gif). She didn't actually claim to have created the gif!

Austin Murphy • Aug 13 '21

Great job! I can tell you that React itself was probably not hard to learn, it was probably redux that made it challenging. I also learned redux with React at the same time when I first started using it, and it made things a lot harder. I would say try another state management strategy, like context. It's a lot easier to understand in the beginning.

Redux and the strategy of async messaging is useful to know though, it helped me to understand microservices and automation strategies later on down the road.