Create react app using vite, styled components and react router.

React Vite is a build tool that is specifically designed to be used with React applications. It is an alternative to create-react-app, the popular tool for creating and setting up a new React project.

Vite

There are a few key differences between React Vite and create-react-app that may make it a better choice for some developers:

1.-Faster development: React Vite uses a fast in-memory build pipeline, which allows for faster rebuild times and faster development overall.

2.-Smaller bundle size: React Vite uses native ES module imports, which allows for smaller bundle sizes and faster runtime performance.

3.-Customisation: React Vite allows for more customisation of the build process, as it does not use a fixed set of configurations like create-react-app. This can be useful for developers who need more control over their build process.

Ultimately, whether React Vite or create-react-app is the better choice will depend on the specific needs of your project. Both tools have their own strengths and can be useful in different situations.

Assuming you have yarn installed, run:

yarn create vite

This will create a new Vite project in your current directory, with the basic file structure and dependencies needed to get started. You can then start building your React app using Vite.

Vite will prompt you to choose from a few options to customise the setup of your new Vite project.

Choose a name for your project:

Select a framework:

Select a variant:

For the purpose of this tutorial we chose React and Typescript.

Note that you can also use npm to create a new Vite project by running npm init vite. The process is similar to using Yarn, but you will need to have npm installed on your machine instead.

Components

Now you can create a new component using styled-components. For example, you might create a file called Button.tsx with the following code:

import styled from 'styled-components';
import React from 'react';

const Button = styled.button<{}>`
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
`;

const Button: React.FunctionComponent<{}> = (props) => {
  return <Button {...props} />;
};

export default Button;

To set up routing in your app, you can use React Router. For example, you might create a file called App.tsx with the following code:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Button from './Button';

const Home: React.FunctionComponent<{}> = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/contacts">Go to Contacts</Link>
    </div>
  );
};

const Contacts: React.FunctionComponent<{}> = () => {
  return (
    <div>
      <h1>Contacts</h1>
      <Link to="/">Go to Home</Link>
    </div>
  );
};

function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/contacts" component={Contacts} />
    </Router>
  );
}

export default App;

This code creates two routes, one for the “Home” page and one for the “Contacts” page. It also provides links to navigate between the two pages.

To start the development server and run your app, run the following command:

yarn dev

This will start the development server and open your app in the browser. You should see your app with two routes and a styled button component rendered on the page. You can navigate between the “Home” and “Contacts” pages using the links provided.

That’s it! You now have a React app using Vite, TypeScript, styled-components, and React Router. You can continue building your app by adding more components and routes as needed.