React Basics – Learning and Using React for the First Time
⏱ Reading Time: 8 minutes
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:
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:
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.
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.
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:
- It keeps you motivated due to the fact that you apply something that you learn in some visible shape.
- 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.
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.
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.
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!
Small Business Guide to Amazing Customer Support
More from our blog
What does omnichannel have to do with ROI increase? Take a look.
Ecommerce website design can make or break your business. Not sure how to ensure a smooth and fast sales process online? Check out our tips.