Installing ReactJS and creating your first application
To install and use ReactJS, we need two main dependencies: Node.js and NPM. Node.js is a Javascript run-time environment that allow us to execute Javascript code like if we were working on a server.
NOTE: That every web application is meant to be executed in a server if we work on computers.
And second is NPM is a package manager for Javascript, that is, NPM allows us to install Javascript libraries.
Now we are going to see how to install react js
These instructions are for Linux systems.
Step:1
First, we need a tool called curl, if you don’t have it, you can install it typing the following command in a terminal:
sudo apt-get install curl
You are going to be prompt to enter your user password to grant sudo access. After the installation is finished, now let’s install Node by typing the following command:
I’m going to install Node.js v6 LTS Version. If you want, you can install the newest version (v8) by replacing setup_6.x for setup_8.x. Either version will work fine.
Step:3 The command you just type added the Node.js to your repository list, now, let’s install Node.js by typing:
sudo apt-get install -y nodejs
Step:4 If everything is alright, you can check that Node.js and NPM are installed (NPM is included with Node.js) by typing node -v and npm -v, and you should see something like this:
$ node -v
v6.11.1
$ npm -v
3.10.10
Step:5 Also, let’s install build-essential package, which is needed for Node to work properly:
sudo apt-get install -y build-essential
Step:6 Now, let’s install React by typing:
sudo npm install -g create-react-app
create-react-app is a package that we can find in NPM and that will make our task easier. It takes care of every configuration. We only need to use it. Now that we have create-react-app installed,
Step:7 let’s create our first app by typing:
create-react-app hello-world
Step:8 After it finishes creating and setting up the application, we should move into the directory that was just created and that is named like our application by typing cd hello-worl.
I have created hello-world, yours can be anything you want. After a few seconds, a message will appear saying that our application was created successfully, and gives us a few instructions.
Step:9
npm start
This command will start a local server and will open our application in the browser, just like this:
Now we are moving to install the app and going to work on the app . so here we already build an app named as water cycle.so to acess the app and to work on follow the steps as mentoned below:
* We install React by typing:
npm install -g create-react-app
create-react-app is a package that we can find in NPM and that will make our
task easier. It takes care of every configuration. We only need to use it. Now
that we have create-react-app installed,
** We create our app by typing:
create-react-app appname
*** After it finishes creating and setting up the application, we should move
into the directory that was just created and that is named like our application
by typing
cd directory name
For entering into react js we use npm start
This command will start a local server and will open our application
if not,
Then open http://localhost:3000/ to see your app. The initial structure of your app is setup.
Reactstrap installation:
*Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
npm install --save bootstrap
npm install --save reactstrap react react-dom
Import Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.css';
Import required reactstrap components within src/App.js file or your custom component files:
import { Button } from 'reactstrap';
Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method.
Here is an example App.js redone using reactstrap.
CDN
Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.
