React is an open-source javascript library for building front-end applications. React lets you build user interfaces out of individual pieces called components.
You can create your own Button, Thumbnail and Hamburger menu component in React and combine them together to form a navigation menu.
To start a new project in React, you need to follow the following steps
Step 1: Setting Up the Environment
Before starting a new project in react, you need to make sure that you have NodeJS install on your system. You can download the latest version of node at https://nodejs.org. Follow the instructions on the node website to do the installation.
After installing node, there's another important thing you need to install called NPM(node package manager). npm will install JavaScript packages in your project and also keep track of details about the project.
Step 2: Creating a New Project
- Open your terminal or command promt and navigate to the folder or directory that you want to create the project and run the code below
npx create-react-app my-react-app
- Note that my-react-app is the name of the application and you can replace with the desired name of your project.
Step 3: Running the Project
- Navigate to Your Project Directory: Once the project is created, navigate into the project directory:
cd my-react-app
- Run the following command to start the application on a development server:
npm start
This command will start the development server and open your default web browser to view your React application. You can now start editing your React components in the src directory. Any changes you make will be automatically reflected in your browser.
Top comments (2)
Interesting read! 🤔 However, I respectfully suggest considering Vite for new React projects. CRA is no longer recommended in the official React docs - instead, we can find Next.js or Remix there. These alternatives are less bloating, offer faster build times, and gives you more flexibility. But again, it's all about what suits your preferences best. 👍
That's great to hear, thanks for your suggestion Rafal. I will explore it!