Step 1: Set Up the React Application
To get help with React assignment, we ensure that you have Node.js and npm installed on your computer. If not, you can easily download and install them from the official website
- Install Create React App globally (if not already installed):
- Create a new React project named "small-website":
```bash
npm install -g create-react-app
```
```bash
npx create-react-app small-website
cd small-website
```
Step 2: Modify the App Component to Create Our Website
Next, let's modify the `App.js` file to build our small website using React.
```jsx
// src/App.js
import React, { useState } from 'react';
import './App.css';
function App() {
// State to store the user's name
const [name, setName] = useState('');
// Event handler to update the name state when the input changes
const handleNameChange = (event) => {
setName(event.target.value);
};
return (
< div className="App" >
< header className="App-header" >
< h1 > Our Small Website Using React < /h1>
< /header>
< main >
< div className="content" >
< h2 > About Me < /h2>
< p > Hello, my name is {name || 'Guest'}. I'm excited to share our small website with you! < /p>
< input
type="text"
placeholder="Enter your name"
value={name}
onChange={handleNameChange}
/ >
< /div>
< /main>
< footer >
< p > © {new Date().getFullYear()} My Small Website. All rights reserved. < /p>
< /footer>
< /div>
);
}
export default App;
Explanation:
-
We import the necessary modules, including `React` and `useState` from the 'react' package.
-
The `App` function is a functional component that returns the JSX representing our website.
-
We use the `use state` hook to define a `name` state variable and a `setName` function to update it.
-
In the JSX, we use the `header` tag to display the website's title and the `main` tag to contain the main content of the website.
-
Inside the `main` tag, we have a `div` element with the class `content`, where we display the "About Me" section.
-
We use an `h2` tag to display the section title and a `p` tag to show a message with the user's name (or "Guest" if no name is provided).
-
An `input` element is provided to allow users to enter their names. The `value` attribute is set to the `name` state variable, and the `onChange` event is handled by the `handleNameChange` function.
-
Lastly, we have a `footer` tag to display a copyright notice.
Step 3: Apply Some Basic Styling to Make It Look Like a Website
To make our website visually appealing, we'll add some basic CSS styles.
Create a new CSS file named `App.css` in the `src` folder and add the following styles:
```css
/* src/App.css */
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
padding: 20px;
color: white;
}
.main {
padding: 20px;
}
.content {
max-width: 600px;
margin: 0 auto;
}
input {
padding: 8px;
margin-top: 10px;
}
footer {
background-color: #282c34;
padding: 10px;
color: white;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
```
Explanation:
-
We use basic CSS to style our website. The `.App` class is used to center align the content.
-
The `.App-header` class is used to style the header with a dark background color and white text.
-
The `.main` class is not used in this example but could be used to apply styles to the `main` tag if needed.
-
The `.content` class is used to center the content and set a maximum width of 600 pixels with automatic margins to keep the content centered on larger screens.
-
The `input` style adds some padding and a top margin to the input element.
-
The `footer` class is used to style the footer at the bottom of the page with a dark background color and white text. The `position: fixed;` keeps it fixed at the bottom of the viewport.
Step 4: Run the React Application
Now, let's run the React application and see our small website in action!
Save all the changes, and from the root folder of the project, run the development server:
```bash
npm start
```
The React application will start, and you can view the website by accessing `http://localhost:3000` in your web browser.
Summary
The small website using React is now live! It greets users with a friendly message and provides an input field to enter their names. As users type their names, the message updates accordingly. Enjoy exploring the website and building more exciting features using React! Happy coding!