- Published on
Creating Your First React Project
- Authors
- Name
- Andre Chandra Putra
Introduction
React ( also known as React.js or ReactJS ) is a free and open-source front-end JavaScript library developed by Meta and a community of developers.
React has become one of the most popular JavaScript framework for building user interfaces. React can be used to build interactive and responsive single-page applications and mobile, or server-rendered applications with frameworks like Next.js.
NPM vs NPX
The NPM ( Node Package Manager ) is the default package manager for Node.js. NPM is a package installation tool.
The NPX ( Node Package Execute ) is a tool for executing packages. It is an npm package runner that can execute any package from the npm reigstry without even installing that package.
If you use npm, you have to first install the create-react-app tool locally before you use create-react-app to create the app. Packages used by npm are installed globally.
npm install -g create-react-app
create-react-app my-react-app-name
cd my-react-app-name
npm start
If you use npx, you are able to run the create-react-app code without first downloading the project. A package can be executed without installing the package.
npx create-react-app my-react-app-name
cd my-react-app-name
npm start
Setting Up a New Project using Create React App
The create-react-app tool is ajn officially supported way to create React applications. create-react-app will set up everything you need to run a React application. To use create-react-app, you need to have Node.js installed first. If it`s not installed on your computer, you have to install it first otherwise you wont be able to run your project.
- Run this command to create a React Application
npx create-react-app my-react-app-name
- Run this command to move to the directory
cd my-react-app-name
- Run this command to run the React application
npm start
Inside the app directory, you can run several commands :
- npm start : to start the development server
- npm run build : bundles the app into static files for production
- npm test : start the test runner
- npm run eject : removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can`t go back so becareful.
After running these commands, you should see this result.
There you go, you`ve succesfully created your first react project.