In my previous blog, I have shown you how to set up your project using create-react-app. In this one, I will discuss more theoretical type of things. You may think why react is easy to work with or why most people prefer it. Well, the first beautiful thing about react is its component-based approach. It divides merely its every work into single components, so at the end of the day, it’s reusable, easy to manage, and easier to understand.
It’s ok if you are still confused as it is a very new thing. Let’s create a component and add it to another file.
I hope you have your previous project setup. If not, then you can see my last blog Let’s Dive Into React. Open your VS code, and in the file you created, you will see some files are already built for you. In there, you will see App.js file in which you will see a return function and import and export files. Here App is a functional component as it has a render function.
So we will run our file in this App.js file. Now let’s open a new JS file. I have named my file FirstComponent.js. In that file, we will create a component.
Alright, now you can see above our very first component! It’s necessary to import React; at the end of the file, you will have to export the component of that file. Always capitalize your component name. Here I have created (FirstComponent) component and returned a simple paragraph. Now in App.js file, you will have to import this component file and call the component there.
As you can see above, I have imported the file. Now it will inherit all the file contents. After that, we will declare it like I did here <FirstComponent />
And you can see the component named ‘FirstComponent’ is shown here.
That is for today. Before the next blog, try creating as many components as possible. Always remember that practice makes a man perfect. Do little things with component and later share that with me.
Well, first of all, it works component-wise, which makes it reusable, organized and easy to handle. It has a great community, and its popularity is growing faster. It has a JSX feature which we will learn soon and also it can be used in web applications or native mobile applications that make it versatile and efficient.
So let’s begin and create some fantastic things out of React.
If you want to use your own editor, you will have to use create-react-app. The create-react-app is an environment that is preconfigured, and it generates the boilerplate version of React application.
First of all open terminal and go to the location where you want to open your first project. Run
Next, go to the file that you have just created and run
npm start in terminal.
After running npm start, you will be given a port number like below.
Click that link, and you will see this page with a nice React logo and some text. Now we are ready to dive into React.
You will have to add React Developers Tool extension. It helps to inspect certain React elements.
Sometimes it doesn’t work perfectly after following step by step. In that case, first of all, update your npm and Node.js. If still, you face difficulties, let me know, I will do my best to help.
We are wrapping up for today. In my next blog, we will create our very first component, and also we will learn about JSX.
Want to receive a fortnightly round up of the latest tech updates? Subscribe to
our free newsletter. No spam, just insightful content covering design,
development, AI and much more.