Starting with React: A Beginner's Journey Using Vite and CRA

When setting up a React project, I found that using tools like Create React App (CRA) or Vite simplifies the process significantly. These tools provide a development server, build scripts, and a structured project setup out of the box. While React itself is just a library for building UIs, CRA and Vite streamline the initial configuration and development workflow, allowing me to focus on writing my application rather than managing build tools.

If you were to set up a React project without using tools like CRA or Vite, you would need to manually configure a number of things:

1. Project Structure:

   • Create folders for your source code, public assets, etc.

2. Development Server:

   • Set up a local server to serve your files.

   • Use a tool like http-server or configure a server using Node.js and Express.

3. Build Process:

   • Use a bundler like Webpack, Rollup, or Parcel.

   • Configure Babel to transpile your modern JavaScript and JSX into browser-compatible code.

4. React and ReactDOM:

   • Install React and ReactDOM using npm or yarn.

   • Set up entry points and ensure they are correctly bundled

The package.json file in my project contains metadata about all the dependencies and other configuration settings. It lists all the packages my project needs. By running npm install (or npm i), I can install all the listed dependencies into the node_modules directory, ensuring my project has the necessary libraries and tools.

In Vite, it's compulsory to use the .jsx extension for React components, whereas in Create React App (CRA), it's not mandatory. Components in React are essentially functions that return HTML, which is revolutionary for me because it makes accessing and using JavaScript very easy and simple. By convention, component names should start with a capital letter to differentiate them from regular HTML elements. This convention helps React identify whether a tag represents a React component or a built-in HTML element