File Structure & React + Vite

In this article:

1. How to create React app
2. What is Vite?
3. File Structure
4. Practice Yourself

CREATE REACT APP

Traditionally there are two ways available for creating a new React application, let's see

First Way

-> npx create-react-app appname        

• npx is a tool that comes with npm (Node Package Manager) and allows you to run command-line tools and Node.js packages without installing them globally on your system. It is a relatively new addition to npm and was created to help solve some of the issues with the global installation of npm packages.
• When you run the create-react-app command generates a folder structure and installs all the necessary dependencies to start a new React project. The project is configured with a development server, a build process, and other tools such as Babel and Webpack.

Second way

-> npm create vite@latest        

If you are putting this comment on your command line then it will ask what name you want to use for this project, I mean the project name.

Then it will ask you to choose what framework you want to use for this project as shown above image. After choosing the comfortable framework then it will ask what kind of language you want to use for this project.

Finally, it will create a project for us.

VITE:

• Vite is a build tool for modern web development that provides a fast and efficient development experience.
• It is similar to Create React App, but faster and with some additional features like hot module replacement (HMR) and faster build times.
• Vite uses modern ES modules for building and serving your code, which allows for faster loading times and better performance.
• It supports multiple frameworks like React, Vue, and Angular. Overall, Vite helps developers quickly and easily set up a modern development environment for their web applications.

FILE STRUCTURE:

There is importance in creating a proper file structure in a React application. A well-organized file structure can help to improve the code maintainability, readability, and scalability of the application. It makes it easier for developers to find and modify the code, as well as to collaborate with other team members. A good file structure can also make the code easier to test, debug, and deploy. Overall, having a clear and logical file structure can make the development process smoother and more efficient.

my-react-app
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.js
    index.js
    logo.svg
    components/
      Header.js
      Footer.js
    styles/
      index.css/        

• README.md: This is a file that contains the documentation for your app.
• node_modules/: This is a directory that contains all the dependencies (third-party packages) required by your app. These packages are installed using npm or yarn.
• package.json: This is a file that contains information about your app, including its name, version, dependencies, and scripts.
• public/: This directory contains static assets that are served directly by your app, such as the index.html file and the favicon.
• src/: This directory contains the source code for your app.
• App.js: This is the main component of your app.
• index.js: This is the entry point of your app, where you render the main component (App.js) and mount it to the DOM.
• logo.svg: This is an example file that shows how to import and use static assets in your app.
• components/: This directory contains all the components used in your app. Each component is typically defined in its own file.
• styles/: This directory contains all the CSS styles used in your app.

PRACTICE FOR YOURSELF:

1. Create your own React application using both ways, it will help to know what way is easy and faster.
2. Go through the file structure it will raise some doubts, hold doubts ask Google or me.

That's it KIDS🤘, See you in the next chapter