React Front End Web Development: Lesson 1 (Install React and Hello world application)

React Front End Web Development: Lesson 1 (Install React and Hello world application)

During this set of tutorials, im going to teach you how to use a front end web framework to make a web application fast. To do this, im using one of the most popular front end framework. React framework is a open source framework developed by Facebook. There are lot of web apps built using react (Facebook, Instagram, Netflix etc) and this is one of the most demanding framework in the industry. During this tutorial, im going to share , how to install react and make a hello work app. Lets get started then.

First of all, we need to install nodejs to work with react. You can install nodejs by using following steps.

STEP 1 – Download installer from official site

STEP 2 – Install it by pressing Next, Next ,Next till it ends. (Feel free to contact me of you have any issues.)

STEP 3 – To check Nodejs is fully installed or not, just use following command in your command line.

node --version

As you can see in the image, it will give you the version that you have installed few minutes back. Mine is v8.11.3

Now we need to install React cli. To make everything easy, there is a command line interface we can use. You have to install it also before you make a new react app. Just paste following code in a terminal or command line to install it.

npm install create-react-app

After finish the installation, You can also run the following code to create a new react app. After you run the code, this cli will create you a simple hello world app, then you can edit it as you need.

//my application name is "PasiApp"
npx create-react-app PasiApp

Now, the cli will do it’s trick and make a simple app for us. To run this edit this app, we need to go inside to the newly created project and execute the following commands. Remember, to start the app, you need to go inside to that folder.

//to go inside to "PasiApp" folder
cd PasiApp 
//to start the newly created app 
npm start

Now you have a working React app. During my next lesson, im going to teach you how to edit this fresh site and how to get user inputs to display. Feel free to share this with your friends. See you soon.

Leave a Reply

Your email address will not be published. Required fields are marked *