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.
Top comments (2)
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
instead of like this
import React from "react";
class App extends React.Component{
render{ return( /.../ )}
}
export default App;
Thanks for the advice.