Becoming a React Programmer

React programmers are in high demand and make good money. Learn more about React, your job prospects and how to get started.

React.JS developers make an average of $70 an hour, or an average salary of $120,000. Whether you’re a programmer looking to level up, or someone seeking a radical career change, I’ll get you started on the path towards a fulfilling and lucrative career as a React developer.

What is React?

React.JS and React Native are technologies developed by Facebook and released as an open-source framework in 2013. Since then, they have been continually developed by Facebook and other companies, along with individual coders.

React is a framework for JavaScript, the standard programming language for the web, used to power everything from Google Maps to Facebook to YouTube. Practically every website uses JavaScript in some capacity, but React makes it easier to build apps that run right inside the web browser.

React.JS vs React Native

When reading about React, you’ll see two “flavors” of it mentioned: ReactJS and React Native. They two are similar, and sometimes interchangeable, but refer to very different ways of working with React.

ReactJS is a JavaScript library. It’s a collection of reusable code that coders can easily integrate into an existing project to make their lives easier, accomplishing difficult tasks much quicker than writing their own solution from scratch. In a sense, it’s modular, designed to be used with or without other libraries or frameworks as the developer sees fit.

Image result for library vs framework

By comparison, React Native is JavaScript framework. It is everything the developer needs to create an app fully within React. It’s intended to be used whole and without the need for other libraries – though other libraries can certainly be used. Most importantly, however, is that React Native is used to build standalone apps that run across a wide range of devices, from PCs to smartphones, using the same code.

React Components

React was developed by Facebook to display dynamic content on the web page without the need to refresh or require input from the user. This is most prominently exhibited by Facebook’s activity feed, which updates in real-time to display the most recent content. Websites like Airbnb also use React to display search results, relevant content, and stays and activities.

React accomplishes this through its implementation of components. Components are a core feature of React, similar to Objects in ECMAScript 8 and other languages. Components are typically UI elements – a post, a card, a button – but components can also be a logical process, like a transaction. Components are meant to be reused, with their content being placed inside at the time of instantiation (meaning when the component “template” is used with real content).

Image result for react components

Components in React can be nested inside of each other. This can be useful on a site like Facebook, which might have an image component, with its own HTML, CSS and JavaScript handling its display and logic, inside of post component that has its own structure, styles and functionality.

It’s important to understand, however, that data (props) in React flow down. This means that parent components can pass information down to child components easily, but child components can only pass data back up to parents through events. Events are functions of components that allow them to send data back up to parent components, which can then be passed back down to other components.

JSX

Another major benefit to React is JSX, an XML-like syntax that lets developers code and style React code the way they’d write HTML or CSS. Unlike alternate web syntaxes like SASS and LESS for CSS, once React is setup properly, JSX will be automatically interpreted to JavaScript syntax at runtime.

const rootElement =
 React.createElement(‘div’, {},
   React.createElement(‘h1’, {style: {color: ‘red’}}, 
     ‘The world is yours’),
   React.createElement(‘p’, {}, 
     ‘Say hello to my little friend’)
 )ReactDOM.render(rootElement, document.getElementById(‘app’))

JSX simplifies React code and streamlines the process of creating components using either JavaScript functions or classes. It also creates more readable code, making JSX ideal when writing entire standalone applications using the React Native framework. But JSX is backwards-compatible with vanilla JavaScript, making it useful in any React.JS project with any framework or library.

What’s the Job Market Like?

Since 2013, the demand for React developers has grown to exceed demand for AngularJS and Vue.js, two popular JavaScript frameworks that saw popularity in the years before React. Due to Facebook’s involvement in the project, features like JSX, React is seeing major interest from employers, who see the technology as a cost-effective way to develop cross-platform applications.

Graph displaying the considerably higher job growth of React programmers compared to AngularJS and Vue.

Demand for React programmers in the United States is most lucrative in the states of New York and Missouri, where average salaries reach up to $150,000, compared to the national average of $120,000. Although entry-level positions start at only $52,050, experienced programmers make up to $200,000. Note that general economic trends show a shift away from salaried pay to contract work due to fewer labor protections afforded to freelancers. The hourly pay for freelancers is naturally higher (average $70/hour), but whether this compensation is sufficient will depend on the individual.

According to a survey published on Medium, employers looking for React programmers asked for a median of 3 years of experience in web development, provided the applicant could show a strong understanding of React. Additionally, a third of those employers required a degree in computer science, with nearly half of those companies allowing for real-world experience in place of a degree.

Image result for web developer soft skills

