React JS Application | Planning & Setting Up| Part 1–30

Intro

Congratuations for making it through the free javabootcamp. You are now ready to build a full fledged applicaiton building on top of the foundation we learned leading up to this point. We will create a UI platform that responded based to users actions. The actions will communicate locally or to servers. WE will take advantage of firebase to handle authentication, hosting/deploying, database management, and even cloud functions.

We will start by creating a simply applicaiton, planning our applicaiton with various visual diagrams, and understand the architecture of our applicaiton visually. Lets get started.

UML Class Diagrams

A dynamic representation of the objects of the application. A UML diagram is a diagram based on the UML (Unified Modeling Language) with the purpose of visually representing a system along with its main actors, roles, actions, artifacts or classes, in order to better understand, alter, maintain, or document information about the system [https://tallyfy.com/uml-diagram/]

Not a plug but I use these guys for charting, and they have simple TUTs to better explain it:

Wirediagrams

This is the UI of the app. When designing the UI user interactions should be considered, otherwise known as UX. These can give the front-end developers a better idea of what the final result is entered to look like, as well as pricing the devs with basic parameters to use such as font-family, color palette, sizing, margin, padding, and overall templated style.

Additionally using tools like Sketch essentially design the front-end code using GUIs.

ER Diagrams

These diagrams are responsible for the visual representation of the database. The idea is to display the key, values, and their relationships between tables, hence the name Entity-Relationship Diagrams.

Once again Lucid (sponsor me pls) has great info and amazing charting tools:

How to Draw an ER Diagram

Site Map

A site map is the navigation flow of the application, this does not necessarily represent the user flow of the app. The site map describes how screens (pages, stages, etc) will be displayed and navigated within the application.

Software Architecture

This portion is pretty universal across most applications: client, server, database.

We will be hosting a large portion of the front end on the client and through encapsulation place a lot of our business logic server-side. The architecture should fit the need of the application. This architecture is probably not required if we are not using sensitive transitions or storing vulnerable data within a database.

Our architecture will follow an MVC architecture, which is the view (user/client), the controller (our bridge between the business logic and the view), lastly, the model will house the business logic and communication with the database. The model can communicate data with the view directly as well, but the view cannot communicate with the model directly.

The difference is we will be using Redux which is omnidirectional. So that is the main distinction here. The main idea is to protect business logic and databases using n-layer architecture.

Similarly, we will be blocked out code using the n-layer architecture creating a client layer, service layer, and database.

Our React App Archetecture- Angel Mondragon

Setting Up

After you have opened your IDE of choice (I am using VSCode) you can open up a local terminal in your project-workplace using the shortcut command [option+`] for Mac. Then you will execute this assuming you downloaded and installed npm already:

$ npx create-react-app recipes

npx allows you to run node.js code without having to install the packages themselves. Next, we will get into our get into the directory.

$ cd recipes

Once inside the directory, we will run using:

$ npm start 

This will create a local server (likely 3000) based on vsCode settings) and your default browser of choice will launch the newly created application.

You will go into the signals folder and get into your App.js file to delete everything between the first <div> tags and replace them with <h1> Hello Wolrd </h1> tags and save. Check the browser with the liver server and see your first React App created!! CONGRATULATIONS!!

File Structure

Real quick we will be creating our folder structure to house our files ina. the logical format that allows for ease of use and grouping together relative objects to make modification and searching easier for future team members by grouping by object utility.

We can sort by Navigation, Screens and their children components, as well as sections. Think of your diagrams of which objects are most related, group them accordingly.

This section has no right or wrong answers, but it will help keep you organized as the complexity of the app or the team scales.

/main
  /src
    /screens
    /navigation
    /auth
    /component
    /store
      /reducers
      /actions
    /interfaces

Other: Version Control

Consider using version control or learning about version control at the minimum. Its not necessary for learning react. If you are familiar with Version control this is not applicable go to step two, however for newer developers version control contains multiple benefits and is commonplace while developing.

Learn more here:

Version Control in Visual Studio Code

That’s it. In summary, we learned how to properly plan an application, shy form project management. that's another monster in of itself. THis planning stage allows us to more easily build the application. Hope you enjoyed it if so consider giving a clap and a share!

Connect with me:

Instagram | YouTube