Your First Web App Using React

React is a front-end web Javascript-based framework library that allows you the developer to create single-page websites for a faster and seamless user experience. This article will teach you how to start your very first react app to get your feet wet even if you know nothing about command lines and have very little knowledge of development. It is very easy to start developing your very first react app from scratch with just a few lines of text.

Before that, you will need to install something called node js. Make sure you are downloading the right versions for your operating system. You can check (Windows) by going into settings->system->about and look for system type. It should either be 32bit or 64bit. Download the respective LTS Installer file and install the downloaded file by following the instruction. All you need to do is hit next and the app will be installed. To check you if the installation were successful or not go to cmd and type node --version. It will show you a version number.

Open up your terminal or command prompted if you are on windows. Then start typing the following lines one after another:

npx create-react-app my-app
cd my-app
npm start

Let’s go over what we wrote here for a better understanding:

• ‘npx create-react-app‘ is the command to create a fresh new react app and ‘my-app’ is the name of your app. Set a name for your app when using this command. One thing to look out for when choosing a name for your app is the name needs to be all lowercase with no space in-between. You can not use special characters either. Take note that this step can take some time depending on your internet speed.

• Then you will need to go to your app’s directory using the ‘cd (name of your app here)‘
• You are only one step away from starting the development of your react app. To start the app you just write ‘npm start’. It will open a tab in your browser and you can see something just like the image below.

Voila! You just created your first react app. The rotating atom confirms it!

Now Lets do Some basic React and make a counter!!

Before we start we some basics of React. Today we will learn about component. Everything you do in react you do inside of a component. You can write everything inside a component and after adding that component inside the App.js file you can show it in the webpage. Now lest get started with the fun stuff!

We start off by creating a folder named component inside the src folder. It is best practice to organize your files from the start. Inside that create a file named counter.js.

Now write this segment of codes to make a new component

import React from 'react';
const counter = () => {
    return (
        <div>
            
        </div>
    );
};
export default counter;

Now we are going to modify the App.js file. Remove everything inside the <div> tag. Now we need to import the counter component from the counter file by adding this line import Counter from './component/Counter'; in the App.js file. We are done with App.js for this project. Now we need to make the counter in the counter component and everything will show up in the browser.

// codes for App.js file 
import logo from './logo.svg';
import './App.css';
import Counter from './component/Counter';
function App() {
  return (
    <div className="App">
      <Counter></Counter>
    </div>
  );
}
export default App;

Inside the Counter.js file we will first add an image. To add an image we need to copy the image file inside the project. Create a folder inside the src folder named images and paste the image there. now all we need to do is import the image using this line of code import counterImg from "./../images/image name here"; It should show up in your app.

We need to learn about states before we move on to the next step. In react to load and update anything inside the app you need something called a state. State can not be replaced or modified. So we use a hook called the useState. useState is a Hook that allows you to have state variables in functional components. You pass the initial state to this function and it returns a variable with the current state value. Line no. 12 shows how you can use the hook to save and update states. After that we wrote some basic function to handle addition and subtraction with a click of a button. We added these functions to the onClick events of the button. You can see we just added the counter sate inside the <h2> tag with parenthesis. Every time the button is pressed it updates the sate of the counter with setCounter() method and it updates the count number inside the sate and it shows up in the <h2> tag. And… just like that we are done with making a counter!!

// Codes for Counter.js
import React, { useState } from 'react';
import counterImg from "./../images/random-number-slots.jpg";
const btnStyle = {
    padding: '10px',
    margin: '10px',
    color: "white",
    border: '3px solid black',
    borderRadius: '10px',
    backgroundColor: ' #04788a '
}
const Counter = () => {
    const [counter, setCounter] = useState(0);
    const add = () => {
        setCounter(counter + 1);
    }
    const substract = () => {
        setCounter(counter - 1);
    }
    return (
        <div>
            <img src={counterImg} alt="" />
            <h1>Click to count!</h1>
            <h2>You clicked {counter} times!</h2>
            <button style={btnStyle} onClick={substract}>Substract</button>
            <button style={btnStyle} onClick={add}> Add </button>
        </div>
    );
};
export default Counter;

Once you are done developing go to your cmd terminal and press Ctrl+c to close the app. Just closing the browser window will not stop the react app from running it in the background.

Now things you might run into, ERRORS!!

• Make sure the name is all lowercase letters and no space in between. If there is something wrong with the name it will show an error and you will need to start over. You should be fine as long as you follow the rules.

• Make sure you have a stable internet connection when you are creating a new app so it downloads everything properly. If there is any problem after launching your app even though it seems like your install was fine, you can always use ‘npm install‘ to initiate a reinstall and it will fix everything that needs to be fixed. ‘npm install‘ can only be used once the app is created.
• If your app crashes or you turn off your app you can always start the app again with ‘npm start‘ and it will start from the last save.

• Make sure to cd into your app after creating because if you miss that step and try to ‘npm start’, it will show a big huge all of errors. (I did that a lot)

That’s it for now, folks. See you in the next articles.