How I learned React.JS

About me

I am Philipp, a 19 year-old software engineer from Germany.
While in school I taught myself how to code and worked with clients from varying industries. Technologies like Node, React and Android enable me to build highly scalable dynamic apps.

Why I wanted to learn React.JS

My motivation in learning React came as some friends and I wanted to build a new platform. We wanted to build it on new technology and we got pretty excited to learn more about UI frameworks. React.js was the way to go.

How I approached learning React.JS

At first I read through some tutorials and videos. Then I gave it a try in our prototype. I just jumped right into developing the prototype. I took some examples from tutorials and tried to create our prototype out of it. My understanding of React was by far not good. I quickly started making many mistakes. I've put a lot of other technologies into the application without understanding how one technology can connect with the other. It challenged me a lot, but through every mistake I made, I learned something new. My understanding of React increased. After a while I bought me a new book about React called Fullstack React. It connected all the dots I was missing and made me an expert in React Development.

Challenges I faced

Along the road I faced my roadblocks. First how to connect React with different technologies. How to connect it with a database. How to share new state between components? How to structure a React project? By page? By feature? How to increase performance and stop useless rerenders? How to connect your components to your backend server? How to maintain a growing codebase?

Key takeaways

In the process I learned that you grow by experience. Every step you take towards learning more about React helps you in the coming task. At the beginning you don't know where you start. You just start, you try, you make mistakes, you learn from them and you implement it the right way next time.
I learned how to structure projects, how to maintain a growing codebase, how to manage application state, how to ensure clean and quality code through linters and explicit typing. Additionally I learned how to add build steps in projects to ensure minification, uglification and performance. Server Side Rendering is also something I love.

Tips and advice

if you want to build the coolest, most dynamic and most interactive applications on the web then you should definitely start to learn React. I recommend you to go the official website https://reactjs.org/. They have a lot of tutorials, explanations and a list of events to attend to. After you started with the basic tutorial I recommend you to look into Create-React-App (CRA, https://github.com/facebook/create-react-app), it's a tool which will setup your first project and all necessary configuration. After you are a little more familiar with React you can eject the project and configure it yourself. To get the most out of React you need a state management tool like Redux or MobX. It helps you to connect your application through a global state for all components. Egghead.io provides a good tutorial on Redux.
After you learned about state management and React basics, you should definitely get the book Fullstack React, it will make your life easier and show you how React works. When coding in React, it's best to use a linter like ESLint. It will teach you how to write correct code. Then you should also learn more about Mo dule Bundlers like Webpack and how to configure if properly. A good understanding of ES6 (ES2015) is also very recommended. After you have used every of the above steps, you should try to use TypeScript instead of normal JavaScript. It will enhance your code by explicit typings and make it less error-prone. Now you can go and start making awesome applications. You can learn more about GraphQL, Server Side Rendering, GatsbyJS or CSS Modules etc.

Final thoughts and next steps

It's always a challenge to learn a new technology, but when you know how to use it, you can create beautiful software. With React.js you can start today to create the best and most amazing apps out there.