React Js Sample Project
By React JS is a popular JavaScript library that is used to build user interfaces. It was developed by Facebook in 2011 and is currently maintained by Facebook and a community of developers. React JS allows developers to create reusable UI components and build complex applications that can run on the web, mobile, and desktop platforms.
In this tutorial, we will build a sample project step by step using React JS. We will start by creating a simple React application and then gradually add features to it. By the end of this tutorial, you will have a good understanding of how React works and how to build a simple application using React.
Prerequisites
To follow this tutorial, you will need the following tools:
- Node.js and npm (Node Package Manager)
- A text editor (such as Visual Studio Code, Atom, or Sublime Text)
- Basic knowledge of HTML, CSS, and JavaScript
Step 1: Create a React application
The first step is to create a React application. To create a new React application, open your terminal or command prompt and run the following command:
npx create-react-app my-app
This will create a new React application named “my-app” in a directory with the same name. Once the command finishes executing, navigate to the “my-app” directory by running the following command:
cd my-app
Step 2: Run the application
Next, we need to run the application. To run the application, execute the following command in the terminal:
npm start
This will start the development server and open a browser window displaying the React application. By default, the application will run on port 3000. If the browser window does not open automatically, you can open it manually by navigating to http://localhost:3000.
You should see a page that says “Welcome to React”. This is the default page that is generated by create-react-app.
Step 3: Create a new component
Now that we have our application up and running, let’s create a new component. Components are the building blocks of a React application. They are reusable UI elements that can be composed together to create complex applications.
To create a new component, create a new file called “MyComponent.js” in the “src” directory. In this file, add the following code:
import React from 'react';
function MyComponent() {
return (
<div>
<h1>Hello, World!</h1>
<p>This is my first React component.</p>
</div>
);
}
export default MyComponent;
This code defines a new component called “MyComponent” that displays a heading and a paragraph of text. The component is exported so that it can be used in other parts of our application.
Step 4: Add the component to the app
Now that we have created a new component, let’s add it to our application. Open the “App.js” file in the “src” directory and replace its contents with the following code:
import React from 'react';
import MyComponent from './MyComponent';
function App() {
return (
<div>
<MyComponent />
</div>
);
}
export default App;
This code imports the “MyComponent” component and adds it to the “App” component. When the “App” component is rendered, it will display the “MyComponent” component.
Step 5: Add some styling
Now that we have our component displaying some text, let’s add some styling to make it look a little nicer. Create a new file called “MyComponent.css” in the “src” directory and add the following code:
h1 {
font-size
Step 6: Create a form
Now that we have added some styling to our component, let’s add a form to it. The form will allow the user to enter some text and submit it.
To create the form, add the following code to the “MyComponent.js” file, below the “Hello, World!” heading:
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<br />
<label>
Email:
<input type="email" name="email" />
</label>
<br />
<button type="submit">Submit</button>
</form>
This code creates a simple form with two input fields for the user’s name and email, and a submit button.
Step 7: Handle form submission
Now that we have added a form to our component, let’s handle the form submission. When the user submits the form, we want to display the entered values in the component.
To handle the form submission, we need to add an event handler to the form. Add the following code to the “MyComponent.js” file, inside the “MyComponent” function:
function handleSubmit(event) {
event.preventDefault();
const name = event.target.elements.name.value;
const email = event.target.elements.email.value;
console.log(`Name: ${name}, Email: ${email}`);
}
return (
<div className="my-component">
<h1>Hello, World!</h1>
<p>This is my first React component.</p>
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" />
</label>
<br />
<label>
Email:
<input type="email" name="email" />
</label>
<br />
<button type="submit">Submit</button>
</form>
</div>
);
This code defines a new function called “handleSubmit” that is called when the form is submitted. The function prevents the default form submission behavior, gets the entered values from the form, and logs them to the console.
We also added the “onSubmit” prop to the form element and set it to the “handleSubmit” function. This will call the function when the form is submitted.
Step 8: Display form data
Now that we are handling the form submission, let’s display the entered data in the component. To do this, we need to use React state.
Add the following code to the top of the “MyComponent.js” file, inside the “MyComponent” function:
const [formData, setFormData] = React.useState({
name: '',
email: '',
});
This code defines a new state variable called “formData” and sets its initial value to an object with two properties: “name” and “email”, both with empty strings as their values.
Next, update the “handleSubmit” function to set the “formData” state variable with the entered data:
function handleSubmit(event) {
event.preventDefault();
const name = event.target.elements.name.value;
const email = event.target.elements.email.value;
setFormData({ name, email });
}
This code uses the “setFormData” function to update the “formData” state variable with the entered data.
Finally, update the component to display the entered data:
return (
<div className="my-component">
<h1>Hello, World!</h1>
<p>This is my first React component.</p>
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text"Step 9: Add some validation
Now that we are displaying the entered data, let’s add some validation to the form. We want to make sure that the user enters a name and a valid email address before submitting the form.
To add validation, we need to update the “handleSubmit” function to check the entered values:
function handleSubmit(event) {
event.preventDefault();
const name = event.target.elements.name.value;
const email = event.target.elements.email.value;
if (!name || !email || !/S+@S+.S+/.test(email)) {
alert('Please enter a valid name and email address.');
return;
}
setFormData({ name, email });
}
This code checks if the entered name and email values are empty or if the email address is not valid using a regular expression. If the values are not valid, it displays an alert and returns without updating the state.
Step 10: Deploy the application
Now that we have built our sample React application, let’s deploy it so that others can use it. There are many ways to deploy a React application, but one of the easiest ways is to use Netlify.
To deploy the application using Netlify, follow these steps:
- Create a new GitHub repository and push your code to it.
- Sign up for a free Netlify account.
- Click on the “New site from Git” button on the Netlify dashboard.
- Select your GitHub repository and follow the instructions to deploy your application.
Once the deployment is complete, you will be able to access your application using a Netlify URL.
Frequently Asked Questions
What is React JS?
React JS is a popular JavaScript library that is used to build user interfaces.
What are the prerequisites for this tutorial?
To follow this tutorial, you will need Node.js and npm, a text editor, and basic knowledge of HTML, CSS, and JavaScript.
How do I create a new React application?
To create a new React application, run the command “npx create-react-app my-app” in your terminal or command prompt.
How do I add a new component to my React application?
To add a new component, create a new file with a “.js” extension in the “src” directory and define your component in it.
How do I handle form submission in React?
To handle form submission in React, you need to add an event handler to the form using the “onSubmit” prop.
How do I use React state?
To use React state, you need to define a state variable using the “useState” hook and update it using the “setState” function.
How do I add validation to a React form?
To add validation, you need to check the entered values in the form submission event handler and display an error message if the values are not valid.
How do I deploy a React application?
There are many ways to deploy a React application, but one of the easiest ways is to use a service like Netlify.
Can I use React to build mobile applications?
Yes, you can use React Native, a framework based on React, to build mobile applications.
Is React JS free to use?
Yes, React JS is an open-source library and is free to use.
