Fast track your React learning with these 12 Tips!

If you're learning React you might be overwhelmed by how much stuff there is. Components, classes, props, state, hooks, reducers the list is endless! Here are the top 12 tips that helped me focus and learn React.

Quick note, I am by no means saying you HAVE to follow this advice, this is just what worked for me. In the end, it's all about doing what works for you. With that out of the way, let's get into it!

1) Learn the right amount of JavaScript and ES6

It’s easy to jump into a framework right off the bat, but you’ve got to walk before you can run, right? I bet you're sick of hearing that! Another thing you're probably sick of hearing is “you need to know JavaScript before learning a framework!”. While this advice is true, it offers another, often unanswered question. “How MUCH JavaScript do I need to know before learning React?”

I was far from a JavaScript expert when I taught myself React 3 years ago. But there are some important things I did know which you should too before learning React (or any library/framework for that matter).

• Functions (including ES6 arrow functions)
• Variables (const & let)
• Data types
• Objects and arrays (And how to work with them)
• Importing/Exporting modules
• Working with an API
• Understand how manipulating the DOM works

If you have a basic idea of how these things work, you’ll be able to have a good crack at React. Working with React will make you a better JavaScript developer as you're still working with JavaScript - React is a JavaScript library after all!

2) Use create-react-app

Using creating-create-app you can find the GitHub for more information here is a great way to get started. It gives you a working example project out the box, so you don't have to worry about setting one up from scratch yourself!

This means you can ignore things like Babel, webpack, and all the other fancy buzzwords for now at least. When you have a good handle on React, you can deep deeper into these topics.

3) Forget about Redux, Context API, and other fancy State Management Things

Speaking of buzzwords, you may have come across Redux, which is a state management framework for React. While Redux is pretty cool and has its uses for larger apps, You do not need to learn Redux when starting with React! React has it’s own state management features, which are easier to understand and more than enough to get you going in the beginning.

4) Focus on functional components

If you wanted to store state in a component, you would have traditionally needed to use an ES6 class component. Class components are a bit clunky (having to worry about binding “this”, dealing with constructors, difficult to store/update complex state, and so on):

// function component
const App = (props) => {
    return <h2>Hello my name is {props.name}.</h2>;
};

// class based component
class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h2>Hello my name is {this.props.name}.</h2>;
    }
}

Function components and hooks are becoming the “nicer” way to create react components. Function components are just normal JavaScript functions that return JSX. These combined with the “useState” hook make creating and working with components a much nicer experience.

I’m not saying “stay away from class components!”, if you want to learn them, by all means, go ahead! It'll be useful knowledge to have. Things are leaning towards Hooks more though, so don't neglect them!

5) Pick one way to style a component

There are several ways to style a component in React (who would have thought, right?) Last I counted there were at least 8. Crazy.

Anyways, try not to confuse yourself by learning all the different ways you can style a component. Plain old CSS and stylesheets work just as well when you’re starting out. Not to mention most companies I've worked with recently use plain CSS, so it's a pretty standard way to do things even with React.

6) Learn the useState Hook

I mentioned the useState hook previously, so what is it?

The useState hook lets us store state in a functional component (previously we needed to use a class component for that). It looks like this:

const [name, setName] = useState('Chris');

This stores a variable called name in state. We can change the variable using setName() , and initialise it by passing a value to the useState function (in this case "Chris")

The useState hook makes managing complex state nicer (we can have “multiple state hooks” per component), and we don’t have to worry about using “this” every time we want to work with state:

const App = (props) => {
    const [name, setName] = useState('Chris');
    const [age, setAge] = useState(28);

    return (
        <h2>
            Hello my name is {name}. and I am {age} years old
        </h2>
    );
};

7) Learn the useEffect hook

The useEffect hook is a React hook that lets us run code at different parts of the lifecycle of a component.

The useEffect hook is where you typically do API calls, update your component if the props change, and run any clean-up code.

You can solve a lot of problems nicely with the useEffect and useState hooks, so make sure to have them in your arsenal of React knowledge!

8) Begin with one component

React is all about components, but that doesn’t mean we have to go overboard creating components for every little thing in our project! A suggestion is to start with one component, and when this component gets too large, break things out into smaller components. Avoiding “over abstracting” will make your code easier to follow early on, and avoid prop drilling - this is when you have to pass props through multiple components, and can become a pain to manage.

9) Props vs State

It will be important to learn what props are, what state is, and when to use each. These are cornerstones of React and you’ll be using them a lot. At a high level:

Props are data that gets passed to your components from their parent. This data can be anything - numbers, strings, objects, arrays, functions, etc.

Heres an example of passing name and age to the UserDetails component from the App component (i.e the parent):

const App = () => {
    return <UserDetails name='chris' age={25} />;
};

State is data that can represent parts of an app that can change. For example, a list of users, a boolean flag that shows if a modal is open, and input field value can all be stored in state:

const App = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [inputValue, setInputValue] = useState("hello React");
    const [userList, setUserList] =useState([
        {name: "chris", age: 28},
        {name: "jenny", age: 20},
        {name: "alfred", age: 32}
    ])

    return(
        // ...JSX
    )
}

10) Ignore the server - use fake data or existing API’s

If you’re trying to learn React, its normally best to focus on React. Makes sense right?. When practicing fetching data from an API, it can be tempting to think, “Damn, I need to build an API for this! Guess I gotta learn Node.js!”.

If your goal is to become a full-stack dev, this isn’t a bad idea. But if you’re in it to learn React, try and use existing APIs or mock data to practice working with an API. This helps keep you focused on React (I’m a big believer in learning one thing at a time!).

• Here’s a list of API’s you can play with
• JSONPlaceholder is another cool tool to quickly get an API going

11) Stay away from other frameworks

This is a mistake I see beginners make (including myself). There are a lot of frameworks, and for some reason, we think we have to learn them all!. But we don't. I have yet to see a job opening that says “Must have React, Vue, and Angular experience” - If I did, I’d steer clear.

If you’re learning React, focus on React. You can always play with the others if you like, you might even think, “Hey, I like Vue better!”, and shift your focus to that. Whatever framework you side with, try and focus on it until you can at least build a few projects

12) Learn the life cycle and how a component rerenders

It’s important to know the React life cycle and how/when a component re-renders. I’ve wasted many hours bug-fixing by not fully understanding this stuff! Here are some tips to get you started with this:

• When a components state changes, React will re-render the component
• When a component rerenders, it will automatically re-render its children
• Use useEffect() to run code at certain parts of the lifecycle

Have fun!

Ultimately, try and have fun. The reason why we are developers is that we love to create things, so make sure to enjoy your journey to learning React!

What next? Build some projects!

Why not try building some React projects to boost your learning even further? I send out project ideas every few weeks(ish) with project ideas, starter code, and tips. Subscribe to get this straight to your inbox!