DEV Community

Shreyansh sheth
Shreyansh sheth

Posted on

Diffrent Ways To Create A React Application

1. Create-React-App

Provide a Simple Environment With All The Things Already Setup For You And You Just Have To Write Code.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

CRA Docs

create new app with create-react-app

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

2. Vite

Same As Create-React-App It Provide All Configuration Out Of The Box. Also, It Supports SSR & SSG.

Vite Docs

To Create Vite App

npm init vite@latest
Enter fullscreen mode Exit fullscreen mode

3. Next.js

Currently The Best Tool To Create SSR(server-site-rendered) & SSG(static-site-generation) For React. It Has Inbuilt Optimization That Makes Your App Run So Much Faster & Also If You Want To Add Serverless Function Next.js Also Provides That.

Next.js Docs

To Create Next.js Application

npx create-next-app
Enter fullscreen mode Exit fullscreen mode

4. Gatsby

Gatsby Does SSG And It Has Huge Plugin System To Support Gatsby Compile Your React Code To HTML-CSS So User Don't Have To Wait For Javascript And React To Load
Gatsby Docs

To Create Gatsby App

npm init gatsby
Enter fullscreen mode Exit fullscreen mode

5. Razzle

It Is Serverside Rendering Framework As Well And This Provide Much More Flexibility.
Razzle Docs

To Create Razzle App

npm install -g create-razzle-app
Enter fullscreen mode Exit fullscreen mode

6. <Script> Tags

You Can Use Script Tags For React And After Importing That Your Code May Look Like This.

const e = React.createElement;
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);
Enter fullscreen mode Exit fullscreen mode

(React Docs)(https://reactjs.org/docs/add-react-to-a-website.html)

I Covered Major Ways To Build React App But You Can Setup Your Own System Like These.

Top comments (0)