React Overview

React Overview

It's always to good to go over the information you've learned in the past. It not only helps solidify what you learned but it can also uncover areas that need re-enforcing.

At the moment I am preparing for a job interview so I'm hoping to ready myself for any technical question that may come up.


Intro

React is a library for building User Interfaces. This can be anything from a web application to phone apps now with React Native. It follows a compositional model with unidirectional data-flow between its components and allows for explicit mutations using JavaScript.

Composition

In React we work with components that we can piece together to create a complete application. That means each component can handle it's own things like state and UI while being re-used throughout various parts of an application.

For example, a Navbar could be used on every page, not just a UserSignUp page.

<Container>
    <Navbar />
    <Hero />
    <Form>
        <UserSignUp />
    </Form>
</Container>

<Container>
    <Navbar />
    <Content>
        <UserFeed />
    </Content>
</Container>

By breaking an application down to its components we essentially divide and conquer what we will be developing since each person can focus on ensuring their component works well.

Since we want re-usable components, our business logic in our components should reflect that. Which means functions must also allow for compositional design. If we take a <UserPost /> for example and try to get a ProfilePic to load next to the post we might get the user's picture like this:

function getProfilePic (nameTag) {
    return 'https://graph.facebook.com' + userId + '/picture?type=square'
}

We see the code above that userID may change but either way, we want a square picture returned for all users.

Unidirectional Data Flow

React is responsible for rendering the UI which depends both on data received in the back-end and on data received from the front-end. Since a user can make changes to the data being displayed, we normally handle that with EventHandlers that can each update the Dom. However, with React each component can have it's own data state so that not only simplifies how we update the Dom but also how data flows back and forth since now we just have to look at what our components are doing as the state changes.

Explicit Mutations

Since we are relying heavily on react to update our UI based on the components state or shared states, we have to be able to change said state easily. We do this with reacts built-in functions like useState and setState which end up being easy to use Javascript functions that we can call and mix in with any other conditionals that our program might need to get the behavior we want.