DEV Community: AGBOOLA JOEL OLUWAFISAYO

Frontend Face-Off: Svelte vs. React – Which One Will Win Your Heart?

AGBOOLA JOEL OLUWAFISAYO — Mon, 01 Jul 2024 08:26:55 +0000

If you’re diving into the world of frontend development, you’ve probably heard of React and maybe even Svelte. These two frontend technologies are like the Batman and Superman of the web world. But which one should you pick for your projects? Let’s break it down in simple, fun terms and see which one fits you best. Plus, I'll share a bit about my journey and what I’m looking forward to in the HNG Internship.

Key Features

React

Component-Based Architecture: Imagine building your app like Lego blocks. Each piece is a component that you can reuse and stack together to create something amazing.
Virtual DOM: React uses a clever trick called the Virtual DOM to update your web pages super fast, without making your browser sweat.
Rich Ecosystem: Think of React’s ecosystem as a giant toy store with every tool and gadget you could ever need.
JSX Syntax: With JSX, you write HTML-like code inside JavaScript. It’s like combining chocolate and peanut butter – it just works!

Svelte:

No Virtual DOM: Svelte skips the Virtual DOM and goes straight to updating the real DOM, making it lightning fast.
Reactive Assignments: State management in Svelte is as easy as pie – no extra libraries needed.
Smaller Bundle Size: Svelte apps are lean and mean, so your pages load faster.
Ease of Learning: Svelte’s syntax is straightforward and friendly, perfect for those just starting out.

Performance
When it comes to speed, Svelte is like a sports car while React is more of a reliable SUV. Svelte’s direct DOM updates make it faster in many cases, but React’s Virtual DOM is not slow either. For most projects, the performance difference won’t be a deal-breaker, but if you’re building something that needs to be super snappy, Svelte might have the edge.

Ease of Use
React:
React is powerful, but it can feel like you’re building a spaceship with all the parts and tools available. You’ll need to get the hang of concepts like JSX and state management libraries, which can be a bit overwhelming at first.

Svelte:
Svelte, on the other hand, is like a friendly guide through the world of frontend development. Its straightforward syntax and built-in reactivity make it easier to learn and use, especially for beginners.

Community Support and Ecosystem
React:
React has a massive community and tons of resources. Whatever problem you run into, chances are someone has already solved it and written a blog post about it. There are endless libraries and tools at your disposal.

Svelte: Growing Fast
Svelte’s community is smaller but growing rapidly. You might not find as many third-party libraries, but the ones available are high quality. The Svelte community is friendly and active, so you won’t be left hanging.

Use Cases

When to Use React
-Big Projects: React’s structure is great for managing large, complex applications.

-SEO-Friendly Sites: With tools like Next.js, you can make highly optimized websites.

-Cross-Platform Apps: React Native lets you build mobile apps using React, which is a huge plus.

When to Use Svelte

-Small to Medium Projects: Svelte shines in projects where you want speed and simplicity.

-High-Performance Needs: If your app needs to be super fast, Svelte’s your go-to.

-Prototyping and Learning: Svelte’s easy syntax makes it perfect for quick prototypes and learning.

My Journey and HNG Internship
I’m thrilled to be part of the HNG Internship, where I’ll be diving deeper into frontend development. The program is a fantastic opportunity to learn from the best and work on real-world projects. If you’re interested, check out the HNG Internship and see how you can get involved. They also offer premium services to help you level up your skills even further.

I see ReactJS as a powerful and widely-used frontend technology with a lot of tools and resources, making it ideal for large-scale applications. However, I feel it may be overwhelming for beginners like me due to its steep learning curve and the need to understand various concepts and libraries. Despite this, I recognize its strengths and I am looking forward to deepening my knowledge of ReactJS during the HNG Internship.

Conclusion
Both Svelte and React have their unique strengths. React is like a well-equipped toolbox perfect for large-scale projects, while Svelte is a sleek, fast option great for smaller projects and high-performance needs. Ultimately, the choice depends on what you’re building and your personal preference. As I continue my journey in the HNG Internship, I’m excited to explore both and see where they can take me.

So, what’s your pick? Are you team React or team Svelte? Either way, you’re in for an exciting ride in the world of frontend development!

Mastering the Art of Dynamic Content: A Guide to Harnessing DraftJS in React for Seamless Post Creation and Server Integration

AGBOOLA JOEL OLUWAFISAYO — Thu, 04 Jan 2024 17:30:50 +0000

WHY DRAFTJS :
DraftJS is useful for effortless rich text editing, seamless integration with React, predictable state management, and editor customization with ease.
It also helps elevate your projects with a powerful, flexible, and developer-friendly solution.

INSTALLING RELEVANT DEPENDENCIES IN REACT:

Ensure you have npm installed. Open your terminal and run

npm install axios
npm install draft-js react-draft-wysiwyg

These are the main packages required for draftjs integration

Create editor component with draftjs

import React from "react";
import { EditorState } from "draft-js";
import { Editor } from "react-draft-wysiwyg";

