React Basics – Learning and Using React for the First Time

⏱ Reading Time: 8 minutes

Building web applications using vanilla JavaScript or jQuery takes a lot of time and is prone to more bugs and errors. You can maybe build your own library or framework which will make that process of building web applications faster, but that also requires a lot of time. And as we know time is money. So why reinvent the wheel when you can use an already built JavaScript library like React.

🚀Read Chatbot: What Is It and How to Build One 🚀

To start learning React you should at least know beginner level ES6 JavaScript, basics of HTML and CSS. 

In this article, we will go through React basics – learning difficulties and some good tips to get you started.

What is ReactJS?

According to the official reactjs.org page:

“React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.”

React is quite simple and easy to learn JavaScript library with a lot of good sources to do so. 

It was built by Facebook. A big benefit of React is also the possibility of creating mobile applications with React-native. This means that you can basically write one code base and apply it for Android and IOS systems. Reusability is not 100% but it saves a lot of time.

For the beginning you should learn React basics properly, then you can shift to learning React-native. 

Learning React Basics

1. Where to start?

Picture 1. Beginning of learning React

The first thing that you need is to find a good tutorial on React. Best free ones are: 

https://reactjs.org/tutorial/tutorial.html

https://www.freecodecamp.org/news/react-examples-reactjs/

https://egghead.io/courses/start-learning-react

There are many more tutorials on React. These are some of my recommendations, as they refer to React basics. Feel free to explore and find one that fits you the most.

2. Make Sure You Know Javascript

JavaScript is an easy language to learn but hard to understand and master. Make sure you know how JavaScript works under the hood before learning React. If you don’t know JavaScript properly you will lose a lot of time on silly mistakes that could be avoided by knowing the basics.

3. Invest Time

In the short run, it may seem like learning React takes too much time but in the long run, every minute learning React will prove like a great investment and will save you tons of time. If you ever feel exhausted or overwhelmed take a pause. Do something that relaxes you and takes your mind of programming. Come back to learning when you feel better, don’t rush the process of learning.

4. Don’t Learn Just Copy-Paste Code From Examples

CTRL+C, CTRL+V is probably the most used combination of keys on every programmer’s keyboard and they are good when you are working, but not when you are learning. Even if you understand what is going on in the pasted code it takes away your effort of typing something physically and in the process learning syntax. Later on, when you type your own code you will get syntax errors that you will spend hours finding. Minimize that errors by typing examples of code instead of copy-pasting it. 

Picture 2. Don’t copy & paste

5. Don’t Learn React and Redux at the Same Time

In React there is something called state. It is mutable and in most cases, it is mutated by some user event. Redux is a state management library and it makes mutating and storing states much easier in big applications. But for beginners, it is best to build React applications without Redux until you get comfortable with the basics of React. Then when you will build larger and more complex React applications you will easily pick up Redux and you will clearly see benefits of it. This one is even recommended by Redux creators themselves.

6. Typescript?

If you have time, yeah sure. Typescript is also a highly demanded skill and is growing in popularity among developers. If you learn programming for the first time and your first language is Javascript it may seem repulsive at first because Typescript adds types to Javascript and that means stepping out of your comfort zone. That should be an added reason why you should learn it. Stepping out of your comfort zone is hard but crucial for your development. It also enhances code quality and understandability. But learn how Javascript works first and write some code in it. Then you can really appreciate what Typescript brings to the table. React supports Typescript from create-react-app 2.1.

Picture 3. Typescript

7. Learn by Creating

The best way to learn to program is by creating something with freshly acquired knowledge. It serves two important services: 

1. It keeps you motivated due to the fact that you apply something that you learn in some visible shape. 
2. You learn A LOT when you encounter some problem that is not explained in the tutorial and it gives you valuable experience with the technology you are using.

In most tutorials, you will have some app that you will work on throughout the tutorial and that is great for understanding concepts you are learning. If you want to be a React developer you need to know to build something from scratch and you don’t learn that by following tutorial examples. Build something of your own while following the tutorial and implement new things. That’s the first step of learning React basics properly.

Read 10 Effective Ways to Maintain a Secure Website.

Using React Basics

1. Don’t Use Stateful Components If They Aren’t Needed

Picture 4. Stateful components

React lets you create two types of components: stateful and stateless. Stateful components are components that manage state. The problem with stateful components is that they affect the performance of your application a lot more than stateless. This doesn’t come in to play in smaller applications but in larger ones, it makes a huge difference. So make sure you know when you should use stateful and stateless components.

2. Use Linter

Even the best programmers sometimes waste a couple of hours looking for a missing variable or misspelled one. You can avoid a lot of those mistakes by using a linter. Although it takes time to set up and is quite frustrating to do so, it has a lot of benefits. My personal recommendation is ESLint. It very customizable and is awesome to use in large teams. If you want out of the box configuration you can use JSLint. But be careful! You need to make sure everyone in your team uses the same linter and same configuration. If otherwise, you will find yourself in a worse situation then you would before using a linter.

3. Don’t Use Redux Unnecessarily

Learning redux is an awesome tool and addition to your knowledge of React. Most React position requires redux knowledge but that doesn’t mean you should use it in every React project. It basically adds another npm package to your application and makes it slower and it may not speed or ease code. Make sure to know the pros and cons of redux and when should it be used.

Picture 5. Redux JS

4. Organize Your Folder Structure

In smaller projects, this maybe doesn’t seem necessary but it is. You never know how large that project can turn up to be. It is better to play it safe and have your folder structure organized from the beginning. If you don’t do that you will waste a lot of time once you decide to scale up your project. Also, important thing is that this project has your name on it and when somebody (maybe your future employer) sees it it will be a turn-off and you will come out as an unorganized person.

5. Remember That Javascript Is Dynamically Typed

If you are learning to program and you are using Javascript you will probably get used to this. But if you learned some statically typed language like C# or Java before, this will probably confuse you and you will have a lot of TypeErrors. The same thing applies to React. Make sure you use and get the correct types in your components.

6. Go Back to Basics If Needed

If you are working on a new project or maintaining a new one and you don’t know how to do something or how something works go back to the tutorial and remind yourself how React works. It will help you understand how the current project works and next time when you encounter similar code you will know how it works faster.

7. Refactor

It’s an awesome feeling when you write code and it works. Your job is done there… Wrong. There are always ways to improve the code. First, look if code can be faster. Most of the time you can speed up code in more than one way. Do it. Then look if your code is readable. Somebody will probably read it or maintain it. By writing readable code you will make easier for them to do so. You will come up as a more skilled developer and a better person. But make sure not to spend too much time on this. How much time depends on how fast you need to push the code and how much it will be used in a project.

React Basics Wrap Up

React is an awesome tool to build web applications. It has a slight learning curve and in the beginning, it may seem difficult to wrap your head around it, but once you get to know it and start building applications with it you will see all the benefits of it. Hope these React basics will help you when building web applications!