salak96 / Installasi-React

Tools Install React JS

🚀 About React JS

The React Framework for Production Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Install Vite React

• Vite

npm create vite@latest nama-project -- --template react

• Install node.module

 npm install

Formatter pritter code

npm install --save-dev --save-exact prettier

• Buat folder di root

.prettierrc.json

• Masukan isi .prittierrc.json

{
"tabWidth": 4,
"singleQuote": true,
"jsxSingleQuote": true,
"semi": true,
"printWidth": 150,
"bracketSpacing": true,
"braceSameLine": true
}

• command di terminal

npx prettier --write .

• edit package json . di script tambahkan

"format": "prettier --write .",

• untuk menjalankan di terminal

npm run format

Install Tailwind

• Ketik kode di terminal

npm install -D tailwindcss postcss autoprefixer

• Ketik di terminal

npx tailwindcss init -p

• copy script bawah ke tailwind.config.js ke isi content

content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],

• copy script bawah ke index.css dan hapus semua isi sebelumnya dan hapus "app.css"

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

• kemudian import './index.css'; di main.js

import './index.css';

Running React JS with Tailwind

Install my-project with npm

  npm run dev

Install my-project with yarn

  yarn dev

• Untuk membuka di browser

http://localhost:5173/

🚀 About Me

Saya adalah seorang Front End Developer yang ingin terus belajar dan mengembangkan diri. Saya juga ingin berbagi ilmu yang saya dapatkan melalui tulisan di blog saya lambangsasangka.com.

Support

For support, email [e-mail].