React for Beginners

On the heels of my Phase 2 completion at Flatiron, I have become intimately familiar with React App over the last three weeks.

For any novices, React is a widely-used JavaScript library maintained by Meta (yes, library - though it functions similarly to a framework in many respects). React has become the most favored front-end library and continues to grow in both popularity and demand.

For posterity's sake, I've put together a list of tips and tricks to benefit newcomers to the React world:

1) Use Create React App to initialize projects

One of the most efficient functionalities of the React app is the ability to create a new project with a single command line using Create React App. Depending on your package manager of choice, you can do this with one of the following three commands: 

"npx create-react-app my-app"
"npm init react-app my-app"
"yarn create react-app my-app"

This is the best way to initialize single-page applications, as it only requires one build dependency. Running this command will save a folder entitled "my-react-app" to your computer with all required packages.

After installation, you will make use of several other handy-dandy terminal commands inside your project directory.

• "npm start" or "yarn start": will run your app in development mode. Your app will now be viewable on port 3000 in your browser. 
• "npm run server": will start your backend server
• "npm test" or "yarn test": will run tests concerning files altered since the most recent commit

2) Understand basic syntax

As user-friendly as React is, there are a few buzz words necessary to learn:

Props: Refers to data of any type that gets passed down to a child component. Without restructuring, basic syntax looks like this:

function Links (props) {
    return (
        <div>
            <h3>Links</h3>
                <a href={props.github}>{props.github}</a>
                <a href={props.linkedin}>{props.linkedin}</a>
        </div>
    );
}

 Component: A function that takes props as an argument and returns JSX. These are usually split up into separate files in React for better scalability and reusability. Although historically written using class syntax, the new functional syntax is best practice moving forward in React.

State: dynamic data in your component that will change over time via user interaction.

React hooks: Special functions that allow us to 'hook' into React's internal state. To use, we must first import them, then call them inside of the component. Two prominent hooks:

• "useState": used to access and modify state inside of our components  

import React, { useState } from "react";

const [button, setButton] = useState(false)

• "useEffect": used to perform any side effects outside of the main purpose of a function - i.e. data fetching, updating parts of the page outside of React, etc.  

import React, { useState, useEffect } from "react";

useEffect (() => {
    if (timeRemaining === 0) {
        setTimeRemaining(10);
        onAnswered(false);
        return;
    };
}

Component hierarchy: a diagram resembling a tree used to illustrate the relationship between parent and child components.

3) Keep components small

React best practice is to keep components as small as functionally possible, without over-abstracting. As a rule, I like to start at the top - generally the App component - and break out additional components as I begin to add smaller UI capabilities. This is for a variety of reasons:

• Easier to debug
• Your code is more understandable to other developers
• Allows for greater reusability and scalability of components

4) Don't overuse state

One of the biggest mistakes I see in React is the utilization of state when props or conditional logic would suffice. Call state sparingly, as it can add unnecessary complexity to your code.

When considering whether to add state to a component, it helps to consider a few things - is the component static and unchanging? Can you calculate the desired behavior based on any other state or props? If so, your component most likely doesn't need state.

5) Avoid asynchronous errors

When using state in React, It is essential to understand that setting state is asynchronous. What does this mean? Simply that the useState hook doesn't change state immediately - it must wait for the component to re-render (which is triggered by a change in the component). 

This re-render also causes any children components to be re-rendered as well.

Understanding the life cycle of components in React is essential to accurately rendering components and can save you countless hours of troubleshooting and debugging.

Conclusion

While there's still a ton to learn about React syntax and functionality, the above list was a good place to start for me. Hope it helps you as you dip your toes in the React App world - happy coding!