Combien de fois dites-vous « non » à des choses qui pourraient interférer avec vos objectifs ?

Every time we say "no" to a request or an opportunity that doesn’t align with our goals, we’re essentially making room for those that do. This principle is crucial in the fast-evolving tech world. The selection of technologies for our projects should resonate with scalability, or maintainability.

Understanding the Significance of ‘No’ in Professional Growth, Node.js LTS

Node.js, a runtime environment based on Chrome’s V8 JavaScript engine, facilitates the development of fast and scalable network applications. Its Long-Term Support (LTS) versions, offer stability and extended support. This makes Node.js LTS an ideal choice for developers looking to build reliable and maintainable applications.

More about Node.js LTS

The Frontend Library for Interactive UIs : React.js

React.js stands out as a declarative, efficient, and flexible JavaScript library for building user interfaces. It enables developers to create large web applications that can change data without reloading the page, promising a smooth user experience.

Learn more about React.js

A Powerful Combination

Combining Node.js LTS and React.js allows developers to build full-stack JavaScript applications with ease. Here’s a simple workflow:

1. Backend with Node.js LTS: Set up a server using Express, a Node.js framework, to handle API requests.
2. Frontend with React.js: Create interactive UIs that communicate with the backend server for dynamic content.

This synergy enables the development of fast, responsive, and maintainable web applications.

Backend: Node.js with Express

Assuming Node.js is installed and the express package is added to your project, set up a basic Express server that serves a static list of tasks.

File: server.js

const express = require('express');
const app = express();
const port = 3001;

// Sample data
const tasks = [
  { id: 1, title: 'Learn Node.js', completed: false },
  { id: 2, title: 'Practice React.js', completed: false },
  { id: 3, title: 'Build a full-stack app', completed: false }
];

// Middleware to allow cross-origin requests
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// A simple API to fetch tasks
app.get('/api/tasks', (req, res) => {
  res.json(tasks);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

To run this server, execute node server.js in your terminal,

Frontend: React.js

Now, create a simple React component that fetches and displays these tasks.

File: TasksComponent.js

import React, { useState, useEffect } from 'react';

function TasksComponent() {
  const [tasks, setTasks] = useState([]);

  // Fetch tasks from the backend on component mount
  useEffect(() => {
    fetch('http://localhost:3001/api/tasks')
      .then(response => response.json())
      .then(data => setTasks(data))
      .catch(error => console.error('Error fetching tasks:', error));
  }, []); // Empty dependency array means this effect runs once on mount

  return (
    <div>
      <h2>Tasks List</h2>
      <ul>
        {tasks.map(task => (
          <li key={task.id}>
            {task.title} - {task.completed ? 'Done' : 'Pending'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TasksComponent;

To integrate this component into a React application, you would include it in your app’s component tree, usually in the App.js file. Make sure your React app is running on a different port (the default create-react-app port is 3000) to avoid conflicts with the backend server.

Running the Full-Stack App

1. Start the backend server (node server.js).
2. Run the React frontend app (typically with npm start or yarn start in the create-react-app scaffold).

DOM Schema with Emoji 🌐 ➡️ 📝

Consider a simple DOM schema representing a web app structure:

• 🌐 Root: The entry point of the application.
• 📝 Component 1: A functional component for handling user inputs.
• 📄 Component 2: A class component for displaying data fetched from the Node.js server.

Conclusion

Fetching Data with React.js and Displaying It

// A simple React function to fetch data from a Node.js backend
async function fetchData() {
  const response = await fetch('http://your-node-server.com/api/data');
  const data = await response.json();
  console.log(data);
}

Saying "no" to technologies that don’t align with our goals allows us to focus on tools that do, like the powerful combination of Node.js LTS and React.js. This approach not only aids in achieving our project objectives but also in realizing our broader goal of becoming a successful developer.