Introduction to React — where to start?
Five months ago, I finished my degree and I had never dived into front-end development. So when I first started working and they offered me the chance to work with front-end I eagerly accepted.
Before jumping into React, it is important that you first learn a bit of how HTML, JavaScript and CSS work. This can be a lot of effort, but with a solid foundation you will be able to understand the React world much more efficiently. Here are some links I would recommend to help you get started:
- http://eloquentjavascript.net/ — Highly Recommend (While it may be cumbersome to read a book online, this one has exercises to help you develop essential tools to code better in JavaScript)
- https://www.codecademy.com/courses/html-javascript-css/0/1
- https://egghead.io/browse/languages/javascript
- http://ccoenraets.github.io/es6-tutorial/ — If you already understand how to work with JavaScript but do not know what arrow functions are, this link explains that and some other functionalities introduced by ECMAScript.
- https://css-tricks.com/ — For when you have some doubts on how to do something in css.
- https://flukeout.github.io/ — A great way to understand the selectors available in css.
- https://www.leveluptutorials.com/tutorials/how-to-make-your-first-website
I already know that, what now?
So you are a master of HTML, JavaScript and CSS, but you’re still unsure of where to start. My first choice on learning how to work with React is to follow the guide written by its creators.
In my opinion, this is where everybody should start. It will teach you what React is, what components are, the state, and so much more.
When you you’re finished with the tutorial, you should move on to the docs section of the website. There you can learn how the lifecycle of React works, among many other useful things.
Al of this is great for people who like to read articles, but if you prefer more interactive tutorials or videos you can check out the links below.
- http://buildwithreact.com/tutorial/jsx — this one has exercises at the end, which are a useful way of checking if you have properly understood the chapter.
- https://egghead.io/lessons/react-use-create-react-app-to-setup-a-simple-react-app — Egghead is a great starting place if you prefer learning through videos.
- https://scotch.io/tutorials/create-a-simple-to-do-app-with-react
If you are the type of person who likes to read, check out these resources:
- https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
- https://scotch.io/tutorials/learning-react-getting-started-and-concepts
- https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc
Wrap Up
By the end of these courses you will have learned the basic theory behind React. While you still have all of this info fresh in your mind, try to build an app by yourself and test what your limits are. This will let you know what you have truly learned, and which areas you still need to improve in.
Coming up next
In my followup post, we will be taking a look into Redux, providing you with a set of tutorials on it and complementing that with an example app using React and Redux.
At Runtime Revolution we take our craft seriously and always go the extra mile to deliver a reliable, maintainable and testable product. Do you have a project to move forward or a product you’d like to launch? We would love to help you!
