🚀 React Project Sharing¶

Learn how to package and share React projects seamlessly with LookAtni File Markers.

Overview¶

Sharing React projects traditionally involves: - ❌ Large node_modules folders (100MB+) - ❌ Complex setup instructions - ❌ Version compatibility issues - ❌ Missing dependencies

With LookAtni File Markers: - ✅ Single lightweight text file - ✅ Complete project structure preserved - ✅ No dependencies included - ✅ Works across any environment

Step-by-Step Tutorial¶

1. Create Sample React Project¶

Let's start with a typical React project structure:

my-react-app/
├── package.json
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   ├── components/
│   │   ├── Header.js
│   │   └── TodoList.js
│   └── utils/
│       └── api.js
└── README.md

2. Set Up the Project¶

# Create project directory
mkdir my-react-app
cd my-react-app

# Create package.json
cat > package.json << 'EOF'
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
EOF

# Create public files
mkdir public
cat > public/index.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>
EOF

# Create source files
mkdir -p src/components src/utils

cat > src/index.js << 'EOF'
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
EOF

cat > src/App.js << 'EOF'
import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import { fetchTodos } from './utils/api';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadTodos = async () => {
      try {
        const data = await fetchTodos();
        setTodos(data);
      } catch (error) {
        console.error('Failed to load todos:', error);
      } finally {
        setLoading(false);
      }
    };

    loadTodos();
  }, []);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(),
      text,
      completed: false
    };
    setTodos([...todos, newTodo]);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  if (loading) {
    return <div className="loading">Loading...</div>;
  }

  return (
    <div className="App">
      <Header onAddTodo={addTodo} />
      <TodoList todos={todos} onToggle={toggleTodo} />
    </div>
  );
}

export default App;
EOF

cat > src/App.css << 'EOF'
.App {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.loading {
  text-align: center;
  padding: 50px;
  font-size: 18px;
  color: #666;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: center;
}

.todo-form {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.todo-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 16px;
}

.todo-button {
  padding: 12px 24px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.todo-button:hover {
  background: #45a049;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin: 10px 0;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.todo-item:hover {
  background: #e9ecef;
  transform: translateX(5px);
}

.todo-item.completed {
  opacity: 0.6;
  text-decoration: line-through;
}

.todo-checkbox {
  margin-right: 15px;
}
EOF

cat > src/components/Header.js << 'EOF'
import React, { useState } from 'react';

function Header({ onAddTodo }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      onAddTodo(inputValue.trim());
      setInputValue('');
    }
  };

  return (
    <div className="header">
      <h1>🚀 LookAtni Todo App</h1>
      <p>Built with React and shared via LookAtni File Markers!</p>

      <form onSubmit={handleSubmit} className="todo-form">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Add a new todo..."
          className="todo-input"
        />
        <button type="submit" className="todo-button">
          Add Todo
        </button>
      </form>
    </div>
  );
}

export default Header;
EOF

cat > src/components/TodoList.js << 'EOF'
import React from 'react';

function TodoList({ todos, onToggle }) {
  if (todos.length === 0) {
    return (
      <div style={{ textAlign: 'center', padding: '50px', color: '#666' }}>
        <h3>No todos yet!</h3>
        <p>Add your first todo above to get started.</p>
      </div>
    );
  }

  return (
    <ul className="todo-list">
      {todos.map(todo => (
        <li
          key={todo.id}
          className={`todo-item ${todo.completed ? 'completed' : ''}`}
          onClick={() => onToggle(todo.id)}
        >
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() => {}} // Handled by parent click
            className="todo-checkbox"
          />
          <span>{todo.text}</span>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;
EOF

cat > src/utils/api.js << 'EOF'
// Mock API functions for demo purposes
export const fetchTodos = async () => {
  // Simulate API delay
  await new Promise(resolve => setTimeout(resolve, 1000));

  return [
    { id: 1, text: 'Learn React', completed: true },
    { id: 2, text: 'Try LookAtni File Markers', completed: false },
    { id: 3, text: 'Share your project', completed: false }
  ];
};

export const saveTodo = async (todo) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 500));
  return { ...todo, id: Date.now() };
};

export const updateTodo = async (id, updates) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 300));
  return { id, ...updates };
};
EOF

