Convert Figma logo to code with AI

kriasoft logoreact-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React

22,704
4,158
22,704
6
View on GitHubView on NPM

Top Related Projects

facebook's avatar

create-react-app

102,511

Set up a modern web app by running one command.

vercel's avatar

next.js

125,825

The React Framework

gatsbyjs's avatar

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

vercel's avatar

vercel

12,783

Develop. Preview. Ship.

redwoodjs's avatar

redwood

17,089

The App Framework for Startups

vitejs's avatar

vite

67,112

Next generation frontend tooling. It's fast!

Quick Overview

React Starter Kit is a comprehensive boilerplate for building web applications using React, Node.js, and GraphQL. It provides a solid foundation for developing isomorphic (universal) web apps with server-side rendering, code splitting, and a well-organized project structure.

Pros

  • Includes a robust set of tools and best practices for modern web development
  • Supports server-side rendering for improved performance and SEO
  • Implements code splitting for optimized loading times
  • Provides a well-structured project setup with clear separation of concerns

Cons

  • Steep learning curve for developers new to React or GraphQL
  • May be overkill for smaller projects or simple websites
  • Requires regular maintenance to keep up with rapidly evolving dependencies
  • Some users report issues with TypeScript integration

Getting Started

  1. Clone the repository:

    git clone https://github.com/kriasoft/react-starter-kit.git MyApp
cd MyApp

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm start

  4. Open your browser and navigate to http://localhost:3000

For more detailed instructions and configuration options, refer to the project's README and documentation.

Competitor Comparisons

facebook logo

create-react-app

102,511

Set up a modern web app by running one command.

Pros of Create React App

  • Simpler setup and configuration, ideal for beginners
  • Official Facebook support and regular updates
  • Extensive documentation and community resources

Cons of Create React App

  • Less flexibility for advanced configurations
  • Limited built-in features compared to React Starter Kit
  • Potential for "ejecting" to gain more control, which can be complex

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const title = 'React Starter Kit';
const component = () => (
  <Layout>
    <Home title={title} />
  </Layout>
);

Create React App:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>Edit <code>src/App.js</code> and save to reload.</p>
      </header>
    </div>
  );
}

Summary

Create React App offers a streamlined setup process and is well-supported, making it ideal for beginners and quick prototyping. React Starter Kit provides more advanced features and flexibility out of the box, catering to developers who need more control over their project structure and configuration. The choice between the two depends on the project requirements and the developer's experience level.

vercel logo

next.js

125,825

The React Framework

Pros of Next.js

  • Built-in server-side rendering and static site generation
  • Automatic code splitting for faster page loads
  • Simpler routing system with file-based routing

Cons of Next.js

  • Less flexibility in project structure compared to React Starter Kit
  • Steeper learning curve for developers new to server-side rendering
  • More opinionated, which may not suit all project requirements

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const HomePage = () => (
  <Layout>
    <Home />
  </Layout>
);

export default HomePage;

Next.js:

import Head from 'next/head';
import Layout from '../components/Layout';

export default function Home() {
  return (
    <Layout>
      <Head>
        <title>Home Page</title>
      </Head>
      <h1>Welcome to Next.js!</h1>
    </Layout>
  );
}

The code comparison shows that Next.js has a more streamlined approach to creating pages, with built-in features like the Head component for managing metadata. React Starter Kit, on the other hand, provides more flexibility in how components are structured and composed.

gatsbyjs logo

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

  • Built-in performance optimizations like code splitting and prefetching
  • Large ecosystem of plugins for easy integration of various features
  • Static site generation capabilities for improved SEO and load times

Cons of Gatsby

  • Steeper learning curve due to GraphQL integration
  • Potentially slower build times for large sites
  • Less flexibility for complex, dynamic web applications

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from './Layout';
import Home from './Home';

function App() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

Gatsby:

import React from 'react';
import { Link } from 'gatsby';
import Layout from '../components/layout';

export default function Home() {
  return (
    <Layout>
      <h1>Welcome to Gatsby</h1>
      <Link to="/about/">About</Link>
    </Layout>
  );
}

The main difference in the code examples is Gatsby's use of its own Link component for internal navigation, which enables performance optimizations. React Starter Kit uses standard React components and routing.

Gatsby is more suited for static sites and content-heavy applications, while React Starter Kit offers more flexibility for complex, dynamic web applications. The choice between them depends on the specific project requirements and developer preferences.

vercel logo

vercel

12,783

Develop. Preview. Ship.

Pros of Vercel

  • Comprehensive deployment platform with serverless functions and edge network
  • Seamless integration with popular frameworks like Next.js and Nuxt.js
  • Automatic HTTPS and custom domain support

Cons of Vercel

  • Less flexibility for custom server-side configurations
  • Potential vendor lock-in for certain features
  • Limited control over infrastructure compared to self-hosted solutions

Code Comparison

React Starter Kit:

import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

render(<App />, document.getElementById('root'));

Vercel:

module.exports = (req, res) => {
  res.json({
    message: 'Hello from Vercel Serverless Function!'
  });
};

Key Differences

React Starter Kit is a boilerplate for building isomorphic web applications with React, while Vercel is a cloud platform for static and serverless deployment. React Starter Kit focuses on providing a foundation for React-based projects, whereas Vercel offers a complete deployment and hosting solution for various frameworks and static sites.

