DEV Community

Cover image for React must have basic setup
Hidayt Rahman
Hidayt Rahman

Posted on • Edited on

React must have basic setup

#react #javascript #webdev #architecture

Installation 

npx create-react-app appName
Enter fullscreen mode Exit fullscreen mode

OR with typescript

npx create-react-app appName --template typescript
Enter fullscreen mode Exit fullscreen mode

Absolute path

Absolute path help us to not care about the folder structure changes even in the middle of development or frequent folder structure changes as it can access files from the root or src folder

Create a file as jsconfig.json in the root of application and paste the code below:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

Don't go with CSS

SCSS instead of inbuilt CSS

Just include the below line in the dependencies inside the package.json file

"node-sass": "npm:sass@^1.49.9"
Enter fullscreen mode Exit fullscreen mode

Ignore the above if you are using any style system

Choose any UI library like bootstrap

Make page attractive even if its a assignment or learning based project
Paste it inside index.html

 <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
Enter fullscreen mode Exit fullscreen mode

optional

Router Config 

import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
Enter fullscreen mode Exit fullscreen mode

Set the config of path

<BrowserRouter>
        <div className="container">
            <Nav />
            <Routes>
              <Route index path="/" element={<Landing />} />
              <Route path="about" element={<About />} />
              <Route path="profile" element={<Profile />} />
            </Routes>

        </div>
 </BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

Use them

 <NavLink to="/" className="nav-link"> Home </NavLink>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

rwxpat profile image

Must-Know Ruby on Rails Gems for Improved Productivity

Patrick Gramatowski -

hitesh_developer profile image

Angular vs Next.js vs Nuxt.js: Choosing the Right Framework for Your Project

Hitesh Chauhan -

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -