Some years ago, when I wanted to build WordPress on my computer, I had to download and install MAMP (Mac) or WAMP (Win) to simulate a server on my computer.
MAMP stood for: Macintosh, Apache, MySQL, and PHP. Everything you need to run WordPress on your stand-alone computer (Windows version; Apache, MySQL, and PHP for WAMP). Besides the installation, you had to go through a setup process to finish the install. Not something that was enjoyable to do, in fact, kind of a pain in the butt.

Then along came Desktop server, it was a much more pleasing experience to install WordPress on your local computer. Recently Flywheel Hosting released their own version called Local, making installing and developing your WordPress site on your computer a breeze.

So where am I going with all this?
In the past, you had to download Node JS and NPM on your local computer to run ReactJS. To make matters worse (as a beginner) you needed to use the Command Line to install and run ReactJS. Just mentioning the Command Line, would bring absolute fear on a few beginners faces.

Fast Forward to today, React has made things a lot simpler for the novice to learn and play with React. You do not have to download and install anything on your computer, everything runs in your browser. This makes it much simpler to learn and play with ReactJS for any novice or beginner.


First, go to the ReactJS website.
Click the Get Started button in the header.

 

NEXT

 


Hello World
The easiest way to get started with React is to use this Hello World example code on CodePen. You don’t need to install anything; you can just open it in another tab and follow along as we go through examples. If you’d rather use a local development environment, check out the Installation page.

You can either play with ReactJS Codepen interface.
Or
To be more personal and be able to save your work, I recommend you create your own Codepen account. It is free and you can use it to practice other coding languages.

If you decide to use your own Codepen account, you will need to go into the Codepen settings to prepare the online editor for ReactJS use.

 

NEXT

 


Click on Settings

 

NEXT

 


With the Settings Dashboard open
Pen Settings: JavaScript
JavaScript Preprocessor: Babel
Add External Scripts/Pens
Quick-add: Make 2 selections
1) React
2) React DOM

Save & Close

You are now ready to start learning the basics of React JS.
Here is your first React script to try in Codepen:

HTML

<div id="root">    
</div>

JavaScript

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Output:
Hello, world!

Congratulations: Your first React JS lesson!

For other React installation options

This is just a start in the world of ReactJS. Try it out and see what you think about using this framework.

If you are really serious about using ReactJS in building apps, I suggest you download and install all the necessary components on your computer. You will then have access to the full functionality of this popular framework.


Gerald Watanabe
Islandwebtek

Share This