Prerequisite

The reader should have basic knowledge of HTML, CSS and JavaScript as this is a buildup from these languages.

Introduction

When I started my journey into learning tech while still practicing optometry, learning programming-related concepts seemed a difficult task. It took me reading the same subject matter by different authors to make sense of what I was reading, visualizing, then applying it to real coding situations or even knowing the application of these concepts as needed.

The purpose of this series and my motivation to take up technical writing is to help people like me who want to transition from non-tech backgrounds into tech but need an easy guide into concepts related to the React JavaScript framework.

What is React?

React is a JavaScript(Js) framework used to build reusable user interfaces or components for web and mobile applications.

It is a front-end language that is free and open-source as well.

Breakdown

Lets breakdown and visualize exactly what we read up there, shall we?

--React As a JavaScript Framework

Imagine a single parent(JavaScript) with tons of children (React, Vue, Angular, Node, Express).

As we know, children bear a certain resemblance to their parents but ultimately possess their own identity.

This is the case with React and JavaScript. Although React bears some semblance to JavaScript's syntax (the rules following how you write a language), React still has its own identity(syntax) and uses.

--React as a free and open-source front-end language

As the parent, JavaScript is used to make web pages interactive and is used on the client-side(the side we see) and server-side(the part we don't see that does the work like clogs in a machine).

You could say JavaScript is multi-purpose(like a mother than can cook, paint, play sports, sing) and then its children having specific purposes(maybe the eldest being great at sports and the youngest excelling at music).

React is best used to build the areas you see when you view a web application or a mobile application.

By being free and open source, the framework is used at no price and is open to the tech community for contributions to improve the language like the youngest child singing at the family gathering or school concert and a parent or relative realizing the child's potential and offering to sign him/her up for music school to improve his/her skills.

--React used to build reusable user interfaces or components for web and mobile applications

Let us assume this youngest child is so talented that he has recorded a demo in the studio and saved it. Companies needing to produce children's music now reach out to this young child (through his parent, of course) with a request that he come to record that same demo again in their studios.

Traveling to different states to meet people who want the same thing is uncomfortable because the child has school to attend and can't possibly travel to all those locations just to do the same thing.

Instead, the companies are sent the demo the child recorded previously to do what they want and the child is paid.

The recorded demo saves the child a ton of stress and the companies lodging and travel expenses that the child would have incurred.

This problem the child faced is one in which React provides a solution and this leads us to a term called "Components".

Components

Components(the child's demo) are bits of independent and reusable codes similar to functions in JavaScript.

Instead of writing the same code every time that particular user interface(UI) is needed, thereby unnecessarily increasing the bulk of the codebase, React re-uses the code that performs that same function anywhere it is needed across the program .

This is the beauty of React. Components enhance code performance and are relatively easy to use.

const Welcome = () => {
    <div>
          <p>Welcome to Camp React</p>
    </div>
};

An example of a component that displays "Welcome to Camp React" whenever it is imported across the program.

That will be all for this article. In coming blog posts, I'll address other React concepts. Thank you for stopping by and I hope this helps in your transition journey.