Now, create a new CSS file called main.css under src/css with the command:Īdd the following code to the main.css file: In this sub-section, you will add a custom CSS file to your project to style your app.Ĭreate a new directory called css under the src/ directory using the following command: The width and height props will set the corresponding image attributes to 200 pixels. The other line inside the function body will create a new tag and link the src attribute to the image component you just imported. The first line will import the image into React as a module. src/App.jsx export default function App ( ) Finally, it will open a command-line menu for project settings and language type.Īfter the script finishes, you will be prompted to enter a project name: It will configure the necessary tools to scaffold a React local development environment. This command will run the Vite executable from the remote npm repository. Run the following command in your terminal to scaffold a new Vite project: You will use the yarn package manager to install and run the scripts. In this step, you will create a new React project using the Vite tool from the command line. A mobile phone connected to the same Wifi network as your computer to preview your app from mobile.
A foundational knowledge of React, which you can learn with the How To Code in React series.It also helps to know modern JS used in React. Familiarity with HTML, CSS, and modern JavaScript.Install Yarn with Step 1 in How To Install and Use the Yarn Package Manager for Node.js. Yarn package manager version 1.22.0+ installed on your machine and familiarity with Yarn workflows.You can install the latest version of Node.js with How To Install Node.js. Node.js version 12.2.0+ installed on your machine.To follow this tutorial, you will need the following: You will create a basic app with a new component, CSS, and an image file, and prepare an optimized bundle for deployment. This tutorial will scaffold a new React App using the Vite tool. These differences result in a faster experience when creating, updating, and building a React App with Vite. Vite also uses the browser-native ES ( ECMAScript) modules for linking to JavaScript files, which doesn’t rebuild the entire bundle after each file change. Vite is a lightweight tool that takes up 31 MB of dependencies, which will save time in starting a new project. Typically, you might create a new project using Create React App, but it can take a lot of time to install over 140 MB of dependencies. The author selected to receive a donation as part of the Write for DOnations program.
0 kommentar(er)
