Southern Boy

React is a frontend library created by a team in Facebook. I won’t write more history. All I and you remember whenever someone says “ReactJS”, is a logo of rotating atom.

This article will talk of almost all features in ReactJS. It is a great article for a fresher to startup their frontend architect journey. My Mind: Let’s stop talking and start learning!

SPEND 2 MINS FOR SET-UP PLEASE!

You must have Node >= 14.0.0 and npm >= 5.6 installed on your machine. To create a react project, run:

> npx create-react-app my-react

Once the react project is created, you will see a folder of my-react. Besides, you will see a message of “Happy Hacking” in the terminal… That’s why every React Developer is a hacker!!! 😂

Get into the folder and type npm start.

> cd my-react

> npm start

Now, the famous icon of atom rotation comes in front of our face…

That’s it dude! You just set it up!

Look at App.js and play with it!

You will see lot of files generated. All we need for now is, App.js.

The code in it will be like:

Simply edit it. I just want to display, “HELLO SOUTHERN BOY”. So, let’s edit it. I would like to remove all the contents inside return statement.

Now, the rotating atom won’t be there. We’ll see the heading, “HELLO SOUTHERN BOY!” displayed or rendered.

Still, we have some styles (font-family) applied to the rendered text. It’s because of the index.js. Why do we need index.js separately?

Our App.js is written into index.html by index.js. This single, simple sentence describes the flow of A React Application. Here, we have the index.css imported which applies some styles to the index.html. Let’s remove that import statement and get rid of those styles! (Actually I like that font but just wanted to remove it! 🤥)

Let’s see the Southern Boy now!

WRAP IT UP OR YOU WILL BE ACCOUNTABLE!

Wrap the elements in a top-level component! Let’s consider an example where we don’t:

Dude… We return something! If we return just one element, the remaining won’t even be touched. So, it’s essential to wrap the elements inside a top level container or a parent element.

But, do we need this division just to hold these inner elements? We create extra nodes in The DOM Tree. Why do we need to create extra nodes in The DOM? Just to wrap the elements? Grouping shouldn’t be a overhead! To overcome this, React provides us the so called, Fragments.

Now, should we actually need to type, and just to group elements? 😂 Just use <> and </> instead of those tails of marsupilami! Just wrap with two diamonds!

Where is our grouped output?

The Southen Boy doesn’t have “R” 😭 Let the southern boy correct it!

COMPONENTS

Hope you see the image given below. It is a screenshot of my instagram profile page (Don’t take it as a shameless self-promotion 😂).

Component 1: We have a division for the stuffs like the logo of Instagram, a button for Log in and a link for Signing up.

Component 2: In the second division (after the horizontal line), We have the profile details including the profile picture of the southern boy (world wide handsome? 🤔) and also his name, a follow button, number of posts, followers and following in one row, his customizable name in next row, bio and a link to his page in the subsequent rows.

We totally have two components here in this page. Component is simply a grouping or a logical division. In Instagram, we have a component for stories, one for the feed, one for post and so on. We can divide a page into components. We actually code the page that way! We make logical groupings and put them in the page. Now, let’s make the first component shown in the above image.

We render our FirstComponent inside the App Component. Here, App is the container-component that just holds the components in a order we specify.

But, do we actually have this in our Instagram page? Now, we need a division with a className of whatever you want (‘first’ in my class).

The syntax we use here in ReactJS is called, JSX which is a combination of HTML and JS. So, we can’t use class attribute which is already there in JS. That’s why we use className. Let’s add some styles in App.css.

Now, the output would be like:

Well! But… Okay.. let’s wrap the button and the hyperlink in a tag.

Now, the page will be:

It’s okay than before. Let’s not focus on CSS for now… 🤫 Let’s create the second component which consists of the profile image, name, bio and so on and group them for simple styling.

We are using an img tag here. To import an image, we have to use the following import statement:

The image “profile.jpg” is present there in images folder.

Now, if you check the screen, a simple instagram profile header is ready!

I hope you can understand what actually a component is… It’s simply a segment of a web-page.

PROPS

Imagine a use case where we have to display the same component but with different images. We have our second component… How can we display the same component multiple times with different images? Should we need to write the same code again and again as we do in HTML? NO! It’s REACT JS! The answer is, we can use props.

Now, I have some more images. I want three profile headers with different images. I can use the existing code again and again. Let me first import the images.

Now, let’s nest the SecondComponent inside the App Component.

We have nested the SecondComponent again and again. This is actually the code reusability… We have passed the different images as props to the SecondComponent. The img is the props variable. We use the <hr /> element which is actually a horizontal rule (line). In React, tags such as hr, br are self closing tags. (They have a trailing /)

Now, in the SecondComponent, we use props object. The props object holds the passed props. In our case, we have img.

As you can see, we have <img src= {props.img} alt=’Profile Picture’/>.

You can also change name, bio and everything! We utilise the existing code of SecondComponent as a Template.

STATES

State is specific to a component (mostly). In our example, the button “Follow” indicates that we are yet to follow the user. If we click that button, it should become “Following”. This is where we can use States. Initially, when we don’t follow the user, the state is “Follow”. On clicking the button, we have to change the state to “Following”. Plus, we have to display the button text accordingly. Let’s use a hook called, useState.

We’ll not talk of the hooks in detail here. useState is a simple state management hook by means of which, we can manage state. It returns the passed state and a function that can only change the state.

Here, in this code, we have a useState that takes “Follow”, the initial state. It will return the same state value and a function that can change this state. We have destructed it as [followed, setFollowed]. Now, the value in followed is “Follow”. We can use setFollowed to change the state to whatever we want. When we click the Follow button, we have to change the state as desired. The button has the text of {followed} which is the text in the state variable followed. The button element does these all: <button onClick = { ()=> { setFollowed(“Following”) } > { followed } </button>

The problem now is, we can’t actually toggle the button. We can’t unfollow here (I don’t leave my followers go… 🤗) To toggle, we need to write a toggle logic. Let’s write a separate function for handling click inside the SecondComponent.

That’s it! We have covered the essence of “Components, States, Props”!

NANDRI!