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.
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
it will run your app locally on dev server and will automatically bring up browser on your computer with a default react app.
4. Test your app
To run tests, run the command
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
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.
Go to visual studio code, locate “build directory ” then right click and deploy it on the web ( Azure)