Employers also look for applicants with skills besides React programming, such as working with databases and other back-end skills, as well as soft skills like good communication and the ability to work in a team.

Where Do You Start?

With the prospect of high-paying jobs, there’s never been a better time to become a React programmer. But where do you start? There are many ways to become a React programmer, none of them quick and easy but all of them possible even for a complete beginner.

Concepts

If you have no experience in web development, the best way to begin your career as a React programmer is by learning the basics of programming. Programming fundamentals – like variables, functions and objects – transfer across many programming languages.

Good places to start are the LinkedIn Learning courses Programming Foundations: Fundamentals, Programming Foundations: Object-Oriented Design and Programming Foundations: Real-World Examples. It’s also useful to go ahead and learn concepts like databases, design patterns and interfacing with APIs.

HTML/CSS

Once you understand the basics of syntax, data types and uses for programming, start learning how to code static web pages. It may seem most logical to go straight from learning concepts to learning JavaScript, but React is most powerful when used with JSX, an HTML-like syntax that lets developers build components that look similar to regular HTML.

There are many online resources for learning HTML5 and CSS3. It is important to learn proper semantic HTML5, for both accessibility, cross-platform compatibility and search engine optimization. React developers also need to know CSS3, to create beautiful, responsive components of their own design or based on a composition created by a web designer.

For that reason, React developers should be proficient at HTML and CSS. Code comps, which can be found freely available on the internet. To get started and learn more advanced techniques, start with the courses Introduction to Web Design and Development, HTML Essential Training and CSS Essential training. When you’ve based these basics, move on to CSS Selectors for React Developers and CSS Layouts, Learning Web Components, and Mastering Web Developer Interview Code.

JavaScript

Now that you know how to code web pages and understand programming fundamentals, it’s time to start your programming career in earnest. As React is a JavaScript framework, it’s a good idea to know how JavaScript works. Not only will it give you a better understanding of React, but will boost your chances of getting a job if you can tell your employer you can write JavaScript outside of React. Versatility is king.

To get started, watch these course on JavaScript Essential Training and Learning ECMAScript 6. Make sure to read the documentation on basic and advanced JavaScript, then familiarize yourself with the features of ES7.

Node, NPM and Git

Node, npm and Git are all very different pieces of software, but all are important to know when working in a professional environment.

Node is a technology that allows for JavaScript applications to run on a remote server rather than in the web browser – this is important for security, but also works on local servers for standalone mobile or desktop apps. As such, you should read the NodeJS documentation and watch this course on Learning Node.js. This is a topic you’ll return to frequently when learning React proper.

npm is a package manager used to install React and other libraries or frameworks. It’s an industry standard for installing dependencies, so watch these courses on Learning npm the Node Package Manger and Advanced npm. Git is a tool used for code version control and for changing large programs in group projects. It’s extremely useful and a must-have tool to know when applying for a job. Watch these courses on Learning Git and GitHub and Git for Teams.

React

Now you’re ready for React. For a crash course, watch Learning React.js for a beginner-focused introduction to React, and follow it up with React.js Essential Training. React for Web Designers will integrate these skills with other front-end web design disciplines, while Learning Full-Stack JavaScript Development: MongoDB, Node, and React will integrate important database concepts for creating full applications in React.

Now you’re ready to become a React Native developer, with Learning React Native, React Native Essential Training, Create a CRM Mobile Application with React Native, React Native Ecosystem and Workflow, and finally Building Material Design Apps on Android with React Native. These courses will give you the know-how that employers are looking for, plus some extra skills to make you a more attractive applicant.

What’s Next?

What’s next in your career path? That’s for you to decide. What are you interested in? Figure it out and go do that. Read about it, but also do it. Make 5, 10, 15 apps. Whatever you have time for, use that time to make something to show employers. React is a new technology, and it’s already supplanted the old ones. By reading this blog post, you’ve show an interest in learning new skills, but that’s a necessity more than a luxury in this field.

So go out there and learn some more, starting with my own blog archive.

More to Explore

Unity State Machine Boilerplate Code

The following boilerplate code is for a basic finite state machine implementation in Unity, written for my own reuse with comments provided on usage. It

Building a Dynamic Form in React (Part 2)

A devlog of my first experience using React to create a dynamic data-driven web form, and learning the ropes of components, forms, Fetch and everything in between.

Building a Dynamic Form in React (Part 1)

A devlog of my first experience using React to create a dynamic data-driven web form, and learning the ropes of components, forms, Fetch and everything in between.