React es como una navaja suiza
Verónica Clavijo Altamirano
veuge.clavijo@gmail.com
Veuge
Veuge_C
¿PUBLICIDAD ENGAÑOSA?Learn Once, Write Anywhere
#STORYTIMEPUBLICIDAD ENGAÑOSA⏺ Class / Functional components ⏺ Props / State ⏺ Hooks / Lifecycle methods ⏺ Context API ⏺ key / ref
⏺ Class / Functional components ⏺ Props / State ⏺ Hooks / Lifecycle methods ⏺ Context API ⏺ key / ref
Components for web
Components for apps
≃
⏺ Built-in Components <div>, <p>, <img>, <button>
⏺ Built-in Components <View>, <Text>, <Image>, <TouchableOpacity>
A FONDO
RendererRendererRenderer
react-reconcilerDOM APIs
ReactDOM
Android APIs
ReactNative
iOS APIs
RENDERERShttps://github.com/chentsulin/awesome-react-renderer{DEMO TIME}
Crear nuestro propio ReactDOM (minimalista)https://github.com/Veuge/reactbolivia-renderer- Eliminar los rastros de ReactDOM
- Crear nuestro propio `render`
render(element, container) {
const root = reconciler.createContainer(container, 0, null, false, false, '', (error) => console.log(error), null);
reconciler.updateContainer(element, root, null, null);
}
export default render;
3. Usar `react-reconciler`
const reconciler = ReactReconciler({
supportsMutation: true,
isPrimaryRenderer: true,
supportsPersistence: false,
supportsHydration: false,
// Callbacks para nuestro ejemplo simple
createInstance: (type, props) => null,
createTextInstance: (text) => null,
appendChild: (parent, child) => null,
appendInitialChild: (parent, child) => null,
appendChildToContainer: (parent, child) => null,
// Rest....
finalizeInitialChildren: () => false,
prepareUpdate: () => null,
shouldSetTextContent: () => false,
getRootHostContext: () => null,
//......
})3. Create DOM elements
createInstance: (type, props) => {
console.log('createInstance', { type, props });
const element = document.createElement(type);
Object.keys(props).forEach((prop) => {
if (!["children", "onClick", "key"].includes(prop)) {
element[prop] = props[prop];
}
});
return element;
},
createTextInstance: (text) => document.createTextNode(text),
appendChild: (parent, child) => parent.appendChild(child),
appendInitialChild: (parent, child) => parent.appendChild(child),
appendChildToContainer: (parent, child) => parent.appendChild(child),4. Experimento con webcam
createInstance: (type, props) => {
console.log('createInstance', { type, props });
let element;
if (type === 'webcam') {
element = document.createElement('video');
element.autoplay = true;
element.playsInline = true;
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => element.srcObject = stream);
} else {
element = document.createElement(type);
}
// ...........
}ReactBolivia - Por que React es una navaja suiza?
By Veronica Clavijo Altamirano