const EditorComponent = ({ editorState, setEditorState }) => {
  const handleEditorChange = (newEditorState) => {
    // Ensure newEditorState is an instance of EditorState
    const updatedEditorState =
      newEditorState instanceof EditorState
        ? newEditorState
        : EditorState.createEmpty(); // You might want to adjust this based on your application logic
    setEditorState(updatedEditorState);
  };
  return (
    <>
      <Editor
        editorState={editorState}
        onEditorStateChange={handleEditorChange}  //handles editor states change when in use
        toolbarClassName="toolbar-class"
        editorClassName="editor-class"
        wrapperClassName="wrapper-class"
      />
    </>
  );
};

export default EditorComponent;

Make use of the editor component in a post component that sends data to the server

import React, { useState } from "react";
import { EditorState, convertToRaw } from "draft-js";
import EditorComponent from "./EditorComponent";
import axios from "axios";

const PostToServer = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );
  //pass the state into the editor component to track changes in the editor
  const editorData = new FormData();

  const handlePostSubmit = async (e) => {
    e.preventDefault();
    const content = JSON.stringify(
      convertToRaw(editorState.getCurrentContent())
    );

    editorData.append("editorData", content);

    try {
      // this where we make use of axios
      const response = await axios.post(
        "http://localhost:8080/post/create-post", // url for server/backend which has a field called editor data
        editorData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
            // Add any additional headers as needed (e.g., authorization headers)
          },
        }
      );
      console.log(response.data.editorData);
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <form onSubmit={handlePostSubmit}>
      <EditorComponent
        editorState={editorState}
        setEditorState={setEditorState}
      />
      <button type="submit">Button for storing post value on backend</button>
    </form>
  );
};

export default PostToServer;

Editor data being sent to server/backend should appear like this

content: {"blocks": [ {"key":"4rh99","text":"It's very gray today. I ate cornflakes ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}, {"key":"fdh6","text":"honey","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"13aee","text":"a banana","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"bb1p5","text":"and peanutbutter ","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"8j2ad","text":"for breakfast. ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"fjio6","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"eblll","text":"Valentine's day is this weekend. ","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":16,"style":"BOLD"}],"entityRanges":[],"data":{}}],"entityMap":{}}

finally we create another component to get the data that has been stored on the server

import { useEffect, useState } from "react";
import axios from "axios";
import { Editor, EditorState, convertFromRaw } from "draft-js";

const GetData = () => {
  const [apiData, setApiData] = useState([]);
  //   state for editor data gotten from server
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:8080/post/get-post");
        setApiData(response.data.editorData);
        console.log("editor api Response:", response.data.editorData);
      } catch (error) {
        console.error(error.message);
      }
    };
    fetchData();
  }, []);

  return (
    <>
      {apiData.map((data) => {
        const contentState = convertFromRaw(JSON.parse(data.body));
        const editorState = EditorState.createWithContent(contentState);
        return (
          <div>
            <Editor editorState={editorState} readOnly={true} />
            {/* the readOnly value enable editor reads the data gotten from the server and display it again through draftjs */}
          </div>
        );
      })}
    </>
  );
};

export default GetData;

Summary

POST
Get current content from the editor state using

JSON.stringify(convertToRaw(editorState.getCurrentContent()))

which then convert the current state to a string .

GET
Display the data in a Draft.js Editor set to readOnly.
Fetch the post from the server and then convert it to readable content with this.

const contentState = convertFromRaw(JSON.parse(data.body));
    const editorState = EditorState.createWithContent(contentState);

Show it in an Editor like so:

<Editor editorState={editorState} readOnly={true}

Drop a like and share if you found this helpful.⚙👩‍💻

CREATE REACT APP WITH VITE 2024

AGBOOLA JOEL OLUWAFISAYO — Mon, 01 Jan 2024 16:55:49 +0000

Creating a React app with Vite is a straightforward process that offers fast development and optimized builds compared to creating React app through CRA command.

Vite is a build tool that focuses on speed and efficiency, making it an excellent choice for React developers. Here's a step-by-step guide to creating a React app with Vite:

Step 1: Install Node.js and npm:
Ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download them from https://nodejs.org/.

Step 2: Install Vite Globally:
Open a terminal and install Vite globally using the following command:

npm install -g create-vite
Step 3: Create a new React app:
Create a new React app using Vite by running the following command in your terminal:

npm create vite@latest app-name -- --template react

Step 4:Run npm install to add missing dependencies

Step 5: In terminal navigate to the project directory

cd app-name

Step 6: Start the development server:
Run the following command to start the development server:

npm run dev

This will launch your React app in development mode. By default, it will be available at http://localhost:3000/.

Step 7: Explore the project structure:
Vite generates a project structure that is minimal and efficient. Key directories and files include:

src: Contains your React components and application logic.
public: Houses static assets that should be publicly accessible.
index.html: The main HTML file for your app.
main.js or main.jsx: The entry point for your application.

Step 8: Build the production version:
When you're ready to deploy your app, build the production version by running:

npm run build

This will create an optimized build in the dist directory.