require.context

1. require.context
Un require que funciona con regex

2. 👋 Hey! Soy Richard
@sparragus
Puertorriqueño, web engineer,
hago podcasts

3. Preámbulo
(tl;dr: Esta plática realmente no de es folder
structuring)

7. @sparragus
•src/
•pages/
•components/
•index.js
Pero por si tienen curiosidad:

8. require.context
Un require que funciona con regex

9. Only

10. Nada que ver
con el
Context API de React

11. @sparragus
src
├── app.js
└── pages
├── home
│ ├── index.css
│ └── index.js
├── about
│ ├── index.css
│ └── index.js
└── contact
├── index.css
└── index.js

12. @sparragus
const Home = require("./pages/home");
const About = require("./pages/about");
const Contact = require("./pages/contact");
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>

13. @sparragus
function Home() {
return (
<div>
<h1>Hey! Soy Richard</h1>
<nav>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
</div>
);
}
module.exports = Home;

14. @sparragus
• Input <= Expresión regular
• Output => Context
• Una función que nos permite hacer require solamente a los
archivos que hacen “match” con la expresión regular
Un require que funciona con regex
require.context

15. @sparragus
const context = require.context(
"./pages", // Un punto de partida del contexto
true, // Quiero buscar en los subdirs
/index.js$/ // El regex para encontrar files
);
const Home = context(‘./home/index.js’);

16. @sparragus
const context = require.context("./pages", true, /index.js$/);
src
├── app.js <--------------- Estamos aquí
└── pages <--------------- El directorio que especificamos
├── home
│ ├── index.css <----- ❌
│ └── index.js <----- ✅ (Match con el regex)
├── about
│ ├── index.css <----- ❌
│ └── index.js <----- ✅
└── contact
├── index.css <----- ❌
└── index.js <----- ✅

17. @sparragus
const styles = context('./home/index.css');

18. @sparragus
const styles = context('./home/index.css');
💥Error: Cannot find module ‘./home/index.css’

19. @sparragus
const context = require.context(
"./pages", // A directory
true, // Use subdirectories
/index.js$/ // A regex for matching files
);
const Home = context(‘./home/index.js’);
const About = context(‘./about/index.js’);
const Contact = context(‘./contact/index.js’);
<Router>
<Route path="/" component={Home} />
...
</Router>

20. @sparragus
🤔

21. @sparragus
• Input <= Expresión regular
• Output => Context
• Una función que nos permite hacer require solamente a los
archivos que hacen “match” con la expresión regular
• {
keys()
}
Un require que funciona con regex
require.context

22. @sparragus
🤔🤔🤔

23. @sparragus
✌

24. @sparragus
const context = require.context("./pages", true, /index.js$/);
const Home = context('./Home');
const filenames = context.keys();
console.log(filenames);
⮑ [ "./home/index.js", "./about/index.js", "./contact/index.js" ]
Función
Objeto

25. @sparragus
function getPathFromFilename (filename) { ... }
const context = require.context(...);
const filenames = context.keys();
const routes = filenames.map(filename => ({
path: getPathFromFilename(filename),
component: context(filename)
});

26. @sparragus
const filenames = context.keys();
const routes = [{...}, {...}, {...}];
<Router>
{routes.map(route =>
<Route path={route.path} component={route.component} />
)}
</Router>

27. @sparragus
•src/
•pages/
•components/
•index.js
Pero por si tienen curiosidad:

28. Ver para creer
(Demos)

29. 👋 Hey! Soy Richard
@sparragus
Puertorriqueño, web engineer,
hago podcasts