Hey! Are you new to this industry? Me too. I am a Summer Intern in Cyphertree. I am working on a React based project here. I am not anyone from the “know-it-all” cult but really an amateur just like you. It’s just that I am writing this blog as I have already initiated learning React, and you are going to initiate it after reading this blog.

Get Set React!

So, you might be aware of the cool apps of our era, right? -Instagram, Facebook, etc. Have you ever wondered what’s the technology behind all these? Let me tell you — It is React. You might be wondering, what exactly is React? From the docs, React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

REACT TRAINING SESSION

Cyphertree arranged for a two-day React training session for its employees. A 16-hour session was headed by a senior developer, Vinit Kumar on 25th and 26th May 2019 on the occasion of the 4th anniversary of Cyphertree.

FIRST DAY INSIGHTS

So on the first day of the session, we were given an insight into what React is doing exactly. What are the specifications that help it to be the way it is? What are the tools we require to use React? The training followed a hands-on approach rather than a theoretical one. We started building a React app using the most recommended and user-friendly boilerplate setup of Create React App, one offered by the official React community. ( Refer https://reactjs.org/docs/create-a-new-react-app.html for creating your first react app )

I had the following add-ons installed in the system for getting started with my app:-

FIRST IMPRESSION OF REACT

Components

So in React, we break up the whole complex UI into independent and dumb components. And we have got props to communicate amongst the components. We need to export each component from where it is defined and import it where it needs to be used. We learned how to write Class based components. Components are one of the most powerful features of React.

Virtual DOM

Virtual DOM is another potent feature offered by React. From the docs, The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. You can infer from this that only the changed part of the ReactDOM is repainted and all the unchanged portion is left as it is. Further, we learned about

  •  State
  •  Lifecycle methods
  •  Conditional rendering

SECOND DAY INSIGHTS

Event handling

You know what are events? Events are everything from clicking on the page to resizing your browser. You might be familiar with Newton’s Third Law of Motion. “Every action has an equal and opposite reaction. ” Events are much like this. You cause some action i.e. event and there is a reaction in the DOM with Event listeners. Event handling in React is made easy through state and data binding. One thing I can assure is you will enjoy this part of coding a lot.

Typescript

Next, we moved on to the basics of TypeScript. TypeScript is a superset of JavaScript that ultimately compiles to JavaScript. Every JavaScript code is a valid TypeScript code but the vice versa is not true. A combination of React and TypeScript is really a good option for front-end web development.

We also covered topics of Lazy and Suspense, PropTypes. As we kept on coding, we understood the concepts better. Also, coding improves muscle memory.

My Message

I would say that React is one of the best options to kick-start your front-end web development career with. If you learn React, you’ll have an edge on your peers in this industry. Keep one thing in mind, whenever you are learning any new technology, keep yourself updated with the changing trends as it evolves faster than you learn. Always remember to go back to the official documentation in case of any doubts. And yes, surely go for React!


Author

Apurva Dey