How to create a react app and initial setup

1. Create React App:-initial setup

Installing Yarn

• Yarn is another package manager like NPM, but is better suited and faster to work with for React applications. So let us install yarn and use it for building our React applications.
• To install Yarn, you can find the instructions for your specific platform at [https://yarnpkg.com/en/docs/install.](https://yarnpkg.com/en/docs/install)
• If you choose not to install Yarn, you can continue to use npm in place of yarn without any problem.

Installing create-react-app:-

From the React documentation we learn that the create-react-app CLI makes it easy to create an application that already works, right out of the box. It already follows the best practices suggested by the React community!

• To install create-react-app globally, type the following at the prompt:

yarn global add create-react-app

Use sudo on a Mac and Linux. Alternately you can use npm, by typing “npm install -g create-react-app

• This will make the command line tool for creating React applications. To learn more about the various commands that this CLI provides, type at the prompt:

create-react-app --help

Generating and Serving a React Project using create-react-app:-

• At a convenient location on your computer, create a folder named React and move into that folder.
• Then type the following at the prompt to create a new React application named portfolio:

npx create-react-app portfolio

• This should create a new folder named portfolio within your React folder and create the React application in that folder.
• Move to the portfolio folder and type the following at the prompt:

yarn start

• This will compile the project and then open a tab in your default browser at the address http://<Your Computer’s Name>:3000.
• You can initialize your project to be a Git repository by typing the following commands at the prompt:

git init

git add .

git commit -m "Initial Setup"

Thereafter you can set up an online Git repository and synchronize your project to the online repository. Make sure that the online Git repository is a private repository.

2.Configure your React Application

Configure your React Project to use Reactstrap

• To configure your project to use reactstrap, type the following at the prompt to install reactstrap, and Bootstrap 4:

yarn add bootstrap

yarn add reactstrap

yarn add react-popper

yarn add react-router-dom

Note: You can also install the same using npm using the “npm install <package> — save” option if you are using npm instead of yarn.

Configure to use Bootstrap 4

• Next, open index.js file in the src folder and add the following line into the imports:

. . . import 'bootstrap/dist/css/bootstrap.min.css'; . . .