Introduction to Javascript Frameworks (React Basics)

In the modern era of web development, the libraries and frameworks assist the software developers in creating complicated and efficient applications. One of the most commonly used and popular frameworks in the past couple of years has been React. It was initially developed by Facebook and it enables developers to create rich, interactive web applications easily. In short, it is a modern way of developing web applications, and we all know how powerful web applications can be for a developer.

Before discussing the reasons for the adoption of React, it makes sense to discuss what JavaScript frameworks are to begin with and then proceed to the underlying principles of React.

Indeed, What is a Javascript Framework?

A JavaScript framework can be defined as a set of ready-made JavaScript code for constructing applications in the fastest manner possible. Frameworks give a blueprint and a set of instruments to a developer, so he or she is able to concentrate on the core idea of the application and its programming, instead of systematizing the standard code. There are several Javascript frameworks that assist in structuring application code, provide front-end UI features, or provide connectivity between the presentation layer and the data centre.

Moreover, it has wide-ranging capabilities which makes learning it worthwhile. Starting from algorithms teaching and all the way to complex game design. JavaScript frameworks are an incredible asset when developing applications across wide disciplines. Understanding such programs as Angular, Vue and React will facilitate the work tremendously. But these applications are, however, usually called libraries rather. If you look closely, these programs are nothing more than powerful user interfaces. Naturally, it enables the development of more robust frameworks and libraries.

Why React?

Out of several JavaScript frameworks, learning React seems to be the best investment. Many people still confuse React with other frameworks and libraries bundled together with its namesake, some call it 'ReactJS', others simply refer to it as the UI framework. To clarify, let's look at some of the features of React that answers the question of why should anyone become an expert React developer.

1. Component-Based Architecture : One of the fundamental aspects of any application written in React is how the application is structured. First off, let's understand what it means to have a Component based architecture. In its simplest form, any given website or web app can be divided into different parts or segments. So, you can think of these segments as pieces. This includes headers, footers, and body sections, images widgets and all other UI elements that went into building said application. So essentially, a single application is made up of several other applications that are embedded within one another. This modular design greatly simplifies management, testing and updating processes as changes to different parts can be made without altering neighboring ones.

2. Declarative Syntax : As already stated, React implements a declarative syntax instead, meaning that developers consist solely on defining what they want in a given user interface, and in this case, React executes how to do it. To put it another way, instead of writing imperative code that details each stage of the operation, React developers only need to specify the front-end design of the interface, and whenever such a state is needed, React will do the house updating when the state changes. This means that applications built with React are also less difficult to read, debug and maintain.

3. Virtual DOM : One more important aspect of React is Virtual DOM (Document Object Model). Virtual DOM is used in optimizing the update of the user interface as it is a replica of the actual DOM, only that it is much smaller. When an application is changed, React will first change it in the Virtual DOM, and only then will check for changes in the actual DOM. Then, only the changes that should be made to the actual DOM are done enabling speed as well as reducing unnecessary re-rendering.

4. Unidirectional Data Flow : According to React, components and data can only go in one direction, data always flows in one direction, components receive details of their parent components through properties, which are often regarded as 'props'. If a component wants to revise its data, it needs to revise its state, which will reactivate the rendering of the component. This iterative and systematic data flow makes it comparatively easy to perceive how the data changes in the app and how those data changes impact the UI of the app.


5. JSX (JavaScript Syntax Extension) : JavaScript has a syntax extension known as JSX, and React works using JSX, this makes it possible to write HTML code directly inside JS, as long as it has a similar structure. It is possible to create user interface elements in a more usable and familiar format together with the power and utility of JavaScript. Tools such as Babel enable the browser to execute code that wasn't meant for that in the first place by converting JSX to Javascript since browsers are not designed to interpret it.

Getting Started With React

To begin working with React, one must acquire certain tools and libraries in a development environment. The best way to get up and running with React is to use Create React App since it is a tool endorsed by Facebook that initializes a React application with all the configurations such as build tools, application structure, and libraries.

Once you create a React application, you will come across a folder structure which would consist of the following main components:

- src : This folder contains all the source code for your application, here you'll define your components and logic.

- public : This folder contains the static files, in particular the index.html file, images or icons.

- node_modules : This folder holds all the required dependencies for your project.

- package.json : This is a crucial file that contains a list of all the dependencies and scripts used in your project.

Most development environments normally employ Webpack and Babel amongst other tools to assist in a myriad of tasks such as combining and transcribing your Javascript files into a version that the browsers can comprehend.

What are the Different Types of Components in React?

As far as I know, React is a JavaScript framework that allows developers to build user interfaces as component hierarchies that can consist of several nested components. Each component can render an interface and can be written as a function or class. Components can be divided into two types: Class components and Function components.

- Class Components : These components represent a class that extends `React.Component`, they are the most complex form of React components. A class component must have a `render` method and return some JSX.

- Function Components : As the name suggests, function components are entirely produced as functions. At the beginning, these classes didn't support state management but thanks to the Hooks in React, they can do every function class can, in addition to being stateless.

In most cases, a component will receive `props` as one of its parameters and will be responsible for rendering corresponding HTML and/or JSX code. `Props` are essential in react components because they facilitate the flow of data between nested components.