Getting Started with React

Everybody is talking about React and you are interested to understand how React works, but you don’t know where you should start.

At the end of 2017 I changed careers to become a Frontend developer and to learn React , these became my main objectives for 2018. I’m going to show you five tips to make your entry into the world of React go smoother.

1. Why React ?

It was essential for me to understand the advantages of React that make it an important part of my journey in web development and these are:

Components

React has a component based architecture. A component is just an encapsulated piece of behavior, style and markup. React changes a paradigm where the logic and view should be separated, for a view and logic together created from JavaScript.

A component is a function or a class which optionally accepts inputs (props) and returns the React elements describing what should appear on the screen. This component based structure is like a lego game, allow you reuse pieces, joining small pieces for building more complex structures. This way, your apps are easier to develop and easier to maintain.

Virtual DOM

The DOM ( The Document Object Model ) is the structure of objects that the browser generate when a document loads, and it can be modified through Javascript. In React, any new view changes are first performed on the virtual DOM, which lives in memory and not on the screen. An efficient algorithm then determines the changes made to the virtual DOM to identify the changes that need to be made to the real DOM. This guarantees a minimum update time to the real DOM, providing higher performance and a cleaner user experience all around.

2. Learn JavaScript and ES6

React is just Javascript, and your first step to understand React is understand a little Javascript. It’s important that you recognize the structures of data, and theirs properties and methods. It was very useful to build a list of the main properties and methods for: Arrays, String, Number, Math and Functions.

It’s going to be easier if you understand the concepts of classes, arrow functions, destructuring, spread operator and template literals.

3. Why so many tools ?

React for a beginner like me, was slightly intimidating because there are many tools that you see in the differents tutorials , you can feel very confused and lost, but if you have general scheme of the tool chain is easier to handle.

The React toolchain consist of:

• Package manager: It lets you take advantage of a vast ecosystem of third-party package, and easily install or update them. (npm, yarn)
• Bundler: It let you write modular code and bundle it together into small packages to optimize load time. (Webpack, Browserify, Parcel)
• Compiler : It let you write modern JavaScript code that still works in older browsers. (Babel)

The most important part is that you must have node to use npm , and with npm you can use it to install create-react-app. Create React App is the best way to start building a new single-page application in React, it uses Babel and Webpack, but you don’t need to know anything about them.

4. Many Resources

You need to take advantage of all the resources that you have around you:

• Meetups, Conferences
• Online tutorials :There are many free tutorials that show you how to start building things in React. Here some tutorials that I found very useful: FreeCodeCamp, Tyler McGinnis, IhateTomatoes, TraversyMedia, The Net Ninja.
• Social Networks: Twitter, Reddit
• The official react Documentation
• Books: You don’t know JavaScript

5. Start Now and keeping learning

This is the most important thing: START . Once you start the road, you will begin to find the tools to reach your goal.

"a journey of a thousand miles must begin with a single step"

I hope this guide can be useful for you, and you can start to immerse in the react world and start to create amazing things.