Skip to main content

GETTING STARTED WITH REACT JS

 

GETTING STARTED WITH REACT JS

Hi. Welcome to trycoder.com and today, we are going to begin a brand-new series or framework which is called React JS. I believe you must have heard of it one time or another due it’s high need in developer job offers. Learning React JS is very important nowadays as it meets the need of modern technology.

Some developers call React JS a framework because it is really similar to front-end frameworks like Vue JS...

But according to React’s official website, they call it a library. React JS is a library for building front-end UI.

-    React JS was created by Facebook

-    It is used to develop SPA (single page applications) where it changes only what needs to be changed without full page reloading.

-    React JS is the best fit for the view layer of the MVC (model view controller) architectural model.

-    For example, React JS is a standard for MERN Stack (Mongo Express React and Node)

In this tutorial, we will discuss how to set-up and install React JS, then write a “hello world” in React JS.

Take note, this is just the beginning of the series on React JS, so stay tunned to more coding articles on React JS, both on our website and YouTube Channel.

Installation

According to official documentation, there are 2 major ways to get started with React JS, which is either by including it in your website via CDNs or by using the create-react-app method.

Developers usually begin working on React JS from the create-react-app installation which is easier and has lot more additional features.

We are going to install React JS in this tutorial with the create-react-app method.

To install React JS using this method, you must have node JS installed in your local machine since this method allows developers have a React development server offline in their local machine.

You can download and install node JS from their official website.

Then open the command line in your project directory and run the command:

npx create-react-app <name of your app>

for example: npx create-react-app myapp where myapp is the name of your app which will be created in a folder.

Make sure you have a working internet connection for this to be effective as it can’t be successful offline.

GETTING STARTED WITH REACT JS

Wait for a while as the file installs a boiler-plate, then navigate to the directory and hit npm start to run.

GETTING STARTED WITH REACT JS

It might open a tab in your browser on local host 3000, else just do it manually after receiving confirmation from your cmd as seen above.

GETTING STARTED WITH REACT JS

And there you go, Installation Successful.

You can now open the folder and view the files available.

GETTING STARTED WITH REACT JS


In the src folder, you will see an App.JS file which contains the line of code responsible for what you presently see now in the body of your webpage.
Change that to hello world by adding an h1 tag under the anchor tag.

GETTING STARTED WITH REACT JS


Finally.

GETTING STARTED WITH REACT JS

Thanks.
Happy Coding.

Labels:

Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular posts from this blog

JavaScript Functions

  Hi there, and welcome to another exciting lesson on JavaScript. If this is your first time here, please do well to check out our previous lessons. In the previous lesson, we were discussing JavaScript math methods. It was very intuitive as we got to learn how to use the various math methods. To proceed, we shall be looking at JavaScript functions.  A function in JavaScript like in every other programming language could be defined as a block of code that is written to perform a particular task, and this function is usually invoked or called before it is being implemented. We have been talking about methods throughout the previous lessons right. Do you know that those methods are actually functions? Yes they are functions. You can now have an overview of the importance of functions in every programming language. How do we create a function in JS? To create a function, you follow the format function functionName(Argument) {//Block of code }. Some functions do have a return val...
Post a Comment
Read more

JavaScript Math Methods

Hello everyone, and welcome to another exciting JavaScript lesson. In the last lessons you have been seeing other methods being used in JS (for example, the string methods). We shall go further into exploring other methods. This time, it’s going to be math methods. Do not move an inch because it’s going to be a very exciting. Before we look at what a math method is, let’s have an overview of math objects. A math object in JavaScript is a static built-in object that includes properties and methods used in performing mathematical tasks. Talking about math properties, they have the syntax Math.property . Some examples are Math.E that returns Euler’s number, Math.PI that returns PI, Math.LN2 that returns the natural logarithm of 2, and many others. The various JavaScript methods contained in the math object, thus, make mathematical operations easier and reduce effort as well as time in math-oriented programming. Some JS methods include abs( ), ceil( ), cos( ), sqrt( ), pow( ), log( ) ...
Post a Comment
Read more

How to generate random numbers using NumP1

Hello. Welcome to another edition on this platform. For more better understanding, do checkout our YouTube channel to get the video tutorial. In this article of today, we are going to see how to generate random numbers using any of the following methods: Generating a random number Generating a random float and integer Generating random number arrays Generating random number from an array What is a random number? This is a number which cannot be predicted before its occurrence. This number might not different every time. Programmatically, they are two categories of random numbers:     Pseudo-Random numbers       True Random numbers. Just as programs which are written by programmers are a set of instructions, we must follow an algorithm to generate random numbers. Random numbers which are generated using an algorithm are called Pseudo-Random numbers. To generate a true random number, it is important to get the data from sources such as the keyboards, mou...
Post a Comment
Read more