w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Script ReactJs
ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

W3TWEAKS by W3TWEAKS
September 21, 2019
in ReactJs
0

In My previous reactjs tutorials, you can find the reactjs setups are done manually. We have to install the packages manually and it will may confuse or maybe we missed any dependencies. So in this tutorial we don’t want to install reactjs manually. All the dependencies and servers are already defined and just do npm install create-react-app will do all the setups for you without any issues. Create React apps with no build configuration. Demonstration and setup, steps are there in the below content.

You might also like

ReactJs: YouTube Instant search working with API

ReactJs: YouTube Instant search working with API

November 26, 2019
0
My first reactJs (Hello World) Project

My first reactJs (Hello World) Project

November 26, 2019
0

Video Tutorial

As in my previous Reactjs installation setup, I mentioned that we have to install nodejs and npm. For this tutorial also we have to install nodejs and npm. Once you installed node and npm, we have to follow the below steps.

Step 1: Installation

Install it once globally:

npm install create-react-app -g

You’ll need to have Node >= 6 on your machine.

Step 2: Creating an App

create-react-app react-first-time
cd react-first-time

It will create a directory called react-first-time inside the current folder.

Inside that directory, it will generate the initial project structure and install the transitive dependencies:

react-first-time
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can run some commands inside the project folder:

Step 3: npm start

Runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.

You will see the build errors and lint warnings in the console.

Step 4: npm test

Runs the test watcher in an interactive mode.

By default, runs tests related to files changed since the last commit.

Step 5: npm run build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

By default, it also includes a service worker so that your app loads from local cache on future visits.

Your app is ready to be deployed.

Tags: installinstall reactReactReactJSSetupsetup react
Previous Post

My first reactJs (Hello World) Project

Next Post

ReactJs: YouTube Instant search working with API

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

ReactJs: YouTube Instant search working with API

ReactJs: YouTube Instant search working with API

by W3TWEAKS
November 26, 2019
0
0

This tutorial will explain how to achieve to get YouTube instant search with API using ReactJs. You can find step...

My first reactJs (Hello World) Project

My first reactJs (Hello World) Project

by W3TWEAKS
November 26, 2019
0
0

Let’s write our first React Component. In my previous tutorial I have explained, how to install and setup the reactJs...

ReactJs: Installation and Setup the Development Environment

ReactJs: Installation and Setup the Development Environment

by W3TWEAKS
September 21, 2019
0
0

Facebook ReactJs is a powerful framework to develop the single page applications. Tutorial will explain you how to install and...

Next Post
ReactJs: YouTube Instant search working with API

ReactJs: YouTube Instant search working with API

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube