React Grimoire
  • ⁉️Introduction
  • 🧑‍🎓🧑🎓 React Fundamentals
    • The Basic javascript "Hello world"
    • Basic view on React core API's
    • JSX
    • React Props and styling
    • Components
    • Handling Events With React
    • Form
    • Array and Lists
    • Class Component State
    • Class Component Life Cycle
    • PropTypes
  • 🪝React Hooks
    • Intro to hooks
    • useState
    • useEffect
    • useRef
    • useContext
    • useMemo
    • useCallback
    • useReducer
    • useLayoutEffect
    • useImperativeHandle
    • Hook flow
    • Custom hooks
      • useDebugValue
    • React 18 hooks
  • 📓React Guidelines
    • React Components Composition Guidelines
    • React hooks guidelines
    • The use of Memoization
    • Lifting State Up
  • 🔭Concepts
    • Advanced Patterns
      • Compound Components Pattern
      • Control Props Pattern
      • Props Getters Pattern
      • Custom hook pattern
      • Context Module
      • State Reducer
    • React Under the hood
      • 🏁What is "Rendering"?
      • 🏁React Lifecycle
      • 🏁Reconciliation & Virtual DOM in React
      • 🏁Fiber
    • ⏰Concepts to always have in mind
  • 🧩React ecosystem
    • Forms Tools
      • React Hook Form VS Formik
    • TypeScript
      • 🏁Conditional React props with TypeScript
    • 🏁Build tool choice for MVP projects
    • A CSS methodology comparison
      • 🏁Post CSS processor :Sass
      • 🏁CSS in js :Styled-components
      • 🏁Utility Classes: Tailwind
  • ⁉️Testing
    • In Progress
  • 🎭Performance
    • in Progress
  • 🚀Deployment
    • In Progress
  • 🖼️Design system
    • 🏁What's a design system anyway ?​?
  • 🔗Us-full links
    • Typescript and React basic tutorial
    • React-philosophies
    • React new doc
Powered by GitBook
On this page
  • Quick guide
  • Installation

Was this helpful?

Edit on GitHub
  1. React ecosystem

Build tool choice for MVP projects

PreviousConditional React props with TypeScriptNextA CSS methodology comparison

Last updated 2 years ago

Was this helpful?

Creating React app really doesn't need any fancy builder as you can do it by your self we just simple CDN, thus that approach can work for small exercises or just playing with code , in real world we use building tools that facilitate the task of configuring the project bundling the app and managing 3'rd tiers libraries.

The most common choice is :

It was a very good build tool : it has a lot of integrations that is mature and solid for common business logic . but in modern days i remarked a swift shift to:

You can read more about Vite comparison :

Quick guide

Installation

Vite has various template to chose from as it's not specific to React.

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

As in the fundamentals section we will use only JavaScript we will build our app by just running this command.

With NPM:

$ npm init vite@latest

With Yarn:

$ yarn create vite

You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + React project, run:

# npm 6.x
npm init vite@latest name-of-the-project --template react

# npm 7+, extra double-dash is needed:
npm init vite@latest name-of-the-project -- --template react

# yarn
yarn create vite name-of-the-project--template react

Then just go to your newly created project and install the dependencies and then run the project.

 cd name-of-the-project
 // npm 
 npm install
 npm run dev
 // yarn 
yarn
yarn dev

I did choose react-grimoire as the name of the project but you can name what ever you please

And here you go a react project ready to use . simple right ??

Like create-react-app it's a build tool created by the creator of Vue.js.

It's by far faster than create react up as it uses under the hood against the MegaZord used by Create-react-app .

For all my personal small projects i use Vite as it's blazing fast. but for more complex projects i will choose a framework like or . For now let's stick with vite and JavaScript. and i will talk about my favorite stack in the **** section

🧩
🏁
Evan You
Rollup
webpack
next.js
gatsby
react ecosystem
Vite
Logo
Create React App
Logo
Looking at Vite, A Build Tool Faster than Create React App | theodorusclarence.comtheodorusclarence.com
Logo