Say Hello to Reactjs

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..)

Finally