React JS
React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
Within this post, we will cover.
- How to setup React development setup environment on your Windows 10 Computer
- We will create our own basic app and launch it.
- We Will use Visual Stidio Code as an IDE for the development.
We will start with the download and installation.
- In case you don't have IDE installed, i recommend to use Visual Studio Code.
- Download and install NodeJS LTS version from official download page.
Steps to setup.- Confirm we have installed Node JS successfully by checking the NodeJs version.
- Open Command prompt and run below command and check if it shows the version as an output.
C:\Users\cyberkeeda> node -v Expected Output
v12.18.1- Create Our first react app.
Now as we have nodeJs installed, lets create our first reactJs application, open command prompt and run the below command.
C:\Users\cyberkeeda> npx create-react-app my-react-app- my-react-app --> name of our react app, it can be anything
- Note : Name must be in Lower Case only.
Success! Created my-react-app at C:\Users\cyberkeeda\my-react-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts 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!
We suggest that you begin by typing:
cd my-react-app
npm start
Happy hacking!
Above success message will appear after the basic setup for our app, in order to start lets follow the process it suggests you on command line.- Toggle to your newly created app directory and start npm
cd my-react-app
npm start
Once started, open your browser and hit the url.
http://localhost:3000
We are done with the basic setup to build our first react js app.
- Confirm we have installed Node JS successfully by checking the NodeJs version.
- Open Command prompt and run below command and check if it shows the version as an output.
C:\Users\cyberkeeda> node -v Expected Output
v12.18.1- Create Our first react app.
C:\Users\cyberkeeda> npx create-react-app my-react-app- my-react-app --> name of our react app, it can be anything
- Note : Name must be in Lower Case only.
Success! Created my-react-app at C:\Users\cyberkeeda\my-react-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts 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!
We suggest that you begin by typing:
cd my-react-app
npm start
Happy hacking!Above success message will appear after the basic setup for our app, in order to start lets follow the process it suggests you on command line.
- Toggle to your newly created app directory and start npm
cd my-react-app
npm start
Once started, open your browser and hit the url.
http://localhost:3000
We are done with the basic setup to build our first react js app.