- Published on
Install and Set Up a React.js Application
- Authors
- Name
- Nguyen Duc Xinh
React is one of the most popular JavaScript libraries in the web development field today.
So let's start with the basics. In this post, you are going to learn how to install and run a React application the easy way.
Prerequisites
- NodeJS and Yarn
Create new ReactJS with Vite
yarn create vite --template react-ts awesome-react
# You can use npm, pnpm or bunx
# npm create vite@latest
# pnpm create vite
# bunx create-vite
Explaining
--template react-ts: Using React + typescriptawesome-react: Project name
Navigate to your project and install dependencies
cd awesome-react
yarn install
Start the Development Server
yarn dev
This command will launch the application in your default web browser. You should see a default React welcome page.
Open your browser and navigate to http://localhost:3000 to view your React application 
Understanding the Project Structure
Explore the project structure to understand the key directories:
src: This is where your application code resides.public: Contains the HTML file and other static assets.node_modules: Contains the dependencies installed by Yarn.package.jsonandyarn.lock: These files manage the project's dependencies and settings.
Edit the App Component
Open the src/App.tsx file in your preferred code editor. Modify the contents of the App component to see changes reflected in the browser.
Conclusion
Congratulations! You've successfully set up a React application with Vite and Yarn, enjoying a fast and efficient development environment. This guide provides a solid foundation for your React journey. As you explore further, refer to the official Vite, React, and Yarn documentation for additional features and optimizations.
Happy coding!