aisyachalvinaizumi/aisyachalvinaizumi-web-reactku

Week2: ReactJs2

Practicum Report

Adding React to the website

1. Make a folder learn-react/week-2/web-react
2. Create index.html file

• Code Implementation:

3. create a js file with the name like_button.js

• Code Implementation:

4. Open the index.html file in your browser

• Result: At first, there is no “Like” button below the Hello World, then I re-check the code. And I found out there is an error in the fuction declaration. And I fixed it.

• And it works like this.

React-app Installation

1. Specify the location to install react, for example on windows C:\react (create the folder if it doesn't already exist, by using CMD or DOS.

• If the position is already in the folder, type the following command: npm install -g create-react-app.
• Then, I found a warning that my tar version is no longer supported.

• So I updated the tar with the command : npm install tar@6 -g. and it works like this.

• check whether the installation was successful or not, type the following command: create-react-app --version

• Then, I execute the defined file with this command’s one by one:
• create-react-app web-reactku

• cd web-reactku

• npm start

• it will automatically open a web page with the address localhost:3000.

• I open the folder with VS Code.

• And I try to run it, in Terminal:

• The browser will automatically open. It will display the same way as before, because there is no any change yet.

Creating Hello Components Using Arrow Function

1. Open the index.js file in src and add an arrow function with the name Hello

3. Run and open your browser