React Firebase from Zero
https://github.com/jalbertomr/react_firebase_zero
In our work direcory react_firebase_cero directory, create the file index.html
Very simple React app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
</div>
<!-- Cargar React. -->
<!-- Nota: cuando se despliegue, reemplazar "development.js" con "production.min.js". -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script>
const container = document.getElementById('app');
const header = React.createElement('h1', {}, 'This is an h1 element created with React.');
ReactDOM.render( header, container);
</script>
</body>
</html>
Now use the following command to automatically create a react app
npx create-react-app react_firebase_cero
this will create a directory react_firebase_cero with a structure and files ready to run with the command
npm start
after modifying the App.js file in App.js adding an h1 to test the app with change
<div className="App">
<header className="App-header">
<h1>Modifiying the standard App</h1>
<img src={logo} className="App-logo" alt="logo" />
<p>
and running the app, we got
Now we clean the app deleting unnecessary files from src directory and public, index.html, index.js, just to leave the code of index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>React with very simple h1</h1>,
document.getElementById('root')
);
We are using a parameter that is not normal in pure javascrip, this is the <h1>...</h1> expression, this is because we are using React, and is called JSX code.
import React from 'react';
import ReactDOM from 'react-dom';
const text = " 'text inserted'";
const JSXcode = <h1>React JSX inserting:{text}</h1>;
ReactDOM.render(
JSXcode,
document.getElementById('root')
);
browser output in url localhost:3000:
React JSX inserting: 'text inserted'
Adding more elements in code like <p> element in the JSX must be all inside <div> or <> or any other element.const text = " 'text inserted'";
const JSXcode =
<div>
<h3>React JSX inserting:{text}</h3>
<p>div - h3 - p </p>
</div>;
ReactDOM.render(
JSXcode,
document.getElementById('root')
);
Browser output:
React JSX inserting: 'text inserted'
div - h3 - p
To Add a class to a Tag use the word className, and also add style
const text = " 'text inserted'";
const JSXcode =
<>
<h3 className="title" style={{color: 'blue', backgroundColor: 'lightblue'}}>
React JSX inserting:{text}</h3>
<p>div - h3 - p </p>
</>;
ReactDOM.render(
JSXcode,
document.getElementById('root')
);
So we can use variables to modify dinamically the properties of the style
const text = " 'text inserted'";
const textColor = 'green';
const JSXcode =
<>
<h3 className="title" style={{color: textColor, backgroundColor: 'lightblue'}}>
React JSX inserting:{text}</h3>
<p>div - h3 - p </p>
</>;
ReactDOM.render(
JSXcode,
document.getElementById('root')
);
browser output:
React JSX inserting: 'text inserted'
div - h3 - p
Conditionals in JSX
Use conditional code to render one or another html output according to a expression.
const text = " 'text inserted'";
const textColor = 'green';
const inSession = true;
const JSXcode =
<div>
<h3 className="title" style={{color: textColor, backgroundColor: 'lightblue'}}>
React JSX inserting:{text}</h3>
<p>logged Ok. </p>
</div>;
const isInSession = (inSession) => {
if(inSession === true){
return JSXcode;
} else {
return <h1>Session not started!</h1>
}
}
ReactDOM.render(
isInSession(inSession),
document.getElementById('root')
);
Using ternary conditional operator
const text = " 'text inserted'";
const textColor = 'green';
const inSession = false;
const JSXcode =
<>
{inSession === true ?
<div>
<h3 className="title" style={{color: textColor, backgroundColor: 'lightblue'}}>
React JSX inserting:{text}</h3>
<p>logged Ok. </p>
</div>
:
<p>NOT logged Ok. </p>
}
</>
ReactDOM.render(
JSXcode,
document.getElementById('root')
);
usefull conditional to print when a variable is defined
const varDefined = undefined;
const JSXcode =
<>
{inSession === true ?
<div>
<h3 className="title" style={{color: textColor, backgroundColor: 'lightblue'}}>
React JSX inserting:{text}</h3>
<p>logged Ok. </p>
{varDefined && <p>Var is defined so print it {varDefined}</p>}
</div>
:
<p>NOT logged Ok. </p>
}
</>
eot
No hay comentarios:
Publicar un comentario