Welcome to React Js(x).
For all that it is worth, I have only spent less than two hours taking my first introductory lessons in React Js and all I can think of is how awesome and easy it has made programming seem. If vanilla Java script was hell, React Js is like coming to hell without the demons and the devil dwelling there and for me, that was a great relief from what my mental conceptions and predispositions were prior to actually experiencing the class.
In less than two hours, all of my mental conceptions and cobwebs which I had weaved complexly around the subject matter was gradually torn into shreds, thanks to the resilient efforts of a great instructor-Master Chidera.
Right now, I basically think that React is easy and quite just anyone can take a try at learning and mastering the Library, however , I think that a deep mastery and knowledge of vanilla Javascript could actually make the learning process more fun and easy.
This is not to say that a lack of Javascript knowledge should mean a sentence to an arduous and drilling experience for anyone who seeks to learn React, it only means that although a knowledge of JavaScript could ultimately simplify the learning process for those who possess it, it should not be seen as a compulsory requirement for learning the React framework. With that said, here is my take on REACT.
WHAT IS REACT ?
React is a JavaScript library for building responsive, and beautiful user interfaces. It was developed at Facebook in 2011 and as at today, React has become the most popular Javascript library for building user interfaces as it remains the number one choice for most developers with Angular and Vue trailing just behind. This simply means that, if becoming a professional UX/UI developer is your knack,then you must have some React magical wand up your sleeves. At least to a working extent.
React COMPONENTS- (The Tower of Babel made from simple Bricks)
Part of all React based applications are built from what is called COMPONENTS(in essence, this is like building the tower of babel from simple little bricks- using the simple to make the complex).
A component is essentially a piece of the UI( by this I mean: every visible component of the application or web platform that is rendered visible by some piece of code block. For each visible part, the invisible code blocks that renders them are what we call COMPONENTS and React is basically based on components)
React is based on Components because all we do is simply build some piece of components and then fuse them all together in order to get the complete whole functionality as may be required or envisaged on our web/app interfaces. Components in React are simply to React what soup ingredients are to a chef who decides to make a specific kind of soup at a particular time.
UNDERSTANDING COMPONENTS
So, lets say that the list of all possible soups that can be rendered by the chef at any particular point is given by a collection of soups say;
soups = {
mellon: ‘salt’, ‘pepper’, ‘mellon seeds’, ‘vegetable’, ‘maggi’,
honglin: ‘salt’, ‘maggi’, ‘long pipere’, ‘sugar’,
AustralianPOR: ‘vegetable’, ‘curry’, ‘sugar’, ‘salt’, ‘maggi’
};
we see that the ingredients collection for making each soup has three ingredients common to all three soup specifications in addition to other ones that are unique to each soup.
The chef can decide to make a component by simply having a sub-soup which he makes only ones and stores it away somewhere.
The sub-soup would then look like this;
sub-soup = {
alpha: ‘salt’ , ‘maggi’ ,
};
and so, when next an order for , lets say, the AustralianPOR is made by a customer, our chef simply goes off to the fridge, gets out the sub-soup(‘alpha’) and simply makes the receipe. This way, he does not have to always make new salts and maggi each time an order is made.
Our chef could have many sub-soups and as such our soup orders could simply be the combination of many sub-soups.
These sub-soups are simply what COMPONENTS are to developers in REACT.
They are simply re-usable code-blocks which the developer simply calls each time the effects that they render is required within the main pages.
This means therefor that, in React, COMPONENTS are reusable and as such ,life is a whole lot easier for the programmer. Yippeeee!!!.
In essence, a piece of application in REACT is simply a combination/collection of many COMPONENTS. Lets say we would like to build a website/platform like Twitter, we can simply separate our task into smaller COMPONENTS that builds up the different parts of the Twitter page. Some of these COMPONENTS could include but not limited to the ‘NavBAR’ , ‘Trends column’ , ‘Feeds’ and ‘profile’.
Now, here is the real deal idea that makes you see the heaven in the hell.
First, our Twitter App sits ontop several COMPONENTS like ‘Feeds’ , ‘Navbar’ , and ‘Feeds’
and then, each of these (lets call them ‘first-line COMPONENTS) could equally have their own individual COMPONENTS like the ‘Feed ‘ component having components like ‘Tweets’ and ‘Likes’.
The thing is this:
Each one of those COMPONENTS can be built in isolation and used on more than just one application. This means that our ‘Likes’ component under the ‘Feed’ component in our Twitter App can simply also be imported as a COMPONENT in our Snapchat App.
This means that all we have to do is simply do one beautiful work once and simply save ourselves the terror of having to go through it again. Isn’t REACT just beautiful?. Damn right it is.
So, How exactly does the REACT framework implement these COMPONENTS?
COMPONENT IMPLEMENTATION
React implements components as JavaScript Classes but with little additions of what is called ‘render()’ and ‘state()’ .
So, for our Twitter App, each component(here we have used the ‘Likes’ component) is implemented as a Class with the following structure;
Class Likes= {
state()={};
render(){
}
};
The State() = {}
This is simply where we put in the data we want to display on the browser when the component is rendered by React and Its just that simple!.
The Render(){…..React elements — — }.
As can be clearly seen based on its syntax expression, the render is a method and it is responsible for describing what the UI should look like based on how we want the data to look like when it is being displayed. You can think of it as basically the CSS in React if that helps you understand it better. the only difference here being that the written codes within these render method are React elements that map on to the DOM elements in JavaScript codes!
Let me explain better:
React elements are simply plain Javascript codes that represent DOM elements in memory.
(Don’t pannick, I know I promised you wouldn’t find the devil in this hell and if you have understood all we have said down to this point, chances are that you already have passed the devil along the way without knowing it ,so relax, JavaScript is cool down here. Trust me.)
In essence, React seems to actually maintain some virtual DOM for every element that is a perfect copy of what the actual DOM element is. This virtual DOM is cheap to create and each time we make a change to any of its state coponents, a new react element is born. React then compares the new element created with what it was before and figures out what has changed. Once this is done, it automatically updates the actual DOM with this change. This simply means that, In React, unlike in JavaScript, we no longer have to worry about using Jquerries or other DOM language syntax to implement changes in our DOM’s. All we have to do is simply change the states and automatically, React would simply update our DOM automatically. SO, we are less concerned about how to really inform the browser about needed changes than we are about what we really want to change. In essence, just decide what you want the interface feature to do by changing the state and just relax and let the React Libray tell the DOM how to do it. (I told you this was hell without satan…maybe soon, we could turn it into paradise when we eventually begin making our first applications.
Before that, Lets Set-up our work environment.
THE SET-UP( Getting our work tools for Making heaven out of Hell in the absence of the Devil).
To begin, we first ensure that we have the NODE.JS application installed on our computer. How do you know?
Just go to your system terminal( I’m on Ubuntu 18.04) and type in the following line command;
node -v
hit Enter.
This should display what version of Node you have on your system. If it does not, then you need to install it. (find the installation guide behind this book).
Although we are not actually using Node here, we would need to install it because we would be needing one of its package managers called the npm-(Node Package Manager).
Installed?!!
Great!
Now, still on your terminal, type in the following command line(after the dollar sign);
sudo npm install -g create-react-app
again hit enter.
Now , lets create our first React App.
MY FIRST REACT APP
To begin, we go to our terminal and run this line of code;
create-react-app (‘call your app a name’ →i called mine Hell-app)
hit enter.
Once done. This should install everything we need to start building our application and this includes all the virtual development libraries live servers etc. just wait for the download to be done.
When done; cd into the app, so for me, I will do this by typing these command (don’t forget to use whatever name you gave your react app)
cd Hell-app/
then;
npm start
upon hitting ‘Enter’ , this should automatically launch a development server that displays on your browser with the beautiful react logo of running egg-shaped spherical circles resembling the image of an atom and its nucleus, protons, shells and electrons.
Return to your Visual studio. This should display some default installed folders like the following;
1) Node_Modules( This should contain all the third party libraries we would be needing)
2) Public ( will hold the favicon.icon, index.html, and our manifest.json files-)
3) src ( holds some bunch of .js files that are responsible for rendering the react feature we earlier saw on our browser).
A number of other folders should also be visible on the side bar too, but for now these named ones hold our interests in hell.
Now if you open the App.js file inside the src folder; you should have something like this;
From the image above, you can clearly see the Class App, as it extends ‘C’omponents. Within it is the render() and if you observe closely, the programming language syntax used here is neither pure vanilla Javascript nor pure HTML so what is it?
Its a language called; JSX( JavaScript X-HTML). Bable takes these codes and turns it into plain Javascript seemlessly so as to enable browsers render their implied informations. Don’t worry about installing babel, you already did when you installed node.js It was one of the default installed components your system installed.
In conclusion, what you are currently seeing on the browser at this point can be regarded as the output of our App COMPONENT.
