Posted by H-AZAD

Facebook developed the React.js UI library, which allows us to think logically about our frontend webpages and apps. It's also a lot of fun and a quick method to create the ideas we come up with! Even the website you're viewing is created entirely with React.

React enables us to create apps that:

• Can be completed fast
• Are simple to grasp
• Allow us to watch the data flow rationally.
• Scales well with both small and big teams.
• Transfer knowledge from desktop applications to mobile apps

 

Recommend knowldge before learing React:

• HTML and CSS knowledge is required
• JavaScript expertise is required & ES6
• Some familiarity with the DOM
• Some understanding of Node.js and npm (and installed on your computer)

Creating an App

You may build a new app using one of the following methods:

npx

npx create-react-app my-app

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

 

Selecting a template

You can now optionally start a new app from a template by appending --template [template-name] to the creation command.

If you don't select a template, we'll create your project with our base template.

Templates are always named in the format cra-template-[template-name], however you only need to provide the [template-name] to the creation command.

 

Creating TypeScript App

You can start a new TypeScript app using templates. To use our provided TypeScript template, append --template typescript to the creation command.

npx create-react-app my-app --template typescript

 

Output

Any of these commands will create a directory named my-app within the current folder. It will build the basic project structure and install the transitive dependencies within that directory:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

There is no any configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder by typing:

cd my-app

 

Scripts

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.