Hello React! : The beginners guide to Declarative programming.

google.com

Ever since i completed my classes in React, a part of me still thinks that vanilla javascript is simply the programming world’s unique way of clothing the simple world of programming with an apparel that surreptitiously suggests to an outsider that programming is difficult, and as such, a professional field meant for only individuals who must have aced Algebra and derived all of Einsteins laws of blackhole physics…….using imperative equations alone!

That sounds more like a world were 99% of the worlds population would rather leave to Einstein alone.

Truth is that, in reality, programming is very easy, and even more easier with react. If like me you had entertained the thought of quitting programming during your Javascript days because of its imperative programming logic that required you to basically tell the browser to do every single thing you wanted it to do along with a logical algorithm on exactly how it was to be done, chances are that you may, by the end of this article, begin to understand my feelings, expecially if you have had some mid-level experience with trying to use the javascript language to replicate a simple dynamic web application like a simple To-Do App. The best way to prove my point would be to actually try talking you through how i was able to complete the same application using the React library and to prove how easy programming can be with React as an alternative to pure vanilla.

To begin, this is the one conceptual difference you need to understand;

Imperative programming vs Declarative Programming.

Javascript is an imperative programming language while react is declarative.

Imagine that you wanted to have coffee.

How would you tell a 4 year old kid who has never seen how coffee is made to help make you one? Undoubtedly, you would be signing off for suicide if you simply told the child to make you coffee and zoomed off to sleep handing them a lighter, mug, and a burner! indeed, you would have the best coffee brew in history!. Disaster could be spared however, if you practically talked the kid into every single detail and watched them carry it out one step at a time. The down side to this is that you are required to have some basic knowledge of exactly how coffee is made to be able to instruct the child on what to do. So, what if like the child, you have only been given already made coffee all your life without ever being given the opportunity to see how it’s actually made?Drinking Water would do then, not if you consider the alternative.

Now, consider this;

what if you had a seasoned chef in place of the 4 years old child who has got years of experience with brewing coffee? your guess is as good as mine. just tell the damn chef that you want coffee and go to sleep. He would simply make it and bring it even if you do not know a damn thing about how coffee is made.

The first case scenerio between you and the child is Imperative programming and that is Javascripts methodology. The alternative case is Declarative programming and that is the logical principle at the heart of react. In react, you do not need to think about how its done, all you need to know is what you want to do. You simply say it and React does it!. With Imperative programming(javascript), we are required to also descriptively outline the processes for doing whatever we want to do. This is hard!.

So,

What is React?

In simple terms, react is simply a javascript library for building user interfaces. it was developed at Facebook in 2011 and has grown to become the most popular javascript library for building user interfaces. React is component based and this means that when building with react,we think in terms of components. These components can be built once and reused anywhere, saving us the stress of having to repeat an entire block of code all over again. Lets say we want to build a website, we can simply have various components for rendering various aspects of the page , for instance, we could have a <footer /> component that renders the footer on all our pages, we could then build another component that renders our <Header /> with all of its features on each page of our website. This way, we only build these component once and can simply use or import them anywhere.

How React Works.

By some craft make, react seems to keep a light weight version of the actual DOM in memory. Each time there is a change to this virtual DOM, React simply updates the actual DOM and its none of your business to know how it does it. Your business is to simply state what changes you wish to see, react handles the intricacies involved with telling the actual DOM how this changes are to be effected.

This is basically what makes react a very powerful javascript library.

Building My Simple Todo App

My ToDo App

The complete source code for the above shown web-app can be found at

https://github.com/codecryer/My-To-Do-App. 

The trick is this, the entire folder you find on that repository was custom made except the components folder that contained our various components for rendering our <TodoItems/> ,<Header /> etc and of course our CSS modules used for styling our various components.To use those files on your local machine, you first must ensure that you have Node js and npm installed on your local machine and then we can use it to install the create-react-app support that enables us to create our own react based app by simply twerking the pre-customized support that is downloaded each time we use the create-react-app command to create a new app project. The beautiful thing about such a provision is that react spares you the headache of having to configure all of those mini dependencies that enables you talk to the actual DOM through a proxy, in this case, the react virtual DOM.

So, lets say you want to build a new web based application or maybe a react based website. With the pre-stated requirements fully installed on your local machine,all you have to do is to run these command on your terminal;

 create-react-app (name of app/folder)

