Make sure you have the basic HTML structure set up. This includes the HTML and body tags.
Include the necessary React libraries in your HTML file. You need React, React DOM, and Babel to transpile JSX. These are included via <script> tags that point to where the libraries are located.
Create a container in your HTML where your React application will be rendered. This is typically a <div> with an id, such as <div id="root"></div>.
Write a function for your component. React components are often created using functions. For example: function Header() { }.
Capitalize the component name. React requires component names to be capitalized so it can recognize them as components.
The function should return the JSX code that you want to render for that component. For example: return <h1>Hello World</h1>.
To render the component, use the component as if it were an HTML tag, such as <Header />. This tells React to render the component.
Use ReactDOM.render() to render your component into the desired DOM element. For example: ReactDOM.render(<Header />, document.getElementById('root')).
When using an index on an HTML page, change JSX to Babel so that Babel reads the JSX properly.
To build React applications with components, follow these steps, based on the sources:
Utilize object destructuring to name property values in parameters, allowing for customization. For example, destructure the title from the header to access the title and customize the header.
Incorporate template literals within the JavaScript code to further customize with HTML. For example, wrap the title in template literals to add text.
Implement ternary operators for conditional rendering. This allows you to specify what to render based on a condition, such as ensuring a title prop meets a certain expectation. If the condition is not met, an error message can be displayed.
// index.html - before mapping through lists
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function HomePage() {
return (
<div>
<Header title="I love ReactJS" author="Caleb Park" />
<Header title="I love NextJS" author="Samara" />
</div>
)}
function Header({ title, author }) {
console.log(title, author)
return (
<h1>
{' '}
{author ? title : 'No Book Found by' + author}
</h1>
)
}
const app = document.getElementById('root');
ReactDOM.render(<HomePage />, app);
</script>
</body>
</html>
Iterate over lists using map function
It's common to have data displayed as lists in web applications, so you'll want to know how to render lists in React. Use the mapmethod to iterate over an array and map each item to a list item using an arrow function. This should be done within the return statement, typically inside an unordered list (
When mapping through lists, ensure each child in the list has a unique key property. This helps React identify elements during updates in the DOM. If each item doesn't have a unique ID, you can use the item itself as the key, but it’s better to use an item ID, especially for large lists. If there are two items with the same key, an error will occur.
// index.html - Before hooks and using State
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function HomePage() {
const names = [
'Bakytbekov Jakypbai',
'Boobekov Dastan',
'Kuralbekov Nurjigit',
'Kyzdarbekov Nurdavlet',
]
return (
<>
<div>
<Header title="I love ReactJS" author="Caleb Park" />
<Header title="I love NextJS" author="Samara" />
</div>
<div>
<ul>
{names.map((name, index) => (
<li key={index}> {name} </li>
))}
</ul>
</div>
</>
)
}
function Header({ title, author }) {
console.log(title, author)
return <h1> {author ? title : 'No Book Found by' + author}</h1>
}
const app = document.getElementById('root')
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
Incorporate interactivity with state using React Hooks. To add a button, you can include an HTML tag within your component. React needs to listen to events, such as clicks on a button, using event handlers.
To handle click events, pass in a property onClick to the button. Use Camel case for event names like onClick. Define a function, such as handleClick, above the return statement in your component to handle the click event. Pass this function to the onClick property.
To maintain data or state every time you click, React leverages Hooks. Hooks allow you to add logic, such as state, to your component. State is any information in your UI that changes over time.
Bring in the hook for state by accessing the React library with React.useState(). useState is a method that returns an array.
Destructure the state into values you want to create using array destructuring. The first element is the value of the state. The second element is a function to update the value, typically named with the prefix set, followed by what the state is (e.g., setLikes). You can set an initial value within the useState parameter, such as 0 for no likes. 19. Implement the update function (e.g., setLikes) in your handle click function to change the state of the likes, incrementing the value. Always use the setLikes function to update the state and avoid directly modifying the state to keep it immutable.
// index.html - After hooks and using State
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function HomePage() {
const [likes, setLikes]=React.useState(0)
const names = [
'Bakytbekov Jakypbai',
'Boobekov Dastan',
'Kuralbekov Nurjigit',
'Kyzdarbekov Nurdavlet',
]
function handleClick() {
console.log("Increment Like count")
setLikes(likes+1)
}
return (
<>
<div>
<Header title="I love ReactJS" author="Caleb Park" />
<Header title="I love NextJS" author="Samara" />
</div>
<div>
<ul>
{names.map((name, index) => (
<li key={index}> {name} </li>
))}
</ul>
</div>
<button onClick ={handleClick} > Like : {likes} </button>
</>
)
}
function Header({ title, author }) {
console.log(title, author)
return <h1> {author ? title : 'No Book Found by' + author}</h1>
}
const app = document.getElementById('root')
ReactDOM.render(<HomePage />, app)
</script>
</body>
</html>
