Getting started with React

In the last 2-3 weeks of learning React, I've bounced around between loving it and hating it. Today I'm feeling more on the love side of the spectrum but that's not without the help of understanding a few of the core concepts of what makes React such a popular framework (or is it a library?).

Before we get into the whirlwind of React concepts, lets talk about imperative vs declarative programming.

Imperative programming: Explicitly describes the actions a program should take each step of the way and describes how a program should go about doing those actions.

Declarative programming: Describes what a program should accomplish (or what the end result should be). Leaves the determination of how to get to the end result up to the program.

Components

One of the main building blocks of React and likely the first concept to grasp is the idea of components. As opposed to Vanilla JS where your entire single page application lives on one long index.js file, React's main ideology is breaking your code up into independent components that each render separately.

Having only used Vanilla JS, the challenge for me was deciding when to create a new component and most importantly why?? Luckily, React has a great article on Thinking in React, one bit I found especially helpful was the idea of single responsibility components.

One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents

Read more here: Thinking in React Documentation

Let's look at the example below:

Each item is labeled as an individual component and what children components would live within them.

1. The parent/root component, the main responsibility of this component is to hold the header and list logic components (aka it's children)
2. This component's only responsibility is to display the header text
3. Container components are just as important in react, this components simply holds it's two children components
4. To-do input, accepts user input
5. This component is a container for the todos items
6. Finally, this component renders the individual to-do items

Okay.. we get React now, right? Wrong! Now that we have each of these individual components that each handle one individual part of your application.. how do you pass information through each one?

Props

Once you wrap your head around components, you start to think about data flow. Where is it coming from? Where is it going? This is where props come in to the picture, props is short for properties, individual pieces of data that are being passed in to components.

It's important to remember that props can be passed from parent to children components, but not to sibling components. Props can be objects, arrays, or even attributes, they must be passed by the parent component, and also accepted by the child component. What does that mean?

Lets say Profile is the parent component, here we're passing down 2 props to Avatar: the person object (name and imageId) and size.

Avatar is accepting person and size, and now they're available to sue in the component.

Props are read-only snapshots in time: every render receives a new version of props. So what if we have props that change based on user input? That's where State comes in!

State

State can be described as a component's memory, you can store information in state, set that information, and also give it a default value.

One simple example is, a search input:

1. You'll likely want the default value of of the search input to be an empty string

1. Once a user starts typing, you'll want to set the value of the search to the input value

1. Then you'll want the component to keep that input so can use that value to filter some data

Final thoughts

There are many many more concepts to consider but learning these felt like the big 3 that helped me go from hating React to kind of enjoying it! Getting used to JSX and the syntax definitely contributed to the painful journey of React but much easier to grasp!

If you're finding yourself struggling to learn React, take a look at some of their documentation here.