3 THINGS YOU NEED TO KNOW When Starting With React
Tags: react, javascript, webdev
Published: 2020-09-24 15:11:21

The purpose of this article is to show you 3 things you need to know when starting with ReactJS. If I would have known these 3 things from the very beginning, I would have been much more effective with React a lot sooner and progress a lot faster.

So if you are just starting with ReactJS, or want to learn it, keep reading as I'll give you the tips to get you started quickly and effectively.

# Get Really Good at JavaScript

The first thing you need to know before learning React is **JavaScript**. Indeed, the great thing about React is that it is *"just"* a JavaScript library. So the more you know about JavaScript the better you'll get at writing applications with React.

It is really important you master and become comfortable with JavaScript fundamentals as you'll be much more productive with React. 

A common mistake a lot of people tend to do is to start learning React before having a solid JavaScript programming foundation. **So please don't do this mistake yourself**. 

First, get really good at JavaScript. Otherwise, you'll quickly be overwhelmed by everything you'll have to learn alongside React and you'll probably quit before you even realize how awesome it is to work with React. So, build that solid foundation if you want to really focus on getting the most out of React.

For this, I suggest reading my blog post [10 JavaScript Concepts You Should Learn To Master React](https://alterclass.io/blog/10-javascript-concepts-you-should-learn-to-master-react). Also, you may want to check out [Eloquent JavaScript](https://eloquentjavascript.net/) by Marijn Haverbeke. This is an excellent book about JavaScript that you can read online [here](https://eloquentjavascript.net/) (for free). Finally, you should consider the following online courses by [Wes Bos](https://twitter.com/wesbos): [JavaScript30](https://JavaScript30.com/friend/DANGELO) (free), [Beginner JavaScript](https://BeginnerJavaScript.com/friend/DANGELO), or [ES6 for Everyone](https://ES6.io/friend/DANGELO).

I've also included an entire lesson for you to learn Modern JavaScript with ES6 in the first part of the [Become a React Developer](https://alterclass.io/courses/react) course. **Check this out, it is totally free!**

[![Modern JavaScript with ES6](https://alterclass.s3.eu-west-3.amazonaws.com/Modern+JavaScript+with+ES6.png)](https://alterclass.io/courses/react)

# Focus on Only React

The second thing is focusing on learning only ReactJS. You need to start by understanding the three main design principles (**Declarative Programming**, **Composition of Components**, and **Unidirectional Data Flow**) that makes React unique, from the very beginning. That's gonna make a huge difference in your learning curve.

[![What is React?](https://alterclass.s3.eu-west-3.amazonaws.com/What+is+React%3F.png)](https://alterclass.io/courses/react)

Besides that, you don't need any extra 3rd party library or tool to start with React. The React API is pretty small and surprisingly simple. Actually, there are only two methods necessary to build a React application. One for creating React elements, and another one for rendering those elements. 

The most simple app you can make only consists of the `index.html` file with the React dependencies. 

```html
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script type="text/javascript">
      var title = React.createElement("h1", null, "Hello, World!");
      ReactDOM.render(title, document.getElementById("root"));
    </script>
  </body>
</html>
```

Once again, you don't need to learn and configure any build tools to get you started. You can even use [create-react-app](http://create-react-app.dev/) to set up your React application by running one command without having to configure anything. 

```shell
npx create-react-app my-app
```

Unfortunately, a lot of online resources for beginners includes a bunch of tools, and make learning React more complicated than it is. That's why I've created the [Become a React Developer](https://alterclass.io/courses/react) course. It starts from the ground up all the way through becoming a React Developer. You'll learn everything you need to master React steps-by-steps.

# Get Your Hands Dirty

There is no better way to learn something new, especially when it comes to learning a new programming language or a new library than building things. I really believe that it is the only way to grasp a concept and make the most out of your time.

You can watch hours of video content on Youtube, but if you don't practice early on, you won't learn anything from it.

> Build (a lot of) things and start as early as possible in your learning journey. 

This is also valid with learning ReactJS. Just put in the work and you will get better over time. But don't just follow steps-by-steps training materials and reproduce what the instructor is doing. **Build React applications by yourself from scratch**. You'll learn so much more this way. You can start with something simple and go from there to build more complex applications.

For example, from the very first part of the [Become a React Developer](https://alterclass.io/courses/react) course, you will build a [Kanban-style app](http://react-trello.app/) inspired by the popular Trello application all by yourself.

[![react-trello.png](https://alterclass.s3.eu-west-3.amazonaws.com/react-trello.png)](http://react-trello.app/)

So, practice, practice, and practice!

# Conclusion

The purpose of this article was to give you the keys to getting started with ReactJS. By now, you should have an idea about what you should learn and focus on from the very beginning.

The most important points to remember are:

- Get really good at JavaScript and modern JS to excel at building React applications
- Focus on only React so you don't get lost with too much to learn at once
- Build things from the very beginning to practice your newly acquired skills

> If you enjoyed the article, consider sharing it so more people can benefit from it! Also, feel free to follow [@AlterClassIO](https://twitter.com/AlterClassIO) on Twitter and join our [Discord server](https://discord.gg/HTQvwxA).