Forem: Dhiraj kumar Nayak

Components in react🔥

Dhiraj kumar Nayak — Sun, 20 Sep 2020 03:25:22 +0000

React has two types of components function component and class components. The component composed together to form an upper-level component.

Function vs class component

function components are defined as the javascript function
where the pros parameter contains the property of the component.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

The class components are defined as the class and are extended with the react component.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Composition of the component

the component can be combined together to form an upper-level component.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Make the component as much as you can split it. If you do that you can reuse the component in others so split it.

Functional component🔥 in React⛅️

Dhiraj kumar Nayak — Fri, 18 Sep 2020 18:47:25 +0000

Components are basic building block of a react application. In react, there are two types of component functional component and class Component. Here we will discuss functional components.

Define a Functional Component

functional component that can be defined as a javascript function.
the props in the function going to contain the property we want to pass to the component.


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Use of functional component.

you can define the function inside other components embedding the function name as a tag, like Welcome as <Welcome/>.

you can pass the property as an attribute of the component tag.


function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

Task Scheduler in Node app

Dhiraj kumar Nayak — Thu, 17 Sep 2020 17:51:18 +0000

Install cron job npm in your project

you have to install cron on your nodejs application
you can install the cron by
npm install cron

Use cron On your project

var CronJob = require('cron').CronJob;
var job = new CronJob('* * * * * *', function() {
  console.log('You will see this message every second');
}, null, true, 'America/Los_Angeles');
job.start();

cron vlaue range

Name	Required	Allowed Values	Allowed Special
Seconds	Y	0-59	, - * /.
Minutes	Y	0-59	, - * /
Hours	Y	0-23	, - * /
Day of month	Y	1-31	, - * ? / L W C
Month	Y	0-11 or JAN-DEC	, - * /
Day of week	Y	1-7 or SUN-SAT	, - * ? / L C #
Year	N	empty or 1970-2099	, - * /

these value are going to use use in the cron job

Some example of creating cron

Expression	Means
0 0 12 * * ?	Fire at 12:00 PM (noon) every day
0 15 10 ? * *	Fire at 10:15 AM every day
0 15 10 * * ?	Fire at 10:15 AM every day
0 15 10 * * ? *	Fire at 10:15 AM every day
0 15 10 * * ? 2005	Fire at 10:15 AM every day during the year 2005
0 * 14 * * ?	Fire every minute starting at 2:00 PM and ending at 2:59 PM, every day
0 0/5 14 * * ?	Fire every 5 minutes starting at 2:00 PM and ending at 2:55 PM, every day
0 0/5 14,18 * * ?	Fire every 5 minutes starting at 2:00 PM and ending at 2:55 PM, AND fire every 5 minutes starting at 6:00 PM and ending at 6:55 PM, every day
0 0-5 14 * * ?	Fire every minute starting at 2:00 PM and
0 10,44 14 ? 3 WED	Fire at 2:10 PM and at 2:44 PM every Wednesday in the month of March
0 15 10 ? * MON-FRI	Fire at 10:15 AM every Monday, Tuesday, Wednesday, Thursday and Friday
0 15 10 15 * ?	Fire at 10:15 AM on the 15th day of every month
0 15 10 L * ?	Fire at 10:15 AM on the last day of every month
0 15 10 ? * 6L	Fire at 10:15 AM on the last Friday of every month
0 15 10 ? * 6L	Fire at 10:15 AM on the last Friday of every month
0 15 10 ? * 6L 2002-2005	Fire at 10:15 AM on every last friday of every month during the years 2002, 2003, 2004, and 2005
0 15 10 ? * 6#3	Fire at 10:15 AM on the third Friday of every month
0 0 12 1/5 * ?	Fire at 12 PM (noon) every 5 days every month, starting on the first day of the month
0 11 11 11 11 ?	Fire every November 11 at 11:11 AM

Use cases

there are total 7 corn fields but the year field is optional. You need to fill atleast 6 cron field to execute.

In 2020 Start Web development with react.

Dhiraj kumar Nayak — Wed, 16 Sep 2020 15:11:06 +0000

Installation of react complete Guide.

If you want to Install before that you need to install node on your system. you can go to the node.js website and download the package note LTS(long term support) version for your system. after you download node then Go to the official react website then you can create a react app using

npx create-react-app my-app
cd my-app
npm start

Now your project will run the desired port

folder structure

node-Modules

It has in the topmost a node_module file which contains the node module which are installed in the app.

public

It contains the favicon and index.html page through which app is rendering

src

It is the main folder where we spend 90% of our time building the component and other services.

App.js

this is the main page of the react application. here we defined our other services

what things you have to learn then after??

react-router: which is going to make your Single page application (SPA) to many pages inside as your need.
react-form: then you must need to learn the react form to implement to make any kind of form to take as input.

these two are the basic library that you must learn then you go for your requirement.

Make Node.js app realtime with less effort.

Dhiraj kumar Nayak — Wed, 16 Sep 2020 13:00:56 +0000

It is easy to build Rest API using the express framework in node.js. But if you want to build a realtime application the change in the database reflects suddenly to the users then implementing socket.io you can make it but it is quite hard to implement the realtime feature, here comes the easy solution for you feathers js.

what is feathers js ??

It is a framework for real-time application and for making the rest API at no cost. this will provide a real backend framework where the code structure has maintained you easily build an application with minimum efforts. It supports databases like mongoose, post grays, almost every database.

