I recently helped get some of team up to speed on setting up and working with our enterprise architecture for our front end applications. Hopefully the knowledge I shared with them will help someone else out.

What is React, and how does it work?

React uses a virtual DOM that tracks state changes and as they happen it updates the browser DOM. If you come from a jquery background you can already see how amazing this is. It abstracts away all of the work that developers used to have to do of updating the DOM manually as the data changes.

One of the things you will see below that may be confusing at first glance is that we are using HTML inside of our react classes. This style of writing allows us to mix our markup and logic in our render function and is called JSX. Here is an example of how it looks

Data in react can only flow one way. It flows from the top level (Containers) down into any level below that top level (Components). You may wonder how your components are able to update the data if it flows one way? The way this is accomplished is by passing a function that changes the state down into a component along with the data. For clarification, state is the data that your application contains.

In the example above, we pass the changeName function along with the world data into the World component. As you can see, when the component calls the changeName function, the world variable is changed to “Andy”.

Components should be written to be reusable throughout the application if possible. They are passed data through props and render that data, or other components. Props are thus a read-only subset of the state data.

Reusable components are critical for creating a maintainable application. They allow us import components others have created and/or share pieces of our application with others along with reusing components within our application. There are also Component libraries that exist for things like this. One common one that I use for example Material UI https://material-ui.com/ that has many components (Data Grid, Alert,  Accordion, Pagination, etc.)

As you begin writing components I highly recommend working with function components with hooks. It allows us to to go from writing large react classes

to something much more simple

In the next part I will start explaining state management and how to use redux to handle it.