Category: Libraries
-
How to get started with NextJS for the first time?
The first thing you wanna do is to open up your command line terminal and cd into the directory of your choice. Next, see whether NodeJS is properly installed on your system. If not, download and install it. In the next step, inside the terminal type in the following command and hit enter : In…
-
How to setup Svelte Project Development environment using Vite?
Firstly, make sure that the latest version of NodeJS is installed on your computer. If it’s not installed you can install it from here or if you’re on Linux you can use the following terminal command to install NodeJS : After, NodeJS has been installed properly cd into the directory of your choice and type…
-
How to install Bulma CSS Framework into your Web Dev Project?
First create an project folder and add the index.html file in it with the boilerplate code. Next write this line of code inside the terminal to initialize the project with package.json : Next, to install Bulma Framework inside your project type this inside the terminal : The above terminal command imports all the Bulma files…
-
How to Implement Bootstrap via NPM for your Web Development Project?
This command creates a package.json file which contains some details about the project folder you’ve created. This is the first step in initialization of the process. This command installs all the bootstrap files and folders inside your project directory. Here’s the full code setup inside index.html to make you understand everything clearly : That’s how…
-
React State : Basics with Real World Examples
React State is actually an object with encapsulated data which changes in response to instructions given to it using event listeners and handlers. For example, clicking the ‘add item’ button should take you to a screen where the item is added to a shopping cart, or clicking the ‘next page’ link should take you to…
-
Event Listeners and Event Handlers in React
Just like in vanilla JavaScript, React let’s you add event listeners or event handlers wherein if you hover on something or click something, then something else will be triggered. For example, you can write a JSX code in React where if you click a button, a pop-up message displays. Here’s how to add a simple…
-
All about Props in React Components
What are Props? Props are a way for React components to communicate with each other. Props are essentially used to pass data from one component to the other viz-a-viz a parent and a child component. These are information you can pass through a JSX tag/syntax. You can pass any JavaScript values through props like objects,…
-
Everything you need to know about JSX
What exactly is JSX? JSX is simply HTML code inside of a JavaScript function. In a React application, we use components and inside components we write a JavaScript function. Inside the function we write codes using the JSX syntax to make the code work. JSX syntax looks a lot like regular HTML, but are stricter…
-
How to write your first React component
What exactly is a React Component? Components are actually pieces of your User Interface(UI) in React. These reusable UI elements of your React App called components consists of markup(HTML), CSS and JavaScript under the hood. In a React App, every part of your UI is actually a component. These components may be a button, a…
-
How to Setup a React Project Development Environment for the First Time
Before setting up a React App or project, first you’ll need to see whether NodeJS is installed on your system. NodeJS is required to be installed for having Production-Ready apps so that you don’t run into any trouble from here on. So, in order to see whether Node is installed on our system, type this…