ReactJS Tutorial for Beginners: Build Your First React Application (Part 2)
Tags: react, beginners, webdev, frontend
Published: 2023-03-29 09:18:15

In [Part 1 of this blog post](https://dev.to/stephengade/complete-reactjs-tutorial-for-beginners-step-by-step-guide-part-1-3ih) series, we discussed the fundamental requirements to master before learning ReactJS. 

Now, we'll focus on getting familiar with the ReactJS syntax.

###  class to className

When assigning a class to an HTML tag, we use `className` instead of `class` in ReactJS. And the reason is because in JavaScript, `class` is a special keyword and since react app (JSX) is JavaScript-based, className is used to avoid any naming conflict.

For example:

```javascript
<div className="my-class-name"></div>
```

### Importing and exporting

One of the best reasons why libraries like Reactjs is used in building web application is because of reusable component featured… You can create a component, let’s say Navbar and use the same piece of code for your entire application.

How is this possible? By importing and exporting the component and we can import modules, images etc.

Here's an example:

```javascript
import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

```

Here we are importing “REACT” package from a source called `react` so that we can use the foundational code base to build our application.

And then we are exporting the component so that we can use it somewhere else as well.

### React Hooks

Another essential feature of ReactJS is React Hooks. 

These are reusable functions that give access to managing and manipulating states and lifecycles in ReactJS. 

Before React v16.8, developers used a class method for declaring components, but it was difficult to understand the syntax as the project got larger. Now, almost all React developers use functional components over class-based component declarations.

The two most commonly used React Hooks are `useState` and `useEffect`. Other Hooks exist, and developers can also create their hooks by extending React Hooks.


With this knowledge, let's build a simple ReactJS application.

## Building a Simple ReactJS Application

Our simple app will feature a form page that takes user data and logs the result to the console when the user clicks the submit button. Since we don't have a backend endpoint, we won't submit the data to the server.


### Here's an overview of what we need to do:

- Bootstrap a React project
- Clean up the starter files
- Create the form


Let's get started!


### Step 1: Bootstrap a React Project

To bootstrap a React project, we'll use `create-next-app`. Open your terminal, navigate to the directory where you want to create your project, and run the following command:

```javascript
npx create-next-app my-app-name
```

This will create a new React project named my-app-name. Next, navigate to the project directory and start the development server with the following command:


```javascript

cd my-app-name
npm start

```

NOTE: You can use any Reactjs framework to build react application such as Next, Vite etc. We are using [Nextjs](https://nextjs.org/docs) in this tutorial.


Now that your app is up and running, you can it in your browser at http://localhost:3000/.

### Step 2. Clean Up the Starter Files


Before we create the form, let's clean up the starter files. Delete everything in the `src` directory except for index.js and App.js. We'll also remove the contents of App.js.


Our App.js file should look like this:

```javascript
import React from 'react';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;
```

Also, don't forget to remove all the imports of the files deleted otherwise, your app will throw error because you're importing files that no longer exist.

You can try searching for the names of the files and folders deleted in your code editor and remove all the imports.

If you're using [Vs code](https://code.visualstudio.com/), it will warn you and tell you where those dead imports are.

Step 3. Create the Form

Let's add a form to our `App.js` file. We'll create a state for the form input values using ``useState`` hook. Here's the complete code for our App.js file:


```javascript
import React, { useState } from 'react';

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Name: ${name}\nEmail: ${email}\nPhone: ${phone}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={event => setName(event.target.value)}
        />
      </label>
      <br />
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={event => setEmail(event.target.value)}
        />
      </label>
      <br />
      <label>
        Phone:
        <input
          type="tel"
          value={phone}
          onChange={event => setPhone(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;
```

Code explained:

In the code above, we are using the `useState` hook to manage the state (or store the initial value) of our form inputs. We are also defining a function called `handleSubmit` that will be called when the form is submitted. 

This function will prevent the default form submission behavior such as reloading the form page (we use `event.preventDefault()` fot that purpose) and log the form data to the console.

Also we are handling change on our `<input />` to listen to whatever user type. If you don't handle change on forms, the you will not get input value from the user. 

> There are other ways to get value from form aside handleChange but I won't digress to that in this blog post

Also, notice that with pure JavaScript, you will have to get the id of a particular element (say button) and apply `addEventListener` to it like this:

```javascript
const button = document.querySelector(“.btn”)

button.addEvenListener(“click” function())
```

to this in reactjs

```javascript
<button onClick={() => function()} />
```

Inside the return statement, we are using JSX to define our form structure. We are using the value attribute to bind the state of our inputs and the onChange event to update their state when they change.


Now, we need to import our Form component into our App.js file and render it inside the div element we created earlier.


```javascript
import React from 'react';
import './App.css';
import Form from './Form';

function App() {
  return (
    <div className="App">
      <h1>My React App</h1>
      <Form />
    </div>
  );
}

export default App;


```

### Step 3. Test and deploy


Now that our form page is complete, we can test it by running our application with the following command:


```javascript
npm start

```

This will open up a new browser window at http://localhost:3000/ with our application running.

Enter some data into the form and click the submit button. You should see the form data logged to the console.


Congratulations, you have built your first React application!


## Conclusion: React.js is a simple frontend library


In this tutorial, we learned the basics of Reactjs syntax, including assigning classes, importing and exporting, and React Hooks. We also built a simple form page that takes user data and logs it to the console.


Reactjs is a powerful library for building web applications, and this tutorial is just the beginning. There is much more to learn, but hopefully, this tutorial has given you a good foundation to start building your own React applications.

If you have any question, feel free to ask and I together with the community here will be ready to help.

Thank you.