React is one of the most popular JavaScript libraries in the web development field today. <br /> 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!
Ref
https://vitejs.dev/guide/ https://react.dev/s