React To-do List Project.
React.js
ReactJS is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. ReactJS is designed to create modular user interfaces and promote the development of reusable UI components that display dynamic data.
What Did I learn from doing this Project using React.js?
Components:
At the heart of React lies the concept of components. A component is a reusable and self-contained piece of code that encapsulates a specific functionality or user interface element. Components can be simple, like a button, or complex, like an entire form.
JSX (JavaScript XML):
JSX is a syntax extension for JavaScript recommended by React. It allows you to write HTML elements and components in a syntax that looks similar to XML or HTML. JSX makes it easier to understand and visualize the structure of your components.
State and Props:
State and props are two fundamental concepts for managing data in React components. State represents the internal data of a component, while props (short for properties) are used to pass data from a parent component to a child component.
Props (Properties):
We have a ParentComponent which returns another component identified as ChildComponent. ChildComponent returns a paragraph whose value can be passed in the data property of ChildComponent.
ParentComponent.jsx:
import React from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const dataValue = 'Hello from Parent!';
return <ChildComponent data={dataValue} />;
};
export default ParentComponent;
ChildComponent.jsx:
import React from 'react';
const ChildComponent = (props) => {
return <p>{props.data}</p>;
};
export default ChildComponent;
Properties can be data, objects, functions. We can create custom properties for components by adding props keyword in argument or we can destructure the props directly in the argument list of the function. here's the modified code using array destructuring:
ChildComponent.jsx:
import React from 'react';
const ChildComponent = ({ data }) => {
return <p>{data}</p>;
};
export default ChildComponent;
Hooks:
React Hooks, introduced in React 16.8, revolutionized state management and side effects in functional components. These hooks provide a more elegant and concise way to handle component logic, making it easier than ever to create dynamic and interactive user interfaces.
useState Hook:
useState accepts an initial state and returns two values:
- The current state.
- A function that updates the state.
Example:
const [color, setColor] = useState("")Here the default state is set to an empty string "". the color is the current state and the setColor function is used to change the current state. You can pass a function to the setColor function when using the
useState hook in React. The setColor function returned by useState can accept either a new state value or a function that computes the new state based on the previous state.useEffect Hook:
The useEffect Hook allows you to perform side effects in your components.
Some examples of side effects are: fetching data, directly updating the DOM, and timers.
useEffect accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency>)
To-do List:
Creating a to-do list app is an excellent way to get hands-on experience with React. I am using Vite to create the react application. Vite is a lightweight tool that can save time in starting a new React project.
Vite is designed to be fast and efficient. It uses a module-based approach that only compiles and reloads the code that has changed, which can save a lot of time during development. Here a video of completed project:
I owe a debt of gratitude to the insightful tutorials provided by Web Dev Simplified for guiding me through the intricacies of React. The clear explanations, practical examples, and step-by-step instructions have been invaluable in helping me grasp the fundamentals of React development. The engaging content and the dedication of Kyle have made my learning journey not only educational but also enjoyable. I highly recommend his channel to anyone looking to delve into React or enhance their web development skills. A heartfelt thank you to Kyle for being an exceptional teacher and making complex concepts accessible to learners like me. if you want to make similar project and learn through creating this project watch the full 40mins video from Web Dev Simplified I have linked it below. Thanks for reading XD.
Comments
Post a Comment