React/ReactJS: Creating Your First App
It is assumed that you have Node.js installed in your system, but if not, you can find a detailed list of instructions on how to install it via the package manager here: https://nodejs.org/en/download/package-manager/
Open you terminal and check the version of Node.js in your system; it should be above 6.
npx package runner globally.
npm install -g npx
Get to the directory where you want your app to be and decide a name for it; here I have called it
hello-app, but you can give any other name you please. Type the command
npx create-react-app hello-app
Navigate inside the
hello-app directory just created.
You will find that there are three directories —
src — and three files —
.gitignore file lists all the files and directories that should be ignored while committing into the Git repository, including the
node_modules directory which contains all the dependent and sub-dependent packages. The
package.json file contains some project-related metadata and lists all the dependencies and scripts needed for the app. The
public directory contains a favicon (
manifest.json file which provides information about your app and the
index.html file inside which the components would be rendered. The
README.md mark down file contains some 2400+ lines of instructions on configuration, operation, testing and installation and other notes on common bugs and troubleshooting. The
src directory contains the following files by default —
App.js— A default ReactJS component. You may modify/rename/delete it.
App.css— Styles for the
App.jscomponent. You may modify/rename/delete this file also.
App.test.js— A test file written for Jest, a Node-based test-runner.
index.js— The main file where the
App.jscomponent is imported and directed to be rendered inside the
index.css— Styles for the
logo.svg— The light-blue ReactJS logo (you may delete it too later if you do not need it).
registerServiceWorker.js— A service worker to cache local assets.
You may create subdirectories and put your JS, CSS, image and test files inside
Run your ReactJS app in the development mode.
The command automatically launches the app in your default browser. We get our first ReactJS app running.
You will notice that it runs on port 3000.
The 'Welcome to React' statement comes from the
App.js file located inside the
/src directory. You can modify its content, rename or even delete it.
Check your terminal. It flashes the message 'Compiled successfully!' in green and also gives the LAN address along with the port number (
http://192.168.0.43:3000) so that you will be able to access your app even from a phone or tablet connected to the same network.
You should NOT rename the following two files:
index.htmlfile inside the
index.jsfile inside the