React.js for beginners. Basic step by step guide with examples and explinations.
Prerequisite: IDE, node, npm, React. (Steps to install)
Basic knowledge of html, css, java script and web developement is required.
Index
- Create React App
2. Components in React.
3. Using the State Hook.
Create React App.
First make sure that you have installed Node, npm, and react using following commands
node -v
for now i am using latest version of node that is v16.13.1.
npm -v
i am using npm version of 8.3.0
After checking that you have react installed on computer. Create a folder with the name of your choice. Navigate to the folder and run the following commands
Create new folder.
mkdir NewFolder
Navigate to that folder using following command.
cd NewFolder
Create react app using following command.
npx create-react-app appname
appname can be anything of your choice. The command is create-react-app followed by app name of your choice.
After installing the react you can see the above files folders created in your app folder.
to run the react app type the following command in the terminal
npm start
Note: You have to be in the react app folder while running the above command
After running the command in the browser on http://localhost:3000 you can see the following webpage running
All of the modules required to build the project may be found in the node_modules folder.
public folder contains files like index.html, fevicon.ico, manifest.json and many other files
The src folder contains the files App.css, App.js, App.test.js, index.css, index.js, logo.svg, reportWebVitals.js, and setupTests.js.
Like in the basic html css websites we use index.html as root webpage. Here in react we use App.js to control which webpage will be the landing page here in our code we have index.js.
Starting the code with cleaning up some unncesessary files for now. Delete the files named App.css, App.test.js, index.css, logo.svg, reportWebVitals.js, and setupTests.js files.
Example 1: First React App
Now open /src/App.js and change the code to make it a hello world. You can see the following code in the App.js
Change the App.js code as follows
Now in terminal type npm start command to run the react app if the command is already running just refresh the page.
Now you can see Hello World being displayed.
Components in React
Component is one of the most impotant concept of react. Actually react is single page application(SPA) which has multiple components. For example traditional html css websites you have to write headers & footers all the time on multiple pages which is same code repeated on each page you create. React offers components to be written one time and can be called on web page where ever needed.
Let us create a component in already existing Hello world page let us create a header named I’m Header Component. Follow the following steps to create and call the react component in the website. Make a folder named components in src.
Example 2: Components in React
Write the following code by creating a file named Header.js.
Now update the code as below in the app.js
In the code you can see that we are importing the Header using import Header from “./components/Header” and then calling it on the web page using <Header />. The “./components/Header” specifies where the Header file is present.
Now run the command npm start to start the react app if the command is already running you can refresh the page. And you can see the following output.
Using Click Events in React
React events are written in camel case. To understand the button and click Event.
Example 3:
Write the following code in App.js
After refreshing the web browser you will be able to see a button.
Now right click on web browser and click on Inspect Element. Now you can see a window like this.
When you click the button you can see the message written in console.log(“The Message”) in the console.
Using the State Hook
Hooks were introduced in React 16.8. State hooks lets you use other React features without writing additional classes.
The useState hooks in react allows us to define some value at the beginning and we can update the value of the state after some operation is performed.
Example 4:
Let us make an example copy paste the code in App.js
Once you run the above code you can see the output as follows.
You can find all the codes in this Github Repository.
