The ongoing Coronavirus pandemic is impacting every part of our lives. Besides, it has wide-ranging ramifications for marketing, advertising and eCommerce as well as several other sectors like travel, entertainment and FMCG. As opposed to, the pandemic has defined a new category of goods called “new essentials.” New essentials are products that help consumers feel
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.
In React, the total user interface is the combination of components. Here we make component by component and add them together, and at last, we get a full view. These components are reusable. You must be familiar with JavaScript functions, React acts just like JS functions and will return HTML via a render function.
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.
Many times you may have wondered, “Alright I have learned the vanilla JavaScript, now which framework should I learn next”. Often after hearing features the path divides there and some choose Angular, some Vue and some prefer the React to proceed further. There are many options, but these are kind of favorite choices. When I finished learning JavaScript, I thought what should I do now. After hearing features, I chose the React. So you may ask now what have you seen that made you so keen in this area. But before that, do you know what React is?
React is a JavaScript library which is used to build user interfaces. It is maintained by Facebook and a community of individual developers and companies.
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 don’t want to set up anything, go with online tools. You can use Codepen or Glitch. You will have to import the React and React DOM from the setting. To unlock the usage of some special features and syntax, in the JavaScript preprocessor dropdown, you will have to choose Babel.
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.
Step 1:
First of all open terminal and go to the location where you want to open your first project. Run
create-react-app <project-name>
Step 2:
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.