How to be a complete React Developer

React is one of the most popular JavaScript libraries on the planet. It is built to be scalable and modular. It is used to create user interfaces by most major online platforms like facebook.com and Instagram. The library was created at Facebook in the year 2008. It tested extensively on the website before being released in the wild.

The DOM, or Document Object Model, is a JavaScript core module that is used to manipulate objects in the browser. React uses a virtual DOM to mimic the real DOM in the browser. The virtual DOM has a smaller memory footprint, helping create faster and more responsive user interfaces without overwhelming the browser. The virtual DOM is created by the render() method of a React component. The virtual DOM is so light weight that instances of it are created every time there are changes made. React will then update the real DOM on the browser to update any differences between the DOMs. Importantly, React will only update the part of the DOM which has changed. This saves time and resources. This neat trick is credited with providing the speed and responsiveness seen in React applications.

Data can be passed from one component to the next using what are called props. Props are accessed using the this.props property of an object.

How to use React Developer Tools

React Developer Tools are browser extensions that are used by React developers to inspect a React SPA live on the browser. It lists application components and subcomponents as a tree for easy access and profiling. You can edit a component’s state and props on the extensions component tab while testing an application. The extensions are mainly available in the Firefox and Chrome browsers. After installing the extension for your browser, you can use the browser’s developer tools as normal but new tabs (Components & Profiler) for React will be added to your lists of tabs on the development tools.

1. Install the React Developer Tools for your browser. A quick search will list the extension from your store, including from other browsers, in the top five search results.

2. Start by right-clicking on the page in the browser and choose inspect, or alternatively you can just press F12. This will bring up the developer tools for your browser.

3. On the list of tabs for your browser’s developer tools, at the end of the tabs there will be two new tabs with a React logo named Components and Profiler.

4. Clicking on components will reveal a tree of components for the React app on the current page being viewed. On the image below from a Facebook site, the highlighted component is an image with a link. The properties of this component are listed on the right panel.

The profiler tab is reserved for measuring the React application’s performance. It lists the time of each component’s rendering time. This way you can monitor which components in your application are slowing down the web application.

1. Click on the profiler tab in the development tools menu.

2. A start button will appear, click to start profiling. Then proceed to use your application normally.

3. Go back to the profile tab and click the stop button to complete the loop. You will be presented with results about the performance metrics for your application. The metrics presented will include things like how long and how many commits did each component take to render.

What does a React developer do?

A React developer builds user interfaces using one of the most popular JavaScript libraries. The user interface is usually complex and involves breaking up the code in different files for code maintainability. The library allows developers to create complex applications that used to require heavy back-end logic with lots of pages to create a seamless site. With React a developer can create all that with components that are simplified and can be reused. The web components are run on a single page, without the need to create multiple pages in the back-end to render and return HTML every time there are updates on the page. The library is meant to be reactive, hence the name React. A React developer should be skilled in creating semantic web pages using good HTML and CSS guidelines. A React developer is a combination of multiple skills and competencies, like design of web components, creating UI components for the web application, planning storage of state, and API handling from the server.

Why React developers love Node

React and Nodejs share the same language. It is not surprising that most React developers like to use Nodejs in the back-end to power their front-end applications. Using JavaScript for both the front-end and back-end is appealing for most developers, especially those coming from a front-end background. Most developers are introduced to React by tutorials that specifically use React together with Node, including express and MongoDb. The stack is colloquially known as the MERN stack. It has played a part in the exceptional rise of all frameworks involved. Developers are able to build fast, responsive, and scalable sites using the same language and have access to a lot of tutorials written for the MERN stack. JSX stands for Javascript XsML and is an HTML-esque format for creating React applications UI. It is one of the fundamental concepts in React Application and a source of confusion for most newbies. JSX is converted into JavaScript objects by a transpiler/compiler like Babbel. To use Babbel you need to have Node installed. Another reason React developers use Node is npm. Npm allows developers to install or update a lot of third party JavaScript packages including React. It makes it easy to set up a build pipeline for React.

React can be installed using npx (comes pre-installed with npm) like so:

npx create-react-app {application-name}

This will scaffold a React app for you with a single component named App. Here is the snippet of the file with default component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Change directory into the created app and start it:

cd {application-name}

npm start

Can we use React Native for Web Development?

React Native is a mobile development framework created by Facebook to help write mobile applications for all the platforms they support with the same code. It is modelled on React, but it is exclusively used for mobile development. React Native achieves native mobile support by creating iOS/Android interfaces on a background JavaScript thread. The applications look and feel as if they were written in a native mobile environment. A developer who is fluent in React can migrate their code and web development skills to React Native. The different platforms share the same code, which is JavaScript. The applications are also lighter and faster than conventional applications.

You can install React Native using the following npm command:
npm install -g create-react-native-app

After it finishes installing, create a new project:
create-react-native-app MyApp

In the installed MyApp folder start the project with npm:
npm start

React Native is used by Facebook and other big companies to create native cross-platform applications. Most React components might not work in React Native and vice-versa, as both platforms are intended to serve a different medium.

How to be a good React developer

React has a very small API to learn. There are four basic principles to know to master it. They are components, props, state, and JSX. The amount of concepts to learn makes it possible to be fluent in a matter of hours. But before you can be a good React developer you need to be fluent in JavaScript, especially ES5 and upwards. A React developer will need to brush up on some JavaScript, HTML, and CSS.

The developer should be able to handle state management which becomes vital in big projects. In React, state management can be handled using libraries like Redux. A good developer should know when such libraries are needed and which data should be globally accessible. Creating good, structured JSX is also a requirement, especially in large code bases. It will make other React developers able to read and understand your code much easier.

A good understanding of what hooks are and what they contribute to your application’s speed and effectiveness is important. Knowing how and when to use simple and custom hooks for applications should be customary for good developers, as they provide most of the power in a React application.

Other important aspects of good development practices include creating small, maintainable components, a good folder structure to organize those small components, handling application errors with grace and logging them, and things like using a lint package to check if your code is up to standard. Do these things and you will be halfway to being a good React developer.