Reactjs is trending frontend javascript library in this article we will see how to setup reactjs.
In this blog we are going to setup react app using create-react-app
#1. Install Nodejs and Npm
Before setup we need to install nodejs and npm you can install from here click.
Note : If you install nodejs then npm will be added automatically
#2. Checking Node and Npm version
Checking NPM version
npm -v
Checking Node version
node -v
#3. Installing Reactjs App
npx create-react-app myapp
now move to myapp directory your react app project structure will be like this
#4. Running React in Dev Mode
To start with your react app in development mode run the following command
npm start
5. Testing React app
Our react app will be created along with JEST(testing framework created by facebook) and React Testing Library(library used to test components) here after RTL. We can use jest and RTL to test our app.
6. Generating Build
To Generate build from our app we will use the following command
npm build
Lets make hands dirty by writing some code in react
open react app in your favourite Editor or IDE and go to App.js file and override that file with the following code.
import React from 'react'
const App = () => <div>Hey I did It</div>
export default App
Now start the server and check the output in browser. To start the server use npm start command. once server started go to http://localhost:3000 and check the output in browser.
We are done with Phase 1. It's time to Phase 2 i.e Testing our APP
Go to App.test.js and override that file with the following code.
import React from 'react'
import App from './App'
import {render} from '@testing-library/react'
test("It should work", () => {
const {getByText} = render(<App />)
expect(getByText("Hey I did It")).toBeTruthy()
})
Run npm test to run tests no need to specify names it will take all the files having extensions (.test.js, .spec.js, .test.js)
After successful test our work is getting a build use npm build to generate build and after successful you will able to find build folder in your project folder. You can deploy that folder in any server env like (Nginx, Apache or express static server etc..)
Top comments (0)