Starting with React

Here is how to create a simple application with the React front-end framework:

 

Setup the project:

sudo npm i -g create-react-app // install the dependencies
npx create-react-app my-react-app // create the initial application
npm start //start the live development server

App.js
import React from 'react';
import './App.css';
import Login from './loginComponent'; //default import
import {UsersList} from './usersList'; // specific import

const users = [ // using nested/presentational components
{ name: 'John', occupation: 'student', age: 23 },
{ name: 'Pete', occupation: 'teacher', age: 30 },
{ name: 'Anna', occupation: 'programmer', age: 35 }
];

const App = () => {
// double curly braces because of passing object and because of passing property
return (
<div className="App">
<Login user={{ name: "John", uid: 1000 }} />
<header className="App-header">
<UsersList users = {users} />
</header>
</div>
);
}

export default App;


usersList.js
import React from 'react';
import {UsersListItem} from './usersListItem'; // specific import

export const UsersList = ({ users }) => // getting especially users array from the passed array with props
( // with () we return automatically instead of writing {}
<>
{ users.map(user => <UsersListItem user={user} key={user.name} /> ) }
</>
);
// React will be used when we return react fragment


usersListItem.js
import React from 'react';
const sayMyName = (name) => {
alert(name);
}

export const UsersListItem = ({ user }) =>
(<div>
{user.name} -
{user.occupation} -
{user.age}
<button onClick={ ()=>sayMyName(user.name) }>Display name</button>
</div>
)


loginComponent.js
import React from 'react';
// show the import, conditionals and DOM element, also the export
// how to display props, destructurise in the passing parameters(props)

const Login = ({ user }) => {
let isAdmin = (user.uid) === 1000;
let logged_in = true;
// double conditional
return logged_in ? (
<>
hello mr.{user.name}
{ isAdmin ? `you are admin (conditional)` : null}
</>
)
: (<>please login</>)
}

export default Login;

Deploy Angular app to Vercel and Firebase for free

Here is how to do it very quickly:

 

For Firebase you'll need to install the following schematics:
ng add @angular/fire

then just do:
ng deploy

you'll be probably asked to authenticate with password in browser, and then your project will be on Internet.

If you would like to youse serverless functions for NodeJS interpretation here is the way:
sudo npm install -g firebase-tools 

firebase init functions

This will install and initialize the functions. Then go to the newly created /functions directory and install your packages such as: npm install nodemailer cors etc.

And now is time to edit the auto-generated index.js file.

When you are happy with the generated function you can deploy it, just run from the same directory: 

firebase deploy

For Vercel, after the registration just link your github repository to Vercel. You can see/edit your current local git configuration with:

git config --local -e

To link the remote origin of your repository to the local git repo use: 

git remote add origin  https://github.com/your_username/project.git

if there is something on the remote site, you can overwrite it with the local version using:
git push --set-upstream origin master -f

 
or just pull and merge the remote version: git pull origin master

Then just do your commits and when pushing you'll have a new version synchronized in Internet.

Congratulations and enjoy the: Angular for beginners - modern TypeScript and RxJS course!