How you can install it

TO start with feathers backend you have to start with installing the feathers-cli, which is a command-line interface tool that helps you to generate an application.

how to generate Feathers app

feathers generate app this command will going to ask questions like what should be your project name your preferences javascript or typescript.

then it going to ask you question which database you like to implement
would you like to use the user authentication?

after some questions, it will go to generate an app for you.

how it going to work

it has 3 main things in the src folder where 90% of our work we do.
=> model Folder
=> hooks folder
=> sevices

Models: the model folder contains the model of your data you want to use in your project which is linked to your preferred databases. when you create any service it is going to automatically generate.

Hooks: Hooks are the functions that are implemented before, after, or error the application. hooks have the context
of an object that contains the app, user-related data that can be manipulated before and after the data used. you can create a hook by running feathers generate hook It will generate a hook

Services: Services contain the whole application rest API operation done through the services. you can make a change in the services to manipulate the data of the API. you can generate service by running the command feathers generate service

Feathers is easy to learn to go through the documentation for a clear understanding.

Go to feathers

How to become an app developer?

Dhiraj kumar Nayak — Tue, 15 Sep 2020 03:35:16 +0000

Nowadays every business coming to online so we need to learn to code that the best way to keep your shelf updated to this new generation.

Now the programmer has good carrier opportunities, Good salaries, and a high job satisfaction rate otherwise if you try to start tech businesses or any Tech startup it will be easy for you.

here I am going to show a roadmap for a beginner that how they can learn to code and make their ideas into a product or services.

Start from HTML css

Html and CSS are not the programming language, but using this thing gives you can make a real interface or UI that users can able to Interact with. In our colleges, we thought to a programming language like c, c++ there a blue/black screen appears we write the program and by running these programs we get the result on the same screen but there are no real use cases of this kind of interfaces. when you going to make some applications for human use we must make an interface through which they interact with for that Html & CSS are useful to make interfaces in web application.

How you can learn HTML and CSS

You can learn the basic HTML, CSS in a couple of hours you can learn these things following w3school.com documentation that will help you to understand the basics of the things within a couple of hours.

HTML is just the skeleton where you add CSS to design it as you want.

HTML and CSS build you the interface and design, some application needs some data from the user and they manipulate the data return data as their requirement when the dealing with data comes then javascript comes in the background to perform some operation with data like getting the data from HTML component and storing the data to the database, if there is any file it will upload the data to the storage, retrieve the data from the database and many other things.

How you can learn javascript?

what kind of developer you maybe you need javascript one day.for the majority of the services you need to build a complete application.

Now I tell some history of javascript. javascript is now not the same as before it has become so much power now the javascript which is widely in use is called modern javascript.
after you learn some basics of the javascript, and some object-oriented programming concept now you jump into the frame web frameworks like Rect, Angular, Vue which are on the trend.

Front end framework React, Angular, Vue

There are 3 major front end frameworks to speed up your development In recent statistics react is on top of the frontend frameworks which has a large number of job opportunities and has greater flexibility to integrate anything into it lots of libraries support you find for its UI development. No matter if you want to learn any framework and after a few months you want to switch to another framework it will be easy for you to learn another.

Backed Node.js

You need a backend server to make a Rest API through which you will verify data from the client-side and check the data is authenticated the user or in the required form then save the data to the database other functionality can be done through the backend.

this is a server running in the backend.

Databases

A database is the collection of data. where the data are stored and retrieved as per our requirement. there are many database relational database like Mysql, oracle, post gray,
NoSQL database like Mongo DB.

Firebase A backend solution for beginner

A backend process needs a Server to run where we run the backend services in cloud service providers like google cloud platform, Aws server. But Firebase handles servers on their own end you no need to managing the services on your own.

Flutter set up for android on mac

Dhiraj kumar Nayak — Thu, 06 Aug 2020 03:43:54 +0000

Make sure you have installed JDK and android-studio.

First We have to download flutter Manually unzipping the folder on desktop.Then place the flutter file inside /home creating a new directory /developer and inside the folder, we have to place the flutter file. you should do manually opening finder.

Second thing You should do

then after placing flutter file inside the /User/developer you have to configure your flutter so you need to
edit bash_profile so you need to add the command changes the flutter file location then change it to what is necessary to make.

open up The terminal then place the command and place cd ~/ it will take you to the home directory.

then vi ~/.bash_profile it will open up the text editor you just enter e to edit the file

Press 'i' to insert the file then add a line inside bash_profile

 #export
 export PATH="$PATH:/Users/thedkn/Developer/flutter/bin"

After configuring the path variable you enter ESC key then
Press Shift-z-z to save and exit.

Flutter Set up on the visual studio code

you should have to download the flutter plugin 1st one is the flutter then install it then after it will ask you for
install some Extention

Flutter
Awesome Flutter Snippets

after the installation completed open up terminal go to cd Desktop then a project by flutter create project_name the project_name is according to your project make sure project name is always in small latter.

Run Project

To Run, the project we have to check the flutter is successfully installed or not we have to check in the terminal by command flutter doctor.

opening our project on vs code simply go to Run & Debug then select an emulator installed and it automatically runs your project on Emulator

Fix the common problems arise in Development

A most common problem arises due to the app is compiled wrongly so before you Run delete the build folder which is inside the root of your project.

hope you find it valuable. thank you!