ReactJS

What is React?

History Theory Important Concepts
  • Developed by a software engineer named Jordan Walke
  • Was first deployed on facebook's news feed in 2011
  • Four years later the cross platform mobile framework React Native was released
  • Today popular sites like netflix, instagram, dropbox, khan academy, etc. benefit from using react
  • Used for creating dynamic UIs with rapidly changing data
  • Single page applications which can change data without reloading the page
  • Benefits from use of components that can recreate themselves without affecting other components
  • Changing data can be manipulated through state
  • Virtual DOM
  • Benefits from using JSX
  • Data is managed and passed around through props and state
  • Data can only flow down
  • Lifecycle methods used to initiate changes

Setup

Getting Started
  • React can be used within script tags or in a react environment. The method involving script tags is used mainly for testing and is not ideal for creating a large application.
  • To help streamline the process of creating an environment, the creators of React made a tool called create-react-app.
  • To install create-react-app, you must already have nodejs and npm installed. Then go to your command prompt and type npm install -g create-react-app, followed by npx create-react-app (your app name here) in a directory of your choosing.
  • After creating your react app, change the directory in your cmd to the app's folder and enter npm start
  • A browser tab will open up showing your react environment. When you edit code and save your changes, the page will reload with the changes applied.
Screenshot of the index.html at recipefinder/public/index.html. Contains the root div where the page is injected. This is where i added bootstrap.
Enter this into the command line to install create-react-app
Change your directory to the location you want the app to be at, then enter this into the command line replacing reactapp with your app name to create your react app
These are the important files in the src folder of your react app. I used app.js to write the react code, and added styles to the

The App Component

Building the main component
  • The app component is the main component of the entire app. It is the piece injected into the root div. It is at the top of the dataflow by managing its state and passing down data as props to be used by child components.
  • The constructor is used to create the state and declare super(props); which allows usage of this.
  • The boolean properties were used for conditional rendering in order to let the page know which child components to render depending on where you want to be.
  • The recipes property is for storing a list of recipes to be rendered by the Content component, and the filter property is for the search bar functionality.
  • Event handlers must be bound in the constructor in order to be used by child components to change the app's state properties.
constructor for the app component
  • ComponentDidMount is a lifecycle method that occurs after the first render of a component.
  • This is useful for loading your dataset.
  • This method in particular just loads a recipe list if it exists. If not, isDataHere remains false.
Checks if a recipe list was loaded after the initial render
The main render method
  • Whenever a component changes its state, its render method triggers again. This allows you to rerender components without changing any parts that have the same data.
  • Page is the variable used to store the page that is to be rendered based on the conditions.
  • The recipe view condtion takes precedent, then the form page, then the page set to display when there are no recipes, and then finally the content page.
  • Each component has its own set of props which contain the necessary data they need to function.
  • These props mostly consist of event handlers and recipe data.
The main render method for creating the page

Content and recipes

Content
  • The only state property this component needs is the searchfilter property. It is used for filtering the recipelist to only show recipes matching its criteria.
  • The componentDidUpdate method is a lifecycle method that runs if there is a change in props. This changes the state filter if it recieves new props.
  • Because the state changes, the recipes are filtered instantly without reloading the page.
Component responsible for rendering the recipes
Recipe
  • The recipe component just returns the recipe card made with bootstrap.
  • Event handler props are given to make the buttons work.
Recipe cards
Creates a recipe card

Making the form

Form component
  • The form state consists of all properties necessary to create a recipe object, and a property ingKey for generating a random key.
  • React suggests giving all items in a list a key that is unique from all its siblings. This is to let the virtual DOM know what it is working with.
  • The inputs are set to update the form state to be passed up to the recipe list.
  • I created an input component(for basic inputs) and and ingredients component(works for both ingredients and steps) that update the state based on the information being added. One handler handles all basic inputs and the arrayhandler works with the steps or ingredients array as they are being added.
Save the recipe to state then passes up when button is pressed

Event Handlers

App handlers Form handlers
Most important app handlers
Most important form handlers

References

Links I found helpful
  • https://dev.to/duomly/how-to-create-the-react-app-in-5-minutes-1bmb
  • https://reactjs.org/
  • https://getbootstrap.com/docs/4.4/components/alerts/
  • https://medium.com/the-andela-way/understanding-the-fundamentals-of-state-in-react-79c711be677f
  • https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c