ReactJS Introduction

Why and How to Use it.

What is ReactJS?

ReactJS has been very popular in the web development field. So what exactly is ReactJS?.

React is a JavaScript library designed by Facebook that is used for developing user interfaces. It is used for developing highly reactive and no-flaky pages/websites. Unlike traditional web pages where you have to wait due to latency caused by request and response for the next page, ReactJS help to develop a blazing fast website by breaking this cycle and updating content on the same page when event happens.

This can also be done with simple JavaScript and HTML (CSS if necessary). When Page is loaded you can manipulate the DOM tree with JavaScript functions and can change the content of the page, Make it interactive without having to request a new HTML page. So why Do we Need React JS?

Why React JS?

You can indeed achieve the single page interactive website with Vanilla JavaScript, as at the end ReactJs is JavaScript and XML. But as your code-base grows, it will be unclear and unimaginable to handle or make changes to it. You will have to follow an imperative and repetitive approach to create an interactive component. The manipulation of an element in vanilla JavaScript will be at the global level. You will end up affecting other elements while developing new ones.

React is preferred to use due to following reasons:

SPA : React helps you build a single-page application. With ReactJS you can control/manipulate/change the content of the entire page with minimal code.

Declarative approach: Uses a declarative design with all syntactic sugar helping to write a high-level maintainable code You just have to define the goal and React will handle JavaScript DOM instruction and under which situations they are used.

Component Driven UI: React embraces the concept of Component. Components are reusable building blocks in UI. With ReactJS you can create an encapsulated component that manages its data and avoid the scenario of affecting other component states and actions in the DOM tree. This is only one of the traits which make. It helps the code re-usability, separation of concern and avoids repetition.

How to get started with React?

Setting up React environment is really. Everything in ReactJS is JavaScript.

If you want a get-go project with all the libraries to create a fully fledged ReactJS app. You can run the following command on your terminal:

npx create-react-app <your-app-name>

After the project with the given name is created go into the directory and start the server:

cd <your-app-name>
npm start

this will start the server with will serve you index.html (present in the public directory ) on address localhost:3000:

npm start just not only watch and deliver but also transform the syntactical sugar code JSX, ( which will be discussed further ) into the
raw JavaScript.

Your project structure must look like this.The index.js file is the first to execute when you run the npm start. This file manipulates the element of id root in index.html . It calls the render method and replace it with the content returned by App.js.

ReactDom.render is a method which is called to render the React element or DOM element (first parameter) as the child of target element (second parameter).

App.js returns a Component. Component is a special function which returns the React element. The HTML returned is called JSX(JavaScript XML) . JSX is the syntactical sugar for React.createElement(component, props, …children) (for now let’s just say React.createElement is like document.createElement and document.appendChild). You can make changes to page content via changing App.js file in src.

Try making changes into this HTML by replacing with below code and save the file to see change on the page.
<div> <h1> This is my first App.</h1> </div>

If you do not want to confuse yourself with complex concepts of ReactJS beforehand and work you way up then for the most basic setup, you just need to add below scripts in your index html.

<script 
   crossorigin 
   src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script 
  crossorigin
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>

This above code will add the packages react and react-dom . These package are added to use all modules/functions that are required to build a react app.

Now let just create a index.js and manipulate the HTML content index.html.

This will create the element h1 with some text via React.createElement. React.createElement takes the agruments as follows respectively :

• First argument is a element tag passed as string
• Second argument is props to that element. Props are just the attributes to the element. You can either pass object of attributes(className, style or any custom attribute) or pass null of no data is needed to be passed.
• Last argument is either the children elements or the text.

The above code is similar to the index.js that is created via create-react-app in which the JSX is compiled to this piece of code first and transformed to Javascript when the project is built. Although at one point you will see that using React.createElement makes it hard to read the code if you want to create a tree of components. Here is a dummy example.

JSX is nothing but a special syntax in React (syntactical sugar for React.createElement)which helps a developer to write maintainable and readable code, So it is not necessary to know JSX in advance to learn ReactJS concepts but is a convention to use.

So, we are done creating our first basic app with and without JSX.

Note: Every Component must start with capital letter. It help React consider the element starting with small letter as DOM element and element starting with Capital letter as React custom element.