Starting with React JS!

To be honest, I am new to the web development world, As a student I did competitive coding, hoped onto the shimmering bus of machine learning and did mobile app development. Even when I could see from sidelines my classmates navigating and exploring the world of web development, It had seemed scary to be then too. There is so much going on, and so many new technologies roll out every single day. It’s hard to decide where to start and even if you do you have so many options to fulfill your single application need, all of which seem equally appealing. If we take Javascript for an example there is so much to it , there is NodeJS, ReactJS, AngularJS, Jquery and the list goes on. Though things may seem scary at first due to the vastness, but getting your hands dirty with the little projects and understanding different intricacies would open door to some of the beautiful concepts of computer Science. Now that I have decided to hope onto the bus of ReactJS. Let’s commence the journey together Shall we?

What is ReactJS?

According to the official website:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

I think the definition gives us a basic idea what essentially React is used for, but the term ‘components’ still seems like a mystery. To give an example, say you have a card div that has an option for selection ‘YES’ and ‘NO’,

Card Div
Divs using similar card div

there might be several places in your application where you might want to use this card div, say when user is placing a order, or removing a order, or to confirm something, what we can do is either define this same functionality at multiple places or just build a Card component with ‘YES’ and ‘NO’ option independent of the content inside it and reuse it to our applications need. That would save us from typing a whole lot of code. That is what components are for in React. I hope this clear the components part a bit, and if it doesn’t, no worries, nothing a good hands couldn’t clear.:p

What is JSX?

The first thing that we’ll come across when starting with React is JSX. What is it actually?

<div className=”shopping-list”>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>

It looks a lot like our very familiar HTML, but it isn’t that. It is actually a syntax extension of Javascript. JSX is transformed into Javascript at run time, for example the above code would be transformed into the Javascript code below.

React.createElement(“div”, {
className: “shopping-list”
}, /*#__PURE__*/React.createElement(“h1”, null, “Shopping List for “, props.name), /*#__PURE__*/React.createElement(“ul”, null, /*#__PURE__*/React.createElement(“li”, null, “Instagram”), /*#__PURE__*/React.createElement(“li”, null, “WhatsApp”), /*#__PURE__*/React.createElement(“li”, null, “Oculus”)));

So why not use Javascript only? well we can, but think, the above example is pretty simple, A big project would require us to have so many elements and therefore force as to have a lot of syntax heavy Javascript. Why not use simple and well know HTML like format. Babel does this job for us, converting our syntax friendly JSX code into Javascript code.[Try to see the difference between some of the Javascript and JSX code yourself on the link]. When we create a react application, babel comes as part of the package so we don’t need to worry about anything and just focus on our project.

Now that we have established a bit understanding about what React is, what are components and what syntax is used in React application, we’ll start building our first application and get our hands dirty. There is so many more interesting things to learn and explore, we’ll take them on as they come up.

Hit that clap icon, if you liked this.:)

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

22 Different Places You Can Learn Coding For Free In 2021

Preventing browsers from caching the files you serve

Guide to useContext with Blog Example

Google authentication in the Angular application

Basics of JavaScript

When to destructure props in React?

How to create a function that will return an array with words inside a text

[Figure1: Super adorable mop dog living in Sendai, Japan]

Top websites built by using Vue.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Archita Mittal

Archita Mittal

More from Medium

useState/useEffect/props in React

React Tutorial — Learn React in 5 hours — Part 5

How to use React Router Dom v6

Tips on Learning Reacting JS — Part 1 — Using the React Doc