React: Basics and Beyond
React is an open-source JavaScript library designed and managed by Facebook. Now this goes without saying but making user interfaces with React is way more fun than the line written above. To start off, the first thing we could do to being learning about React would be installing the developer tools for the browser. For Firefox, it would just be adding the React Developer tools extension and a sign would appear in the toolbar indicating React being used in the website — pretty neat!
With the tools ready, lets begin!
Starting off with the good old command prompt aka cmd just casually check for the node.js version(Hint: Use as administrator). You would have it installed if you like front-end like me, if not just download it from Node.js.
With Node all set up, lets make the React app. The easiest way to start would be the create-react-app. It does the job of building the basic directory structure and also does the starting code for you. To build an app using create-react-app use the following code. ‘npx’ is used to make a new application which uses ‘create-react-app’ named ‘react-basics’. The real magic begins once you hit ENTER. If its your first time, bear with the cmd but as soon as you see “Happy Hacking!” you know your application is all set to opened.
The next steps would be making yourself comfortable with the application you created. Open it in your favorite code editor (I wont say mine though, wink wink). The most important folder would of course be the source folder. It would have the index.js file. Before we dig too deep into the code, lets get back and understand React components and how they are actually rendered into the DOM. React components are bits of code which could be reused and are integrated using JSX(JavaScript as XML). Lets watch a video to simplify the understanding with an example.
