ReactJS #1: Start building with React JS

ReactJS is a JavaScript library to build user interfaces. it is a declarative and flexible library that you can use to build reusable components.

React creates virtual DOM in memory and manipulates DOM before making any changes to the browser DOM.

React only changes what needs to be changed!

In this lab, we will explore how to setup, build and run reactjs simple app.

So, lets get started.

1. Setup

First, install Node.Js . This will includes :

2. Create a new project

We will create a simple react app. We will name it as “todo-app”

Using ‘create-react-app‘, run the following command.

npx create-react-app todo-app --typescript

The above command uses –typescript to create react app with typescript.

You can omit –typescript if you don’t want to use typescript

After creation , your app folder and files structure will look like this

c:/codebase/todo-app/
  
  node_modules/
  public/
    index.html
    favicon.ico
    manifest.json
  src/
    App.css
    App.tsx
    App.test.tsx
    index.css
    index.tsx
    logo.svg
README.md
package.json
tsconfig.json

3. Run your App

Run your app locally on your machine

npm run start  

Or

yarn start

it will run your app locally on dev server and will automatically bring up browser on your computer with a default react app.

create-react-app starter app

4. Test your app

To run tests, run the command

npm tests

The above command will start test runner in interactive mode and will run tests that you have written for your components.

5. Build for Production

To deploy react app on any hosting provider, build your app with the command

npm run build  // production build

Or

yarn build // production build

The above command will build your app source code and will copy all compiled files into “build” directory which we can deploy directly it on any hosting provider.

c:/codebase/todo-app/build/

6. Deployment

Go to visual studio code, locate “build directory ” then right click and deploy it on the web ( Azure)

That’s all about getting started with the reactJS app