After breaking the laziness and making the decision to not binge another Netflix series this Friday, I managed to gather enough will power to write my first React Component.
Wait wait..Component, what? Ok, let’s start from the beginning.
Today I started to setup the system locally, to start with I am following the official documentation of React, I have given video tutorials a chance but I think those are not for me. I don’t like stopping, rewinding and playing.
I started with running this command
The above command allows us to bootstrap the application — meaning it gives skeleton of app that we can leverage to start building the application. It will create the application for you with bare bones.
I then added the plugin of Babel Javascript on my vscode to highlight the syntax, not required but if starting something then start with all bells and whistles ;)
Delete all the files from ./src directory and create index.js and index.css under ./src.
You can peek at the code of these files from here https://codepen.io/gaearon/pen/aWWQOG
Index.js looks like this —
As suggested in the official docs, I wrote the above code to create a muscle memory over copy pasting from the source.
Let’s break the pieces from the above code —
Line 1 to 3 are imports — these lines allows us to use React built in code (the code which is written by someone and we are not bothered about it what’s in there), this helps us to fancy syntax and keywords which are not available in javascript.
Line 5 to 11 is main part of the show, what is happening here is we are creating a component, a component is nothing but a small piece of your view. You have headers, footers, main body, sidebars, menus, think all of these as components.
In above, Square is a React Component Class. It’s takes in parameters aka props and returns views to display via the render method. In render, you can write as much javascript as you want, it’s also called jsx.
classname is a CSS world, the styling, colors and beautification depends on this, CSS code looks for classnames to attach corresponding css code to it.
Similarly, I have created three components, Square, Board and Game in index.js file.
In the Board component
At line number 15, you will notice we are passing a value to Square component. This is how different components talks to each other and the values passed here are called props.
Also, we will create index.css file for beautification purposes which will contain how the board will look like on screen.
index.css will look like this —
After completing the above steps, directory structure looks like this —
After we complete this, and do npm start from project root, we will see the following screen at localhost:3000
This was Day 1, I will take sometime to process what I have done today, and try to fit in some of the words in my memory like jsx, components, rendering and since it’s Friday I won’t mind catching up with one movie.
We will continue tomorrow from where we have left today. See you !
