Portfolio app with nextjs, reactjs and typescript.

priyanshu740 — Thu, 29 Feb 2024 19:28:18 +0000

In this guide, we'll walk through the process of creating a portfolio app using Next.js, React.js, and TypeScript, from setting up the prerequisites to the basic steps to get you started.

1. Pre-requisites

Basic knowledge of JavaScript and reactjs.
Make sure you have Node.js installed on your machine, You can download and install Node.js from nodejs.org.

2. Project setup and creting a nextjs enviourment

Create a Next.js App:

Open your terminal or command prompt and run the following command to create a new Next.js app:

npx create-next-app@latest my-portfolio --typescript --eslint cd my-portfolio

Once the project is created, navigate to your project directory:
To enable TypeScript, install the required dependencies:

npm install --save-dev typescript @types/react @types/node

Make sure you have node version above 18.12.0 to run the next app.

Run the development server

npm run dev

*3. System design *

We are going to divide this application in some steps from system design to making different components and using MVC approach.

-> System design

After the setup of nextjs project, we are going to install require dependancies for the project we are going to setup tailwind css in the app.

npm install -D tailwindcss postcss autoprefixer

Now configure tailwind.config.js file and replace it with this code
`/** @type {import('tailwindcss').Config} /
module.exports = {
content: [
"./app//.{js,ts,jsx,tsx,mdx}",
"./pages//*.{js,ts,jsx,tsx,mdx}",
"./components//*.{js,ts,jsx,tsx,mdx}",

// Or if using src directory:
"./src/*/.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}`

Typescript files are compile to javascript.

Creating pages for application

First we will start by creating a navigation bar for the application,
For that go to components and create a new file called Navbar.tsx
Further, we will create a UI for it, and add list and navigation to different pages through it

You can customize the navbar according to your need, like change the styles, removing or adding some lists.

Stay tuned for next blog on next week!

Code : https://www.buymeacoffee.com/Priyanshu7401.

How to start ReactJs for begginers

priyanshu740 — Sun, 14 Nov 2021 05:59:01 +0000

hello, dev community i am gonna tell you how to start learning Reactjs . this post is only for beginners and for how to start learning react , we will also gonna discuss about Pre-requisites and topics and fundamental to learn before react

Pre-requisites for learning react

we assume that you have clear some below fundaments of this topics before learning react

1) Basics of HTML

2) Basics of CSS

3) Basics of JavaScript(Variables,DOMmanuplation,datatypes,events etc)

Installing ReactJs

-> for installing reactjs in windows click here

-> for installing reactjs in MacOs click here

Learning react

Fundamentals: All the above things we have discussed were the prerequisite of ReactJS. Now once you learn all the above things it’s time to jump into React. Understand the basic concept of React first

the first thing you need to learn about react is state and props and how to use them

State: Basically ‘state’ holds synchronous variables. If you change the value of a state variable then the change is reflected immediately in all the places that particular variable is used.

Props: are just like arguments passed in a function or method. In React props (arguments) are passed into an HTML tag as input arguments.

after learning state and props you can learn the diffrence between functional component and class component
both of the approchs are good for reactJS but i will suggests that if you are newbie in react then first learn the function component as you are familier with the es6 fuinctions and otheer approches of the javascript

after that you can create simple projects like

simple to-do application
https://github.com/kabirbaidhya/react-todo-app
calculator
https://github.com/ahfarmer/calculator

What is state and adding state to the application

The state

Unlike the props, the state data is local and specific to the component that owns it. It is not accessible to any other components unless the owner component chooses to pass it down as props to its child component(s).

Even while the child component receives the data in its props, it wouldn’t know where exactly the data comes from. Maybe it was inputted or comes from the props.

Adding state to the component

Now, once the component receives this input data, we need to pass it to a central location where we can manage it and display in the browser view.

This allows other components to have access to this data.

For instance, the TodosList component will be accessing the data and display its todos items. Also, the TodoItem component (which holds the checkbox and delete button) will be accessing the data to update the checkbox, update edited items and also remove items from the state.

To add a state in a class component, we simply create a state object with key-value pair. The value can be of any data type. In the code below, the value is an array.

state = {

todos: [],

}

The React Developer Tools

If you want to inspect and debug your application, check your components tree or see how React works in real-time, you will need this tool. It is available as a browser extension for Chrome and Firefox.

Let’s go ahead and install it.

Head over to the extension page for your browser of choice (Chrome here and Firefox here) and install it.

Once you install it, you are done. It doesn’t require any other setup.

=> after learning some basic concepts like installing it how to use components how to debug the application etc. you will learn react lifecycle , event handling , how to use external library's in another part

Forem: priyanshu740