React Starter Kit gives developers more control over the project structure and server-side rendering, making it suitable for complex applications. Vercel, on the other hand, simplifies deployment and scaling, making it ideal for projects that prioritize quick deployment and serverless architecture.

redwoodjs logo

redwood

17,089

The App Framework for Startups

Pros of Redwood

  • Full-stack framework with integrated backend and frontend
  • Built-in CLI for scaffolding and code generation
  • Opinionated structure promoting best practices and conventions

Cons of Redwood

  • Steeper learning curve due to its comprehensive nature
  • Less flexibility in choosing individual technologies
  • Relatively newer project with a smaller community

Code Comparison

React Starter Kit:

import React from 'react';
import Layout from '../../components/Layout';
import Home from './Home';

const HomePage = () => (
  <Layout>
    <Home />
  </Layout>
);

export default HomePage;

Redwood:

import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags title="Home" description="Home page" />
      <h1>HomePage</h1>
      <p>Find me in ./web/src/pages/HomePage/HomePage.js</p>
    </>
  )
}

export default HomePage

React Starter Kit provides a more traditional React setup, while Redwood introduces its own conventions and components like MetaTags. Redwood's structure is more opinionated, guiding developers towards a specific way of building applications.

vitejs logo

vite

67,112

Next generation frontend tooling. It's fast!

Pros of Vite

  • Faster development server and build times due to native ES modules
  • Simpler configuration and setup out of the box
  • Supports multiple frameworks beyond React (Vue, Svelte, etc.)

Cons of Vite

  • Less opinionated structure, which may require more setup for larger projects
  • Smaller ecosystem of plugins compared to webpack-based solutions
  • May require additional configuration for some advanced use cases

Code Comparison

React Starter Kit (webpack-based):

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  }
};

Vite:

export default {
  plugins: [react()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: './src/main.jsx'
    }
  }
};

The Vite configuration is generally more concise and requires less boilerplate compared to webpack-based setups like React Starter Kit. Vite's approach leverages native ES modules, resulting in a simpler configuration file. However, React Starter Kit's webpack configuration offers more granular control over the build process, which can be beneficial for complex projects with specific requirements.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Starter Kit

The web's most popular Jamstack front-end template for building web applications with React.

Features

  • Optimized for serverless deployment to CDN edge locations (Cloudflare Workers)
  • HTML page rendering (SSR) at CDN edge locations, all ~100 points on Lighthouse
  • Hot module replacement during local development using React Refetch
  • Pre-configured with CSS-in-JS styling using Emotion.js
  • Pre-configured with code quality tools: ESLint, Prettier, TypeScript, Vitest, etc.
  • Pre-configured with VSCode code snippets and other VSCode settings
  • The ongoing design and development is supported by these wonderful companies:

    

This project was bootstrapped with React Starter Kit. Be sure to join our Discord channel for assistance.

Directory Structure

├──.github — GitHub configuration including CI/CD workflows
├──.vscode — VSCode settings including code snippets, recommended extensions etc.
├──app — Web application front-end built with React and Joy UI
├──db — Firestore database schema, seed data, and admin tools
├──edge — Cloudflare Workers (CDN) edge endpoint
├──env — Application settings, API keys, etc.
├──scripts — Automation scripts such as yarn deploy
├──server — Node.js application server built with tRPC
├──tsconfig.base.json — The common/shared TypeScript configuration
└──tsconfig.json — The root TypeScript configuration

Tech Stack

Requirements

Getting Started

Generate a new project from this template, clone it, install project dependencies, update the environment variables found in env/*.env, and start hacking:

$ git clone https://github.com/kriasoft/react-starter-kit.git example
$ cd ./example
$ corepack enable
$ yarn install
$ yarn workspace app start

The app will become available at http://localhost:5173/ (press q + Enter to exit).

IMPORTANT: Ensure that VSCode is using the workspace version of TypeScript and ESLint.

Scripts

  • yarn start — Launches the app in development mode on http://localhost:5173/
  • yarn build — Compiles and bundles the app for deployment
  • yarn lint — Validate the code using ESLint
  • yarn tsc — Validate the code using TypeScript compiler
  • yarn test — Run unit tests with Vitest, Supertest
  • yarn edge deploy — Deploys the app to Cloudflare

How to Deploy

Ensure that all the environment variables for the target deployment environment (test, prod) found in /env/*.env files are up-to-date.

If you haven't done it already, push any secret values you may need to CF Workers environment by running yarn workspace edge wrangler secret put <NAME> [--env #0].

Finally build and deploy the app by running:

$ yarn build
$ yarn deploy [--env #0] [--version #0]

Where --env argument is the target deployment area, e.g. yarn deploy --env=prod.

How to Update

  • yarn set version latest — Bump Yarn to the latest version
  • yarn upgrade-interactive — Update Node.js modules (dependencies)
  • yarn dlx @yarnpkg/sdks vscode — Update TypeScript, ESLint, and Prettier settings in VSCode

Contributors 👨‍💻

              

Backers 💰

              

Related Projects

How to Contribute

Anyone and everyone is welcome to contribute. Start by checking out the list of open issues marked help wanted. However, if you decide to get involved, please take a moment to review the guidelines.

License

Copyright © 2014-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file.

Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.

NPM DownloadsLast 30 Days