React is a popular JavaScript framework created by Facebook for building front end applications. Getting started with react is not easy as it seems, there are multiple frameworks and tool-chains available, and it’s important to choose the right one. In this article, we will show you some simple & best frameworks for creating a react app.

Let’s see 5 simple ways to get started with React.

1. Create-React-App

create-react-app is an open-source framework designed by Facebook with 800+ contributors. It provides a simple and easy environment for beginners and professionals and it does not require any setup configuration. create-react-app comes with a CLI which allows us to setup app with a variety of templates. To create the application using the below commands.

npm

npm init react-app my-app

npx

npx create-react-app my-app

Yarn

yarn create react-app my-app

Selecting a template

You can now optionally start a new app from a template by appending --template [template-name] to the creation command.

If you don’t select a template, we’ll create your project with our base template.

Templates are always named in the format cra-template-[template-name], however, you only need to provide the [template-name] to the creation command.

npx create-react-app my-app --template [template-name]

You can find a list of available templates by searching for “cra-template-*” on npm.

To run the application use:

npm start
// or
yarn start

It will open http://localhost:3000 in the browser.

2. Next.js

Next.js is a JavaScript framework designed to build server-side rendering and static web applications using React. It doesn’t need any setup configuration to get started and it also supports typescript. It is a very popular framework and used by big companies like Netflix Jobs, Nike, etc. Use the below steps to create an app with Next.js

There are two ways to create an app using Next.js

create-next-app CLI (Auto setup)

npx create-next-app
# or
yarn create next-app

Manual setup

Install next, react and react-dom in your project:

npm install next react react-dom
# or
yarn add next react react-dom

Open package.json and add the following scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

These scripts refer to the different stages of developing an application:

• dev – Runs next dev which starts Next.js in development mode
• build – Runs next build which builds the application for production usage
• start – Runs next start which starts a Next.js production server

Create a pages the directory inside your project.

Populate ./pages/index.js with the following contents:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}export default HomePage

To start developing your application run npm run dev or yarn dev. This starts the development server on http://localhost:3000.

Visit http://localhost:3000 to view your application.

3. Nano-React-App

Nano-react-app is a replacement for create-react-app. It uses Parcel with zero-config instead of Webpack. It is designed to minimize the structure of create-react-app. To create an app using the below commands.

1. For JavaScript

npx nano-react-app my-app

2. For Typescript

npx nano-react-app my-app --ts

To run the app use

npm start

It will open http://localhost:3000 in the browser.

4. Nwb

Nwb is a great framework design to build publishable React components and applications. It offers a zero-config development setup, but it also supports configuration and plugin modules for extra functionality. To create an application using the below command.

Install nwb globally for quick development and working with projects:

npm install -g nwb

Use nwb new react-app to create a React app skeleton, preconfigured with npm scripts which use nwb for development:

nwb new react-app my-app
cd my-app/
npm start

Open http://localhost:3000 in the browser to view the app.

5. Gatsby

Gatsby is an open-source framework for creating websites and apps. It has over 2000 plugins which allow developers to build websites very fast. To create the application using the below commands.

Install the Gatsby CLI:

npm install -g gatsby-cli

Create a new site:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world

Change directories into site folder:

cd gatsby-site

Start development server:

gatsby develop

Open http://localhost:8000 in the browser to view the app.

Conclusion

We have seen 5 simple & best ways to get started with React. All of these frameworks have their own pros and cons, choosing the right framework is important depending on our needs.

Check my other blog on 3 Simple steps to add pagination in React