The third Newton law of motion states that: to every action, there's an equal and opposite reaction.

Hey!

This article is neither about laws of motion nor reacting to actions, maybe it has to do with the latter but in a different context. This article gives insights to the prior knowledge required for learning and understanding Reactjs.

As a Frontend Developer or an aspiring one, the basic skills of HTML,CSS and JS are highly required before moving on to learning a framework of CSS or JS. Mind you, these frameworks help reduce the stress and time of hard-cording.

It's more like giving you a skeleton to add flesh to, now you feel like a creator right?

There is no doubt that REACT is a popular JavaScript framework with applications in various tech sectors such as blog sites, e-commerce sites, Fintech Apps and the list goes on. This has made almost every Front-End Developer tilt towards acquiring the skill, after all it is highly sort in the tech industry.

Okay enough of the stories, let's get down to business.

Intro to REACT

REACT is a JS framework by Facebook that makes building of applications more easier. It comes with pre-installed packages that you can tweak or install more according to the need of your application. Sometime in the nearest future, I'll dive into the React architecture but for now, you can read up.

React is made of Components, i.e each section of the User Interface(UI) e.g the Navbar, the contact page etc. is encoded into separate files(chunk of codes) with an export statement as the last statement. Each of these files are then imported into the main App,js file where they are routed.

Too many terminologies already? Okay, let's save the explanation for another post or quickly glance through .

Having read this far, you are excited about learning REACT straight away but, calm down and check the basic JS operations you should know before REACTing.(smiles)

Basic JS Operations required to learn REACT

• Event-Handler: What comes to mind when you see the .e in JS, it reminds one of the various events to be handled by JS such as onClick, onSubmit etc. Grab some more skills on event handling as you'd be needing a lot of it, considering that you need to build responsive Apps with react. Below is a code snippet of an event-handler denoted with e which handles what happens when the text in the input area changes.

<div>
  <label>Blog body:</label> 
    <textarea required value={body} onChange={(e) => setBody(e.target.value)}>
    </textarea> 
  <label>Blog author:</label>
</div>

• Return Statement: In REACT, the return statement is where the JSX codes comes in, in fact these codes are responsible for what you see on the UI. What this means is that, you need to brace up on understanding the control flow of return so you don't intend something else and display another to the UI. The example below shows a return statement that renders the blog title and blog author to the UI.

• Logical Operators: Although you may not need them when you start off with simple applications but as you advance to more complex ones, they become not only necessary but also important to master as they will save you from long statements or repetitive codes. Remember the KISS(Keep It Short and Stupid)rule? You don't want your codes looking messy and unreadable to fellow Devs.

• Functions : React components are made up functions; which are codes written to perform a specified action, can be reusable globally or locally. Every code you write from event-handler to logical Operators is enclosed within the function(include an example of a set of codes). In other words, they are children of the function which is the parent element. The entire block of codes in Example 2.0 is a function (arrow function in this case) with a prop name of Bloglist. The function also contains a return statement as explained in Return statement above A basic knowledge of writing functions is required to understand REACT as it is the backbone of the REACT components.

const BlogDetails = () => {
  const { id } = useParams();
  // const { data: blog, error, isPending } = useFetch('http://localhost:8000/blogs/' + id);

  return (
    <div className="blog-details">
      { isPending && <div>Loading...</div> }
      { error && <div>{ error }</div> }
      { blog && (
        <article>
          <h2>{ blog.title }</h2>
          <p>Written by { blog.author }</p>
          <div>{ blog.body }</div>
        </article>
      )}
    </div>
  );
}
export BlogDetails;

The code snippet above is the basic structure of a REACT component although it can become more lengthy depending on the function of the component. The function here is an arrow function with a return statement containing logical operators; it simply returns the blog details to the UI.

What next?

Wow!

I must congratulate you for being patient to read through, are you now prepared to start learning REACT?

Don't worry too much, you will get better with more practice.

Subsequently I'll write about REACT functionalities such as Hooks, Routers etc Until then, go on and REACT!