Forem: Nikhilesh Mauje

Master React.js by Focusing on the Vital 20% Concepts

Nikhilesh Mauje — Tue, 17 Dec 2024 06:28:22 +0000

When it comes to learning any technology, there’s a golden rule: focus on the most impactful 20% of concepts to grasp 80% of its functionality. React.js is no exception! By zeroing in on the key ideas, you’ll save time and build a solid foundation for creating interactive, dynamic web applications.

In this blog post, I’ll walk you through the essential 20% of React.js concepts you need to know. Once you master these, you’ll be confident enough to build your first React app and tackle more advanced topics with ease.

This is just an overview of concepts that you can start with to get a better grip on the React library. Once you're comfortable with these, you can explore more advanced topics like Context API, Redux, and Server-Side Rendering (SSR).

And the best part? You don’t need expensive courses to learn React—there are plenty of free resources on YouTube that can help you become a pro! I’ve listed some excellent YouTube channels at the end of this post.

Let’s get started!

What is React.js?

React.js is an open-source JavaScript library used to build modern user interfaces (UIs). It helps developers create interactive web apps by breaking the UI into reusable components. Whether you're building a small personal project or a large enterprise-level application, React.js can scale with you.

Now, here’s the 20% of React concepts that you should focus on to understand 80% of how it works:

1. JSX (JavaScript XML)

JSX lets you write HTML-like syntax inside JavaScript. It makes the code easier to read and write.

Example:

const greeting = <h1>Hello, World!</h1>;

Key Points:

JSX must return one parent element.
Use {} to embed JavaScript expressions inside JSX.

2. Components: Functional and Class

React apps are built with components. Components are like building blocks of a UI.

Functional Components:

function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

Class Components (less common nowadays with hooks):

class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

3. Props (Properties)

Props let you pass data from a parent component to a child component.

Example:

function Greeting(props) {
    return <h1>{props.message}</h1>;
}
<Greeting message="Welcome to React" />;

Key Point:

Props are read-only and cannot be modified by the child component.

4. State

State is like a "memory" for a component that allows it to track changes.

Example:

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Key Point:

Use the useState hook to manage state in functional components.

5. Lifecycle Methods

Lifecycle methods allow class components to perform tasks at different stages:

Mounting: componentDidMount()
Updating: componentDidUpdate()
Unmounting: componentWillUnmount()
Functional components achieve similar behavior using the useEffect hook.

Example:

useEffect(() => {
    console.log("Component mounted or updated");
    return () => console.log("Component unmounted");
}, []);

6. Hooks

Hooks lets you use state and other React features in functional components.

Common hooks:

useState: Manage state.
useEffect: Handle side effects like fetching data.
useContext: Access global data.
Example:

const [data, setData] = useState([]);
useEffect(() => {
    fetch("https://api.example.com")
        .then((response) => response.json())
        .then((data) => setData(data));
}, []);

7. Events in React

React uses camelCase syntax for event handlers like onClick or onChange.

Example:

function ClickButton() {
    const handleClick = () => alert("Button clicked!");
    return <button onClick={handleClick}>Click Me</button>;
}

8. Conditional Rendering

Render different components or content based on conditions.

Example:

function Greeting({ isLoggedIn }) {
    return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>;
}

9. Lists and Keys

When rendering lists, use the key attribute to improve performance.

Example:

const items = ["Apple", "Banana", "Cherry"];
return (
    <ul>
        {items.map((item, index) => (
            <li key={index}>{item}</li>
        ))}
    </ul>
);

10. React Router

For building multi-page applications, React Router is essential.

Example:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
            </Routes>
        </Router>
    );
}

Resources for you to Learn React for Free:

Learning React.js doesn’t have to cost you a dime! You can get started with free, high-quality tutorials on YouTube. Here are some of the best YouTube channels to learn React.js:

Traversy Media
Brad Traversy offers beginner-friendly tutorials for React and other web development technologies. His explanations are simple, and his projects are practical.

Codevolution
Codevolution provides detailed videos, including a full React.js crash course and videos on hooks, state management, and more.

