1 | initial version |
To create a page using React JS, follow these general steps:
Example:
import React from 'react';
function MyPage() {
return (
<div>
// Your page content goes here
</div>
);
}
export default MyPage;
Example:
import React, { useState } from 'react';
function MyPage() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
// Your page content goes here
}
Example:
import React, { useState } from 'react';
function MyPage() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
return (
<div>
<label>Name</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
<label>Email</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
<label>Phone</label>
<input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} />
// Your page content goes here
</div>
);
}
export default MyPage;
Example:
import React, { useState } from 'react';
function MyPage() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// Save the data to a database, etc.
}
return (
<div>
<form onSubmit={handleSubmit}>
<label>Name</label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
<label>Email</label>
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
<label>Phone</label>
<input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} />
<button type="submit">Submit</button>
</form>
// Your page content goes here
</div>
);
}
export default MyPage;
Example:
import React from 'react';
import ReactDOM from 'react-dom';
import MyPage from './components/MyPage';
ReactDOM.render(
<MyPage />,
document.getElementById('root')
);
This is just a general guide and your implementation may vary depending on your specific needs.