This would automatically create a new named folder on your local machine.(the name of the folder would be the name you have supplied with the last create-react-app command you ran previously). Now, go ahead and open this folder on your VS code(or any other code editor of your choice). It should contain folders that house all the necessary dependencies that react may need to perform its job as your master chef. One of such folders or files is called the package.json and it contains the list of all the modules that is needed by your application to function effectively. Each one of those modules performs a specific set of functions and as such,beginners are often advised to refrain from effecting any changes to its content.

The node_modules folder stores all packages that are listed within the package.json and basically just does the function of book keeping. The src folder is actually the folder that should interest us. This folder is where i have stored all the source codes for every component of the application,this folder basically is where our original intellectual creation lives.

To begin creating yours, open the installed folder on your code editor and ensure that you are on the right path to that folder(just c d into the folder from your terminal), then run these command to launch the react support to your browser.

 npm start

If you run this command on the file you downloaded,the Todo application shown above should open after some second but if its on some new create-react-folder,then a beautiful react banner should display on your browser with a written inscription that welcomes you to make modifications to the App.js file that is one of the very many files that was installed by the create-react-app command. The app.js file holds all of the components that is responsible for rendering the beautiful UI that you are seeing on your web browser and is often called the entrant root to your application. it is actually the file that is rendered inside the only index.html file you have got within your create-react-folder. if it helps you appreciate the concept, just think of the app.js as a container for storing all other components.

components contained in the src folder of my-todo-app

Opening the src folder of my own todo folder would show you all the components that are responsible for rendering the various features you see on the UI.

So, the thing now is this; How are components made?

Well, for a start, it feels good to know that, unlike vanilla, when working with react we no longer need to worry about working with the DOM API’ s in our browsers and that kind of really helps. this means that we do not have to use querry selectors in attaching event handlers to the DOM elements because react simply does it for us thereby sparing us the gruesome details of how exactly it goes about doing this.

Creating components is as easy as simply rendering your first “Hello React!” line onto your browser. Every other thing, regardless of how complex it may first appear to seem simply builds on this knowledge.

So, lets create our first react app to print just a “Hello React!” onto our browser.

On your terminal; run

1. $npm install -g create-react-app my-first-react-app[This command line sets up our development server]
2. cd into the my-first-react-app folder
3. run; $npm start[this should launch the development server onto our window]

welcome page(mosh react crash course for beginners)

At this point, go ahead and open up the my-first-react-app folder on your visual code. you should now see all of your installed dependencies accordingly as earlier discussed. The app.js file within the src folder on our files panel holds the app component source codes that is responsible for rendering the visible black banner we see on the browser. Also notice that this app.js component has been rendered onto the browser through the index.html file which serves as the entrant to our app.

This means that all we have to do is make changes to the app.js file and watch the changes get effected on the UI, alternatively, we could simply use the app.js as our container for rendering every other component that might be responsible for rendering our UI.

For instance, lets try to create a component that displays “Hello React!”.

To do this, go to the src folder and create a new folder called ‘components’.this folder should hold all our components source codes. Within the components we can now create as many component files as possible. For our interim purpose, we just want to create a single component that would be responsible for rendering the “Hello React!” line onto our browser and so lets call our first component file “greeting.js”.

inside the greeting.js file, we import our dependencies from react;

import React, {Component} from ‘react’
import React-dom from ‘react-dom’

these dependencies are very important since they would be responsible for helping react render the contents of our greeting.js to the browser.

now we create our greeting component class like this;

class Greeting extends Component {
render(){
return <h1>Hello React!</h1>;
   }
}
export default Greeting;

Now go to your index.html file and import the greeting.js component into the index.html like this;

import Greeting from ‘./component/greeting'

render the greeting component in place of the app.js like this;

<Greeting />

This should automatically cause our Hello React! to appear on the browser.

This is basically all there is to react. From here one can really build anything using react by thinking in terms of components were each component is saddled with the responsibility for rendering specific sections of the UI to the browser.

That was all how i built the react based ‘To-do’ web application that i’ve had the privilege of sharing on this article.

So, lets say you successfully complete the building of your new react based website and you are eager to share it with your friends at no cost. Here is how i was also able to deploy mine using Zeit Now.

First, you would need to have the Now CLI installed . to do that, run the following command on your terminal;

npm install -g now

Go to Zeit.io to create an account on Zeit.

return to the folder of your project on your terminal and run the following command line on the folder;

now

This should automatically deploy your project on zeit now with a unique location URL that you can readily share with your friends like i have done here;

https://my-todo-app.codecryer.now.sh

Very many thanks to the great instructors i have at LearnFactory Nigeria. Special thanks to Master Chidera Ugwuanyi for guiding me through the making and deployment of my first React based Web application.