The Net Ninja
This channel offers a structured React playlist covering everything from the basics to advanced concepts like Redux.

freeCodeCamp.org
They have a 5-hour beginner-friendly React tutorial that’s perfect if you want a deep dive into the library.

Academind
Their React series is well-organized and includes practical examples that explain concepts clearly.

Programming with Mosh
Mosh’s React tutorials focus on building real-world apps and are great for developers of all levels.

Final Words

By focusing on these 20% of React.js concepts, you’ll be well on your way to building responsive, interactive web apps. And remember, this is just the beginning! Dive into these free YouTube resources, build some small projects, and keep experimenting.

Let me know in the comments what you think about this approach, or share your favorite React learning resources if I’ve missed any.

Push Your Local Code To Remote Repository

Nikhilesh Mauje — Tue, 29 Oct 2024 08:03:45 +0000

1. Initialize Git (if not already initialized)
If you haven’t already initialized Git in your local project folder, do so with:

git init

2. Add a Remote Repository
If you haven’t linked your local repository to a remote repository yet, add a remote:

git remote add origin <REMOTE_URL>

Replace with the URL of your remote repository (e.g., a GitHub repository link).

To check if the remote is added, use:

git remote -v

3. Add and Commit Your Changes
Stage all changes in your local repository:

git add .

Commit the staged changes with a message:

git commit -m "Commit Message"

4. Push to the Remote Repository
Now push your code to the remote repository's main branch (replace main with your branch name if it's different):

git push -u origin main

The -u option sets origin/main as the default upstream branch. This way, future git push commands can be done without specifying origin and main.

5. Verify Your Push
After pushing, you can check your repository on GitHub or your Git hosting provider to ensure your code was uploaded successfully.

Happy Coding!

Hacktoberfest 2024 Journey as a First-Time Contributor

Nikhilesh Mauje — Fri, 25 Oct 2024 18:27:12 +0000

This year, I participated in Hacktoberfest, marking my first experience contributing to open source. Despite being new to the process, I learned so much from the event, from understanding pull requests and issue creation to resolving merge conflicts. Here’s my journey, challenges I faced, and the key takeaways I gained along the way.

Hacktoberfest opened my eyes to the world of open source collaboration, which was unfamiliar territory for me. I faced initial challenges with pull requests, figuring out how to create issues, and understanding the workflow of contributing to others' repositories. After several missteps, I got the hang of it—learning by trial and error and consulting ChatGPT whenever I hit a roadblock. By October 23rd, I successfully completed all four required PRs(4th PR is in Review Period), feeling accomplished and much more knowledgeable.

The journey wasn't smooth sailing. Many times, I felt stuck or unsure, especially when conflicts arose, but by persisting and seeking help, I managed to overcome each hurdle. I learned to navigate issues independently, which cleared up many of my initial doubts and made the experience rewarding.

Tips for Future Hacktoberfest Participants which I felt important to share:

Start Early in "Preptember": I began finding Hacktoberfest-labeled repositories in September end, which gave me a head start in creating issues and familiarizing myself with projects.
Choose Beginner-Friendly Repositories: If you’re new to programming or open source, look for repositories tagged with beginner-friendly languages like HTML, CSS, and JavaScript or any other in which you feel comfortable. Hacktoberfest is an ideal platform to learn as you go.
Follow the Code of Conduct: Always review the repository’s contribution guidelines and Hacktoberfest's rules to ensure your PRs are valid.
Finding Repositories to Contribute To: found beginner-friendly repositories through a mix of methods:
Searching GitHub for "beginner-friendly" and "Hacktoberfest" tags.
Checking LinkedIn posts where users shared Hacktoberfest projects.
Getting recommendations from friends also participating in Hacktoberfest.
Exploring YouTube, where creators often highlight repositories and give tips on Hacktoberfest.

For me, Hacktoberfest 2024 was about much more than just contributing to open source. It was a journey of staying consistent, focused, and resilient—even when I couldn’t figure things out immediately. From simply registering for Hacktoberfest last year to earning the badge for completing all four PRs this year, it’s been a rewarding path of growth and self-improvement.