EN
To begin your journey with React development, the first step is to download and install Visual Studio Code (VS Code). Start by navigating to your preferred web browser and searching for 'Visual Studio Code download.' The official site, code.visualstudio.com, should be the first result. Click on it to access the download page, where you can choose the appropriate installer for your operating system—Windows, Linux, or Mac.
Once you've selected the Windows installer, the download will commence. After the download is complete, open the installer. You can close the browser window at this point. Proceed through the license agreement by accepting the terms and clicking 'Next.' You will then have the option to choose the installation location; the default is usually a Microsoft Visual Studio Code folder. Ensure you have sufficient space on your drive before clicking 'Next.' You can also create a desktop icon for easy access. Finally, click 'Install' to complete the installation process.
After successfully installing Visual Studio Code, launch the application for the first time. To create your first React web application, maximize the window and navigate to the terminal. Enter the command 'npx create-react-app' followed by the name of your project. For example, you might name your project 'testYouTube.' It's important to avoid using capital letters in the project name to prevent errors. If you encounter an error at this stage, it may be due to the absence of npm (Node Package Manager) on your system.
To resolve the npm issue, you need to install Node.js. Return to your browser and search for 'Node.js download.' Visit the official site, nodejs.org, and select the installer that matches your operating system. Once the download is complete, run the installer. Agree to the license terms and confirm the installation path, which is typically set to 'Program Files/Node.js.' Ensure that you check the box to install npm during the setup process. After confirming your choices, proceed with the installation.
After the installation of Node.js is complete, open a command prompt to verify that Node.js and npm have been installed correctly. You can check the version of Node.js by typing 'node -v' in the command prompt. If the installation was successful, you should see the version number displayed. If everything is in order, you can now return to Visual Studio Code to create your React application.
In Visual Studio Code, create a new folder on your desktop named 'react' to house your new React application. Drag and drop this folder into Visual Studio Code. Open the terminal within VS Code and navigate to your newly created folder. Attempt to create your React application again by entering 'npx create-react-app testOne.' If prompted to install additional packages, type 'y' to proceed. This step is necessary as the command will check for any required packages that are not yet installed.
Once the React application has been successfully created, you can run it by typing 'npm start' in the terminal. If you encounter an error stating that you are not in the correct directory, use the command 'cd testOne' to change into the project directory. After navigating to the correct folder, run 'npm start' again. This command will launch your React application, and your default web browser should automatically open, displaying your application at localhost:3000.
With your React application now running, you can explore the project structure in Visual Studio Code. Expand the 'testOne' folder to view the 'node_modules,' 'public,' and 'src' directories. These folders contain the essential files generated by Create React App, providing a basic template for your project. From here, you can begin building and customizing your React application according to your needs.
Q: How do I download Visual Studio Code?
A: Navigate to your web browser and search for 'Visual Studio Code download.' Click on the official site, code.visualstudio.com, to access the download page.
Q: What steps are involved in installing Visual Studio Code?
A: After downloading the Windows installer, open it, accept the license agreement, choose the installation location, and click 'Install' to complete the process.
Q: How do I create my first React application?
A: Launch Visual Studio Code, open the terminal, and enter 'npx create-react-app' followed by your project name, avoiding capital letters.
Q: What should I do if I encounter an npm error?
A: You need to install Node.js. Search for 'Node.js download,' visit nodejs.org, and run the installer, ensuring you check the box to install npm.
Q: How can I verify that Node.js and npm are installed correctly?
A: Open a command prompt and type 'node -v' to check the Node.js version. If successful, you will see the version number displayed.
Q: How do I set up my React project in Visual Studio Code?
A: Create a new folder named 'react' on your desktop, drag it into Visual Studio Code, open the terminal, navigate to the folder, and enter 'npx create-react-app testOne.'
Q: How do I run my React application?
A: Type 'npm start' in the terminal. If you receive an error about the directory, use 'cd testOne' to navigate to the project directory and run 'npm start' again.
Q: What can I explore in my React application?
A: You can explore the project structure in Visual Studio Code by expanding the 'testOne' folder to view 'node_modules,' 'public,' and 'src' directories.