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!
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:-
- Visual Studio Code (refer https://code.visualstudio.com/)
- npm or yarn installed in the system (refer https://www.npmjs.com/)
- React devtools enabled in web browser. ( referhttps://github.com/facebook/react-devtools)
- install nvm in the system to manage versions of Node.js (refer https://medium.com/@richardkall/installing-node-js-using-node-version-manager-nvm-c21546a613bc )
FIRST IMPRESSION OF REACT
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 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
- Lifecycle methods
- Conditional rendering
SECOND DAY INSIGHTS
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.
We also covered topics of Lazy and Suspense, PropTypes. As we kept on coding, we understood the concepts better. Also, coding improves muscle memory.
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!