There is a ton of options when it comes to client side frameworks, and often it can be a little confusing for beginners to choose from the wide range of choices. Often these choices boil down to Angular, React and Vue. “So, which is the best choice?”, you may ask. I can’t help but give you the clichéd answer that there isn’t really a best choice. Just pick one and learn it thoroughly, would be the best advice to give, because all the three choices eventually boil down to very similar working strategies.
In case you have made up your mind to start learning React, I shall do my best to give you a thorough introduction of the same!
One of the reasons why React can seem weird to a beginner is that there isn’t a separation of concerns in terms of writing HTML and writing React code. This can seem awkward for most beginners, because when building any application’s client-side, we usually use a template engine like EJS, Handlebars, Mustache, and so on. So the shift to a client-side library which merges the use of HTML and JavaScript can be a little tough!
The very first concept to start with React is called JSX, which stands for JavaScript XML. Basically, JSX allows us to write HTML within React itself. Although there are a few changes, in order to write JSX (which is what every React component eventually renders) you just need to know the basic tags of HTML!
You can go through the this article from the official docs, in order to familiarize yourself with the concept of converting the HTML tags into JSX code for React to render.
Now that we understand how to write JSX, let’s try to understand how React can help us build the User Interface (UI) of an application.
React (and most other client-side frameworks) primarily work by rendering components. This enables a developer to build one component, and re-use it multiple times as required. This is a powerful advantage over using a template engine, because you no longer have to worry about writing code to build all parts of the UI! To illustrate this, consider the example of Youtube’s homepage.
Notice the repeated use of a similar component
Here, notice how all the video suggestion cards have a similar structure to them. A thumbnail, a title below the thumbnail, the channel name below that, and some more details towards the bottom of the card. Using a client side library like React, you can build a generic component to display all of the above, and re-use that same component multiple times.
To leverage this concept, it is important to start thinking of the UI as a structured collection of components. These components can also communicate with one another asynchronously, which can save you some costly page reloads!
“But, how do I build these components?”, you may wonder. Building components mainly comes down to understanding what you want to render for the user, at that instant of time. If you can visualize the end result before you start writing the code, it can make your job a little easier.
React offers two ways to define the components. You can either choose to build a class-based component, or you can build a functional component. As the names suggest, the former uses the concept of ES6 Javascript classes (if you are not familiar with it, click here to learn about it) and the latter uses plain-old Javascript functions.
In case you aren’t able to decide which type of component you should learn first, I would suggest that you learn about functional components, because it is a little more forgiving towards folks with a lesser knowledge of JavaScript classes. You can go through the this article to write your very first component, be it class-based or function-based.
Now that you are aware of the concept of components, the next important aspect to understand is that of the state of a component.
The state of any component refers to all the data that a component needs to store, in order for it to work as expected. In simpler terms, think of the state as a reservoir of data that every component holds. In case the state of a component changes, React will automatically trigger the component to be re-rendered with the updated state!
There are two ways to set the state of the component, depending on the type of component you choose to build. Although you can just stick to using one type of component for every app, I would suggest that you go through both approaches, as it helps you better judge as to which component is more suited for the current application.
Use the following two articles to set the state for a class-based component and a functional component, respectively.
Let’s take a look at what all we have learnt until now, shall we? We learnt that React renders components. We learnt that the entire UI can be built using various components. We also learnt that the components can have their own state. But how will all our components talk to one another? We will need some mechanism to let the components transfer data to each other, right?
This is where we come across another important feature of React, called props. If you have worked with HTML, this concept is very easy to comprehend. Look at the following tag, wherein we use an attribute.
<img src="some/image.png" alt="sample image" >
Here we are setting properties of the tag, by specifying attributes such as src(source) and alt(alternate text). Similarly, in order to send some data from one component to another, we set them as properties(props) of the component being rendered (the child component).
Another simple analogy to understand props is that of function arguments. They are essential for the proper working of the function, but not all functions need them. Similarly, we can have components(of any type) with and without props.
Illustration to understand state and props
The above image illustrates how React Components are able to use the concepts of state and props. An important detail to understand here is that a component can alter its state, but its props are immutable(read-only). This just means that a parent component is responsible for setting the props of its child component, and the child component cannot change them.
Having said all this, there are can always be a case wherein a component neither needs a state nor props! So don’t assume that every component that you build in React needs to have a state, or that it needs props. You can go through the this article for a more robust introduction to the concept of props.
All the concepts I have listed up until now form the basics of React, but there’s much more to it!
The concepts of React are best understood only after you actually try them out yourself. In order to do that, open the CLI of your choice and navigate to the folder you want to start writing React code in. After you do so, type the following shell command
npx create-react-app <your-app-name>
Note that you will need to have installed Node.js and npm in your local machine, in order to execute this shell command. If not, then go here and download Node. You can check if the installation was complete, by typing the shell command node -v or npm -v which should return a valid version number.
Here, executing npx <command> when <command> isn’t already in your $PATH will automatically install a package with that name from the npm registry for you, and invoke it. In short, it lets you execute a command without having to explicitly download a pre-requisite file/tool for your local machine.
Also, note that your ‘app-name’ must be in lower case and can be seperated by a hyphen. So you can just name a folder as your app-name and run the following shell command npx create-react-app . which creates an app of the same name as your current folder.
Command to create a new React app of the same name as the current folder
This command can take a while to finish downloading all the files. Once it finishes downloading all the files, you can open the folder in a code-editor of you choice, and see a list of files similar to the ones in the below image.
Files downloaded from create-react-app
You can type npm start to test that your react app is up and running! You can follow the steps in the next section to clean up the folder and start writing React code.
In case you want to clean up the folders that create-react-app downloads, you can start by typing the shell command rm -rf .git in the CLI to remove the git repo that create-react-app creates for you. After this, you can start with your own git workflow. Check out this article to learn how to setup a basic git workflow, in case you do not know how to do so.
After you do so, you can choose to delete all the files in the public directory, except the files index.html and manifest.json
In the src directory, you can go ahead and delete the files App.test.js , index.css , logo.svg . Unless you want to set up tests for your app, or you plan on converting this app into a PWA, you can also go ahead and delete the files serviceWorker.js and setupTests.js .
Now you have a bare-bones folder with the basic requirements to start working with React. But you can also cleanup your index.html file by deleting the unwanted comments. Note that in case you chose to delete the serviceWorker.js file, make sure that you comment out the following lines from your index.js file.
Comment out the service worker registration line
Also make sure to adjust the imports in the files that are left in your folder, to remove the lines that are trying to import the deleted files!
But, in case you feel overwhelmed by these changes, you can choose not to fiddle with any of these files (i.e, not delete them) and to perform all your changes in the App.js file!
One last feature to understand before you can go ahead and learn the more advanced topics in React, is that of the parent-child relation between the various components. For example, when you bootstrap your React app using create-react-app then only the component from the index.js file is being rendered by React. The index.js file is further invoking the App.js component! This is very important to realize early on, because at the end of the day, any application you build using React, will be a single page application. But that doesn’t mean that you can only render one parent component!
In case all this seems a little confusing, go through the this article to understand the meaning of a single page application.
Lastly, if you feel like a video tutorial with a more hands-on approach to learning will help you learn the basics of React a little better, then do check out this free course. But do note that it does not include the latest concepts of React hooks (i.e, the use of functional components)
Once you feel comfortable with the basic concepts of React, you can go ahead and learn about React Router to integrate it with you current server-side tech stack and build full stack applications. Or you can learn the more advanced topics in React. You can also check out the following article to help you gauge the topics you might need to use!
Medium
Top comments (0)