DEV Community: reactwindd

Perfect React App

reactwindd — Tue, 19 Apr 2022 12:58:29 +0000

Explanation For Each Dependencies

React Router ➣ Routing (example.com/something instead of example.com/something.html)

TailwindCSS ➣ Quicker Styling

Creating A Vite.js + React.js App

// Command-Line

npm create vite@latest demo --template react
or
npm create vite@latest demo -- --template react

cd demo
npm install

Installing Dependencies

// Command Line

npm install react-router-dom@6
npm install framer-motion
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure Frameworks

// tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

// index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Use React Router

// App.jsx

import { BroswerRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
    return (
        <BroswerRouter>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/page2' element={<Page2 />} />
            </Routes>
        </BroswerRouter>
    )
}

function App() {
    return (
        <>
            <h1>Home</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

function Page2() {
    return (
        <>
            <h1>Page2</h1>
            <Link to='/'>Home</Link>
            <Link to='/page2'>Page2</Link>
        </>
    )
}

export default App;

Next.js + Tailwind CSS

reactwindd — Mon, 28 Feb 2022 14:41:10 +0000

Create your project

Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.

// Terminal

$ npx create-next-app my-project
$ cd my-project

Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

// Terminal

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.js file.

// tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.

// globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process

Run your build process with npm run dev.

// Terminal

$ npm run dev

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

// index.js

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

What is your favourite JavaScript Framework?

reactwindd — Mon, 28 Feb 2022 14:38:02 +0000

Popular JavaScript Frameworks/Library

React

A JavaScript library for building user interfaces.

Vue

An approachable, performant and versatile framework for building web user interfaces.

Angular

A component-based framework for building scalable web applications.

Svelte

A tool for building fast web applications.

How to Create a Vue.js App

reactwindd — Tue, 22 Feb 2022 02:06:26 +0000

Open Command Prompt

Creating a Folder for Vue.js

cd desktop
mkdir "Vue JS"
cd "Vue JS"

Creating a Vue.js App

npm init vue@latest

After executing the command, it will ask you some question about the vue app.

cd <project-name (put your vue app's name)>
npm install
npm run dev

Now your have finish creating a Vue.js App. If you want to see the result, just go to http://localhost:3000

Hover on Duration on Gradients? | TailwindCSS

reactwindd — Thu, 06 Jan 2022 14:48:04 +0000

I have created a website and those containers that are in gradients when it's hovered. The duration-300 just doesn't apply to it. Here is the website Website

Hello World

reactwindd — Thu, 06 Jan 2022 03:03:44 +0000

Website Developing

reactwindd — Wed, 05 Jan 2022 15:11:01 +0000

Web Developing is so FUN! Especially when you finish it and It's works greatly on Mobile, Tablet, Laptop and PC!

Personal Portfolio