cat > README.md << 'EOF'
# My React Todo App

A simple React todo application demonstrating LookAtni File Markers.

## Features

- ✅ Add new todos
- ✅ Mark todos as complete
- ✅ Responsive design
- ✅ Modern React hooks
- ✅ Component-based architecture

## Getting Started

1. Install dependencies:
   ```bash
   npm install
   ```

2. Start development server:
   ```bash
   npm start
   ```

3. Open [http://localhost:3000](http://localhost:3000)

## Project Structure

- `src/App.js` - Main application component
- `src/components/` - Reusable React components
- `src/utils/` - Utility functions and API calls
- `public/` - Static assets

## Built With

- React 18
- Modern CSS
- Local state management

## Shared via LookAtni

This project was packaged and shared using LookAtni File Markers - 
no node_modules required!
EOF

3. Generate Markers¶

Now let's create markers from our React project:

Open VS Code in the project directory
Command Palette (Ctrl+Shift+P) → LookAtni: Generate Markers
Configure generation:
Source folder: ./ (current directory)
Output file: react-todo-markers.txt
Exclude patterns: node_modules, build, .git
Include patterns: src/**/*, public/**/*, package.json, README.md

4. Review Generated Markers¶

The generated react-todo-markers.txt will look like:

//␜/ package.json /␜//
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  // ... rest of package.json
}

//␜/ src/App.js /␜//
import React, { useState, useEffect } from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
// ... rest of App.js

//␜/ src/components/Header.js /␜//
import React, { useState } from 'react';

function Header({ onAddTodo }) {
  // ... component code
}
// ... and so on for all files

Via GitHub Issues/PRs¶

Here's the complete React Todo app:

[Attach: react-todo-markers.txt]

To run:
1. Extract using LookAtni: Extract Files
2. cd into the folder
3. npm install
4. npm start

Via Email/Slack¶

Simply attach the react-todo-markers.txt file - it's typically under 50KB for most React projects!

Via Documentation¶

Include the markers file in your documentation:

## Example Project

Download the complete working example: [react-todo-markers.txt](./react-todo-markers.txt)

Extract with LookAtni File Markers extension in VS Code.

Extraction & Setup¶

When someone receives your markers file:

1. Extract Files¶

Open VS Code
Command Palette → LookAtni: Extract Files
Select react-todo-markers.txt
Choose destination folder
Extract!

2. Install Dependencies¶

cd extracted-project-folder
npm install

3. Run the Project¶

npm start

The project runs exactly as the original!

Share just components you want to showcase:

# Generate markers for specific components
LookAtni: Generate Markers
├─ Include: src/components/Header.js
├─ Include: src/components/TodoList.js
├─ Include: src/App.css
└─ Exclude: everything else

Code Review Workflow¶

# 1. Developer creates feature branch
git checkout -b feature/new-component

# 2. Generate markers for review
LookAtni: Generate Markers → feature-review.txt

# 3. Share with team
# Reviewers extract and test locally

# 4. Iterate based on feedback

Educational Use¶

Perfect for React tutorials and workshops:

# Create lesson markers
lesson-1-setup.txt      # Basic React setup
lesson-2-components.txt # Component basics
lesson-3-state.txt      # State management
lesson-4-complete.txt   # Final application

Best Practices¶

Optimize for Size¶

{
  "lookatni.excludePatterns": [
    "node_modules",
    "build",
    "dist",
    ".git",
    "*.log",
    "coverage",
    ".nyc_output",
    "*.min.js",
    "*.map"
  ],
  "lookatni.maxFileSize": 500
}

Include Documentation¶

Always include: - README.md with setup instructions - package.json with dependencies - Key configuration files - Example usage files

Generate markers
Extract to new folder
Install and run
Verify everything works
Then share with confidence

🎉 React Sharing Mastered!

You've learned how to efficiently share React projects using LookAtni File Markers. No more node_modules nightmares!