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
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 more comfortable under stay-at-home orders. This includes office supplies, fitness equipment, cosmetics, housewares, home improvement, toys, and hobby-related products as well as medicine and medical equipment. These goods account for almost 40% of all consumer spending right now around the world. 30% of the total 40% is beauty and cosmetics. Both fitness equipment and toys/hobbies account for 29% of the new essentials spending.
As the world begins to revert to the old habits in the upcoming few months, spending in this category is likely to decrease, but not completely disappear.
Anyways, one important thing is how a customer can buy a product. Right now, of course, it can be from any eCommerce store with home delivery and from the previous statistics, we can say this habit will continue in large part of the customers in future.
Although the increase in shipping delays, eCommerce order volume has increased by 50% compared to 2019. During this Coronavirus pandemic, the eCommerce landscape is changing rapidly. Consumer priorities and behavior have shifted in recent weeks in response to COVID-19, and it means that eCommerce brands need to react quickly and swiftly to maximize organic traffic and revenue.
But those small businessmen who don’t have an eCommerce website, they should at least develop an eCommerce site for online shopping when Coronavirus has a great impact on eCommerce industry. Now this is the demand of the situation and age. Before developing their eCommerce site, they can follow my previous blog on (Top 5 eCommerce Trends For 2020), where I described the latest eCommerce trends for 2020.
Hopefully, we recover faster in the upcoming months from this situation.
Hope that you all like my last blog about Flexbox. Today we will learn more about Flexbox elaborately.
Flexbox direction is a single direction concept. Flex has two direction horizontal rows or vertical columns. Flexbox direction property:
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
The flex-direction default value is row. Now we will create a menu-bar where we are going to use flex-direction.
HTML :
<div class="container">
<h2 class="header">flex-direction property</h2>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.container {
width: 800px;
background: #CECECE;
margin: auto;
}
.header{
margin-bottom: 5px;
}
.menu {
display: flex;
justify-content: center;
flex-direction: row;
}
.menu>li {
padding: 5px;
}
Output:
Suppose we want the menu in reverse order, change flex-direction value to row-reverse.
Output:
Another most exciting use of flex-direction is a sidebar menu. We can easily create vertical column-wise sidebar menus. Here we change the flex-direction to the column.
CSS:
.menu {
display: flex;
justify-content: center;
flex-direction: column;
}
Output :
You can also reverse the column output.
.menu {
display: flex;
justify-content: center;
flex-direction: column-reverse;
}
Output:
By default, flex items an order is source order. Suppose we have three items. Now we change the view order without changing the HTML.
Now we want item-2 to be the first position and then after item-1 is second and item-3 is third. We change it by merely copying paste item-2 before item-1, but now we don’t touch HTML code. We use flex order property. Now we see how to change their position.
HTML:
<div class="content">
<div class="item">
<h3>Item 1</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
<div class="item">
<h3>Item 2</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="item">
<h3>Item 3</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
CSS:
.content{
width: auto;
display: flex;
justify-content: center;
margin-top: 10px;
}
.content>.item {
text-align: center;
border: 1px solid #000000;
margin-right: 5px;
padding: 5px;
}
Before use order property its look like this :
Now change there order :
CSS:
.content :nth-child(1) { order: 2; }
.content :nth-child(2) { order: 1; }
.content :nth-child(3) { order: 3; } We don’t need to change HTML code where easily can change their order by using their flex order property.
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space will take up twice as much space as the others (or it will try to, at least).
HTML:
<h1>The flex-grow Property</h1>
<div class="grow">
<div style="background-color:#FB7F4F;"></div>
<div style="background-color:#ADD8E6;"></div>
<div style="background-color:#F0E68C;"></div>
<div style="background-color:#FAC0CA;"></div>
<div style="background-color:#9F5E31;"></div>
</div>
CSS:
.grow {
width: 100%;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.grow div:nth-of-type(1) {flex-grow: 1;}
.grow div:nth-of-type(2) {flex-grow: 3;}
.grow div:nth-of-type(3) {flex-grow: 1;}
.grow div:nth-of-type(4) {flex-grow: 1;}
.grow div:nth-of-type(5) {flex-grow: 1;}
Output :
So today we learn about direction, order and the grow property of Flexbox.
View Composers are callback or a class method that gets executed when a view is rendered. That means when Laravel loads a *.blade.php file to serve to the browser to display contents it executes View Composers.
Suppose we have some data, we will be needing on multiple views or on any layout file that gets loaded into multiple views. Writing the logic or executing a query inside the blade is bad practice. Or passing the data from multiple controller functions is not a good idea either. That’s exactly when view composers comes into play. Let me give you some example and procedure on how to use view composers to bind data to multiple views using a single logic location.
Suppose we have an e-commerce application that has many categories stored in DB. And we will need the categories list in every view that is being rendered.
We can send the categories to home page like this
public function index() { $categories = Category::all(); return view('welcome', compact('categories')); } 
If we need the category list on /home page, we’ll have to do the same query for the same listing in different function. Now imagine what if we need the data on many pages. Doing that same query over and over again makes it hard to maintain code base. But using View Composers, we can pass the data to multiple view files from one logic block. Let me show you how we can do that.
First lets create a ViewComposer Service provider by running command php artisan make:provider ComposerServiceProvider
The newly created ComposerServiceProvider will look like this.
Now let’s add the ComposerServiceProvider class to config/app.php providers array so that Laravel can recognise it.
On the next step lets create a View Composer CategoryComposer class inside App\Http\ViewComposers folder.
Modify the boot method in the new Provider by adding a composer method that extends view().
public function boot()
{
view()->composer(
'app',
'App\Http\ViewComposers\CategoryComposer'
);
}
Laravel will execute a CategoryComposer@compose method every time app.blade.php is rendered. This means that every time the view is loaded , we will be ready to show the categories in home.blade.php & welcome.blade.php with the categories list from our view composer.
Next, we’ll pass the categories list from our view composer to our views from the compose method.
public function compose(View $view)
{
$categories = Category::all();
$view->with(['categories' => $categories]);
}
Now we can access the categories array on both view files without needing to send data from multiple controller functions.
** Controller **
public function index()
{
return view('home');
}
public function welcome()
{
return view('welcome');
}
Accessing the categories array on welcome.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
<ul class="list-group">
@foreach($categories as $category)
<li class="list-group-item">{{$category>title }}</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
@endsection
Note: It is possible to create a view composer that is executed when all views are rendered by replacing the view name with an asterisk wildcard
view()->composer('*', function (View $view) {
//Logic block
});That’s all for today. See you one the next one.
Web development is the fastest-growing industry not only in Bangladesh but also around the world. To grab the dream job in this sector, do you have the skills to stand out from the crowd? On this blog, you can find top 10 basic skills for a web developer. So, Let’s go!
To become a great web developer, you should stay ahead of the curve. You have to learn new technologies and programming languages and focus on the customer’s needs and wants to keep them satisfied. You also have to keep yourself up to date with the industry; thus a better idea is to follow blogs like Sitepoint, Smashing Magazine, Hacker News etc. and of course our blog. To visit at least one conference in the related field each year should be included in your goal.
In web development projects, the deadlines are always just around the corner. So, to stay efficient, it’s vital to manage your time as best as possible. Good developers struggle with it, but some can not maintain their time management skills. I’m sharing some quick, actionable tips so that you can manage your time correctly-
As a web developer, you have to maintain a regular to-do list, and it will help you to do your every task, resulting you can’t skip a job.
Reminder helps you to do a particular task at the right time.
You can follow the 80/20 rule and try to find your daily tasks that eat away too much time without producing enough results. You may be surprised at how much time you’re spending every day doing things that take way too long for what you get out in return.
When you get stuck on a task, don’t waste your time, communicate with your boss or senior to get a better solution.
We know that HTML, CSS and JavaScript are the three fundamental pillars of Web development. HTML (HyperText Markup Language) is a language that communicates with the web browser, and it dictates the structure of each page on the WWW (World Wide Web). It tells the browser how to interpret the data to form elements on a website. We use it to add style on our site, including the layout and design. We also use CSS (Cascading Style Sheet) to properly display in our website on different devices and screen sizes. HTML5 and CSS3 are the latest standards that work in the most common browsers out there.
When you are master in HTML and CSS, in the long run, you’ll want to learn JavaScript. JavaScript is one of the higher-level programming languages, and it prepares websites more interactive and functional. JavaScript will deliver you to create better experiences for users. You can write special features directly onto your sites with JavaScripts.
PHP (earlier called, Personal Home Page) is a server scripting language, and it is a powerful and useful tool for making dynamic and interactive web pages. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft’s ASP.
Nowadays, many modern consumers use their mobile devices to conduct online searches. Around 60% of online searches occur on mobile devices. So, websites need to adapt to this trend. When websites aren’t consistent with mobile devices, web users don’t display well; users go to a competitive site. That is why a web developer needs to have responsive design knowledge.
Code versioning or version control helps you to track and control, but also revise any changes to your programming. Just imagine that you make a few smaller changes to your code and the whole web site stops working. The changes you made indeed had errors, the quickest and better solution is to track back to the last time of your code that worked.
You can fix any errors or abnormalities in your code by the Debugging process. On average, a developer spends no less than 33 % of his time debugging.
Consumers behaviour is always switching. So, your design, coding as well as development skills will ever express for satisfying the ultimate customers. Therefore, every web developer needs a strong understanding of consumers, especially web consumers, and their need and want. If you can understand them on the whole, it will support you to create the best websites that sell.
In modern-day marketing, Search engine optimization (SEO) is working as the driving force. To get more traffic as well as increase ranking on Google, SEO is the most effective way. Websites that don’t implement SEO won’t show up high enough on search engine result pages. Page upload speed, keyword content, and domain credibility are just some of the SEO skills that web developers should learn.
Are you ready to discover the possibilities in a web development career? Adapt these 10 basic skills and to learn more about web developer skills and how to stand out from the competition, regularly visit our careers blog !
The FlexBox Layout Module makes it easier to design a flexible, responsive layout structure without using float or positioning. Before the flexbox layout module, there are four layout modules:
1. Block
2. Inline
3. Table
4. Positioned
To work with flexbox, we don’t need to install any extra plugins or software. It is a built-in property of CSS3. It is a layout to work. It’s straightforward to use in your project.
Flexible Layout must have a parent element with the display property set to flex.
Today we will learn how to place a logo center in the header section.
First we create index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Flexbox</title>
</head>
<body>
<div class="header">
<h2>Logo</h2>
</div>
</body>
</html>
Now create a style.css file same directory and link that css file to your index.html file
<link rel="stylesheet" href="style.css">Open your style.css and write this css
*{
margin: 0;
padding: 0;
}
body{
background-color: cadetblue;
}
.header{
display: flex;
background-color: #cecece;
height: 60px;
align-items: center;
justify-content: center;
}
Mobile view
Desktop view
Here you can see that we write no media query CSS to make it responsive. It’s already responsive. Now overview the CSS.
We put display flex on the parent class. Parent class also has two CSS property align-item and justify-content. Align-item is working on y-axis and justify-content working on the x-axis. If we want a content position in a horizontal center, we use justify-content: center, that places the content to center position. If we want a content position in a horizontal center, we use align-item: center, that places the content to center position.
/* Item Position alignment */
align-items: center; /* Make items around the center */
align-items: start; /* Make items from the start */
align-items: end; /* Make items from the end */
align-items: flex-start;/* Make the flex items from the start */
align-items: flex-end; /* Make the flex items from the end */
justify-content: center; /* Make items around the center */
justify-content: start; /* Make items from the start */
justify-content: end; /* Make items from the end */
justify-content: flex-start;/* Make the flex items from the start */
justify-content: flex-end; /* Make the flex items from the end */
In my next blog, we will talk more about Flex-box, with some other tricks…
We have discussed the fundamentals of JavaScript in my previous two blogs. Today I am going to discuss the rest of the fundamentals of JavaScript, and this is the final part of fundamentals series. Today we cover Switch case, Function, Arrow function, and JavaScript Special. Let’s get started.
A Switch case statement can replace multiple if checks in a more descriptive way.
The switch case has one or more cases with a default option. Here is the syntax:
The value of x is checked for strict equality to the value from the first case that is value 1 after that check value 2 and so on. If there the equality found then switch case start to execute code and after executing code unit execute break. If no equality found, then, it executes the default case.
If we want to execute multiple cases for the same value, we will use the Grouping case.
Take a look at the following example:
Now Case 3 and 5 show the same message. The ability to group we can know-how switch casework without break statement.
Sometimes we need to use the same piece of code multiple times in the script. For example, in a script, we need to add two numbers multiple times. For that, we will write a function that takes two numbers as a parameter return sum of two numbers.
When we call the function like showMessage any part of the same function, showMessage function execute and show the alert.
Variable that declare inside any function that called a local variable, because we can not access those variables outside of this function.
A global variable that declared the outer side of the function, we can use those variables inside a function and all over in the script.
There we can get clear the concept of global and local variables. In the first function message a local variable (Declare inside a function) inside a function, console log the message, But outside the function, it will through an error because we can not access a local variable outside of the function. But we can access the global variable (Function 2 UserName) inside and outside any function and modify the value inside function.
We can pass arbitrary data to function using parameters.
When the function is called in lines (**) the given values are copied to local variables from and text. Then the function uses them.
A function can return value to the code wherefrom it called
Add Numbers function returns the sum of two number 1, and 3. We can save the value in a variable x. This way a function can return value.
Hey there! I have been developing a laravel based application for more than a year now. I know a thing or two about how to write code on Laravel but truth to be told; I know very less about how Laravel handles all the executions under the hood. Recently I & some of my colleagues have decided to learn how laravel works its magic. So as a part of that, I studied “Laravel Request Lifecycle” today. And I am going to share what I learned from it. Yes, I know you can read about that on laravel documentation, but in this blog, I am going to break it down step by step.
But first, let me give you a quick example of why you should learn about that. Take riding a motorcycle, for example. It’s not mandatory to learn how the motorcycle engine works, simply learning how to ride a bike is enough. But when you know about its engine, how it works, what kind of oil it requires, it’s capabilities, then you become more confident while riding it. Because you know everything about and that gives you more confidence utilizing its full potential. Learning what happens under the hood of the Laravel framework is almost same. In my opinion, It’s essential to understand the inner workings of any tool you are given to work with, a complete understanding of that tool will enable you to use all the power that comes with the tool.
The entry point (Eg: https://https://shoroborno.com or any other URL) for all requests to a Laravel application is the public/index.php file. All requests are directed to this file by your web server (Apache / Nginx) configuration. If you are familiar with Laravel, I think you have seen the file. It doesn’t have much code in it. It’s simply an entry point which loads all the necessary files to handle the request you submitted from your web browser.
The next step occurs on the Kernel part of the application. There are two kinds of Kernel request HTTP or Console.
The request is sent to either HTTP or Console Kernels based on the request which has been sent to the application. These two Kernels acts as a central location that all requests flow through. For this blog, let’s focus on the HTTP part of Kernels which handles the requests sent to your application via HTTP method which is located in app/Http/Kernel.php .
It receives a request and returns a response. All of this is accomplished by the handle method available to the Kernel class. Once the handle method recognizes an HTTP request, it returns an HTTP response. The Kernel class extends the Illuminate\Foundation\HTTP\Kernel class, which contains a bootstrap method. This method checks if our application has been bootstrapped (the process of starting or resetting ) already. If not, the bootstrap method runs on a bunch of classes to bootstrap the application. It loads the configuration file, also loads the environment variables, handles exceptions, registers facades and also registers the application’s service providers. The application’s default service providers are stored in the app/Providers directory.
The Kernel also defines a list of HTTP middleware that requests needs to pass through before being handled by your application. So what middleware does? It merely filters your requests that are trying to enter your application. For instance, you don’t want to give the user access to some page without being logged in. You can handle that by using middleware in your route files.
One of the most important Kernels bootstrapping actions is loading the service providers for your application. All of the service providers for the application are configured in the config/app.php configuration file’s providers array. First, the register method will be called on all providers, then, once all providers have been registered, the boot method will be called.
Service providers are responsible for bootstrapping all of the framework’s various parts, such as the database, queue, validation, and routing components. Since it configures all the features offered by Laravel, it’s the essential component of your Laravel application.
Once the service providers bootstrap the application, the request is now passed to the router for dispatching. The router will dispatch the request to a route file or to a controller to handle the further process. For instance, getting data from database and showing them on a page or storing data to the database.
Now let me give you a step by step request life cycle that will help you visualize the steps mentioned above.
Step 1
The user input https://shoroborno.com/ in the browser and hits ‘enter’.
Step 2
Once the user hit this URL, the browser will send the page request over the Internet to the web server (Apache or Nginx).
Step 3
The web server will receive the request and analyze the request information. In the web server’s configuration file, the site’s root path is specified. Based on that, the web server will look for index.php file in that root directory, since URL doesn’t contain any subdirectory or any other routes.
Step 4
Web server will direct the request to public/index.php file of laravel application.
Step 5
In this step, PHP Interpreter is executing the code contained in the index.php file from the request. During this step, auto loader files which are generated by composer will be loaded.
Step 6
Then it will create the laravel instance and bootstrapping the components of laravel.
Step 7
The kernel will receive the request, load the service providers and will be redirected to router.
Step 8
Router will render the view file content and return back to web server.
Step 9
Web server receives the output from PHP and sends it back over the Internet to a user’s web browser.
Step 10
The user’s web browser receives the response from the server, and renders the web page on user’s computer.
I hope this helps you understand the request life cycle. You can also learn more about it from the Laravel documentation.
Just writing code is never enough. Anyone with a couple of months practice can do that. Most of us have the misconception that a good Software Engineer means he knows a lot of programming languages. That’s genuinely not the case. Yeah, learning one or two new programming language benefits. But that doesn’t help you become a good Software Engineer.
The software engineering culture is very much intimidating. It’s fun & challenging at the same time. If you love sticking to your laptop and solve interesting problems, then this might be the most passionate job you can look for. I am neither a nerdy engineer or expert on this culture. Today I am going to share what I observed & learned to work as a Junior Software Engineer for last one year. Yeah, folks, it’s been one year already ;). So let’s begin…
The range of skills required to become an excellent software engineer is vast. Like I told already learning to code is not enough. You need to learn a lot of other things too. It might seem a little bit overwhelming, trying to learn new things while adapting with this rapidly growing industry. But hey everything comes with a price.
Be confident about your skills. But don’t be confident that much that you start feeling like you know everything. Once you start feeling that there’s no way you are going to learn something new. Truth be told the field is so vast that there’s no possible way you know everything. You will always have lacks. And without that, how would you know that you need to learn something new. So always have the attitude that you don’t know everything and willing to learn whenever required.
Clean code and easy to understand code is a must. Your code should be easily understandable by the next person who looks over it. None of us likes messed up codes. You can learn writing clean codes by practice, getting ideas from seniors, reading blogs about it. My theory is that “Your code should be more beautiful than your attire” Let me give you some essential points to keep in mind while writing codes.
This list goes on and on. It’s better to keep reading articles about it. Different programming languages have different coding structure. Follow those articles based on the programming language you are working.
The practice is the hardest part of learning. And it’s the essential part of your learning curve. You need to practice not once a month or week; you should practice every day. Even great musicians or artists practice their skills on a regular basis.
Learning theory and exploring new ideas is, obviously, essential to improving yourself in any discipline. The most important step, though, is turning those concepts into engrained knowledge and muscle memory. In this way, programming is a lot like learning an instrument.
Until you burn in those core concepts and you will need to continue to learn these throughout your career, you will struggle with the basic components of programming, for example-
On the surface, this seems like a dumb question, but it isn’t! Practicing an instrument diverges from programming because you can pick up a piece of music and play that same piece over-and-over until you get better. Programming doesn’t work quite the same way, because once you’ve solved a problem, you can, at best, iterate on that solution to improve it.
When you find yourself stuck somewhere, don’t start asking a question immediately. Try to solve that with any possible solution you can come up with. And if that doesn’t help, then start googling stuff or take suggestions from others. Find the solution and try to understand what you did wrong compared with the solution you found.
Don’t feel embarrassed by asking questions. It may feel little weird but trust me whenever you are stuck on a task for more than 30 minutes you really should ask a question or discuss with others. It will improve two things (1). Improvement with teamwork (2) Also has the ideas on how people approach different solutions for the same problem.
The best way to learn is to find a problem you want to solve and try to solve it yourself. Maybe you want to automate something or calculate some value regularly.
Keep your eyes open in your own life for things that you would like to work better, or try to improve on something you already use. Then try to research and see if you can solve it. Don’t get caught up in finding a “perfect” solution, instead see how close you can get in a short amount of time.
These little exercises will keep your mind fresh and have the benefit of having no fixed goal so that you can have fun with them.
That’s all for today. Sorry for this looooooong article :p
Flutter is a UI toolkit for building applications for mobile, web and desktop from a single codebase. It is developed by Google.
We can use Rest API to process data in Flutter. Also, there is some database by which we can connect directly from the app. Cloud Firestore is one of them. We will discuss how can we connect our Flutter app with Cloud Firestore and some of its awesome features in this blog.
Firebase comes up with a more advanced version of it which is called Cloud Firestore. It is also a NoSQL Database with a realtime feature. The difference with Firebase is its structure of data storage. Usually, realtime databases stores data in JSON tree. But in Cloud Firestore, it stores as a collection. On collection, It can have any number of Documents; these documents contain data.
There is a package cloud_firestore for a flutter. From https://pub.dev/, get the package to the Flutter project.
Using the Firebase Console, add an android app to the project and then follow the steps. And, download the google-services.json file and place it inside android/app after that modify the android/build.gradle file and the android/app/build.gradle file to add the Google services plugin as described by the Firebase assistant.
The detailed documentation you will find from here https://pub.dev/packages/cloud_firestore.
After connecting the Cloud Firestore to the app, we can create, read and update the database from the app.
Cloud Firestore is a fast, fully managed, serverless document database that simplifies it to store, sync, and query data for mobile, web and IoT apps at a global scale.
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.