Simple Hello World in React

First things to do is to install the node js if you don't have yet.

here is the link: install nodejs

Then see the node version in the command line:

    $node --version

Alternatevely you can also install the yarn:

    $npm install yarn -g # -g stands for global

Then install the 'create-react-app' by the command:

    $npm install create-react-app -g

When the create-react-app is installed, the next thing you need to do is:

    $create-react-app hello-world

There will be a help there after installing:

    $cd hello-world

To see all the directory you can use the command:

     $ls for Mac users and GNU/Linux users
     $dir for Widows users

You may find the directory: "usr/"

After that you can use a text editor like: sublim text, atom or visual studio code.
The command line is:

$subl . for sublim text
$atom . for atom
$code . for visual studio code

But you can also open it in just for the right click.

Return back to the command line you can use the command:

$npm start
or
$yarn start

Congratulation!!! If there is no error. You have just created your first app in reactjs.

next things to do is to modify the App.js

When we enter inside of it you can see these lines of code. Don't worry. You can know it after reading this post.

import React from "react";
class App extends React.Component{
render{ return( /.../ )}
}
export default App;

Then to get the Hello World application you can add the jsx inside the /.../.
To know more about the jsx you can find it in the link: more about jsx

But jsx for the hello world we can use is:

<h1> Hello World 
</h1>

After that the google chrome will refresh and you get the hello world application.

For more documentation and help from community:
you can visit these websites:

codepen
codesandbox
or in github

Thank you very much for your reading. See you next time.

Comments

[Ted Hagos]

Hi, nice job. Couple of suggestions;

Instead of making the code-part italics, you could probably use the code-fence syntax of Markdown. It improves readability; so that that code reads like this

import React from "react";
class App extends React.Component{
render{ return( /.../ )}
}
export default App; 

instead of like this

import React from "react";
class App extends React.Component{
render{ return( /.../ )}
}
export default App;

[RajaomalalaSendra]

Thanks for the advice.