FEATURED POST
END FEATURED POST
FEATURED POST
END FEATURED POST
FEATURED POST
END FEATURED POST
FEATURED POST
Cover Image

Suggerimenti utili per programmare con PHP

Quando parliamo di sviluppo web, molti sviluppatori cercano suggerimenti e trucchi per migliorare il sito Web. Tuttavia, lo sviluppo web, in particolare in PHP, è abbastanza facile per i neofiti.

END FEATURED POST
FEATURED POST

JavaScript è facile da imparare?

Dal momento che è attualmente il linguaggio di programmazione più popolare dal sondaggio del sito web Stack Overflow, potresti esserti chiesto: JavaScript è facile da imparare? Mentre ho incontrato sviluppatori web su Quora e nei forum che affermano che puoi imparare facilmente JavaScript, la verità è che JavaScript è un linguaggio complesso che è stato aggiornato ed esteso molte volte. Per questo motivo, imparare JavaScript può essere difficile se non hai mai imparato un linguaggio di programmazione prima. Potresti incontrare tutorial o corsi obsoleti o potresti iniziare a imparare una libreria o un framework (queste sono le implementazioni che estendono un linguaggio di programmazione) prima di avere una solida conoscenza del linguaggio JavaScript.

Fortunatamente, ci sono soluzioni moderne per coloro che stanno imparando JavaScript al giorno d'oggi. Qui descriverò i potenziali ostacoli che puoi affrontare mentre impari JavaScript e le soluzioni alternative che puoi utilizzare in modo da poter continuare facilmente i tuoi progressi. Si tratta solo di portare un atteggiamento can-do nell'apprendimento della programmazione e nella scelta dei giusti corsi di alta qualità. Se riesci a fare queste due cose, aumenterai le tue possibilità di successo e minimizzerai le tue frustrazioni.

Di seguito, tratterò le sfide specifiche per l'apprendimento di JavaScript e le soluzioni specifiche per ogni sfida.

Sintassi ES5 / ES6

Problema: la maggior parte dei libri molto apprezzati per i principianti che ho trovato su Safari Books Online usano ES5, la sintassi JavaScript utilizzata prima del 2015. Nel luglio 2015, tuttavia, è stato rilasciato ECMAScript2015, chiamato anche ES6. E mentre da allora sono state rilasciate versioni successive di JavaScript, nessuna delle versioni ha avuto così tante modifiche apportate nella versione ES6. Ora scriviamo JavaScript in modo molto diverso, quindi mentre in passato ho raccomandato libri JavaScript di alto livello, molti di essi non coprono la sintassi aggiornata.

Soluzione: segui un corso JavaScript che insegna ES6 dall'inizio.

Librerie e Frameworks

Problema: non è sufficiente apprendere le basi del linguaggio JavaScript se si desidera lavorare come sviluppatore web front-end. Librerie come React e jQuery e framework come Angular, Vue ed Ember sono stati creati per estendere la funzionalità di JavaScript in modo da poter risolvere problemi di front-end unici.

Soluzione: ricerca quali framework sono maggiormente utilizzati dalle aziende in cui vivi e apprendi i primi due o tre. Probabilmente saranno React, Angular e Vue. Puoi condurre la tua ricerca cercando lavori "Front End Web Developer" nella tua zona su Dice, Indeed o su un altro sito Web di ricerca di lavoro. Dai un'occhiata alle descrizioni dei lavori e osserva quali librerie e framework vengono utilizzati. Dopo aver analizzato 10-20 posti di lavoro, avrai abbastanza informazioni per sapere quali librerie e framework sono più popolari.

Se hai intenzione di diventare un libero professionista, segui React, Angular, Vue e jQuery. Queste quattro librerie / framework copriranno probabilmente il 90% dei posti di lavoro che vedrai per front-end su piattaforme freelance popolari.

Devo imparare la manipolazione del DOM?

Problema: la manipolazione del DOM è uno degli aspetti più difficili di JavaScript da imparare e sta tornando in secondo piano. Prima di entrare nei dettagli, tratterò cos'è il DOM e perché è importante.

Tecnicamente, il DOM non fa parte delle specifiche del linguaggio JavaScript. Al contrario, si tratta di un'API, ma è comunque una parte importante dello sviluppo Web front-end. Consente agli sviluppatori Web di creare eventi che si verificano quando un utente interagisce con una pagina Web o un'app Web, aggiungendo un livello di interattività che rende le esperienze Web online molto più interessanti.

Una delle sfide che gli sviluppatori Web erano soliti affrontare era che i browser non implementavano coerentemente le funzionalità del DOM. Dopo aver testato un'esperienza front-end in più browser, era comune trovare almeno un browser in cui il codice scritto per interagire con il DOM non si comportasse come previsto. Ciò significava che gli sviluppatori Web dovevano adottare un approccio frammentario, scrivendo codice aggiuntivo per adattarsi a diversi browser.

Nasce jQuery, inventato da John Resig nel 2006. jQuery è una libreria che ha risolto i problemi con incoerenza e molti sviluppatori Web front-end hanno iniziato a fare affidamento su di esso. Ora che le guerre del browser sono in gran parte terminate, tuttavia, ci sono alcuni tecnici che sono cauti se uno sviluppatore web che stanno cercando non conosce la manipolazione del DOM. A volte, vogliono assicurarsi che un nuovo assunto conosca la manipolazione del DOM piuttosto che fare affidamento su jQuery come stampella.

Soluzione: parla con sviluppatori web esperti nella tua zona. Conoscere i rivali sul campo è l'unico modo per scoprire se le aziende utilizzano JavaScript vanilla o jQuery. In genere consiglio agli aspiranti sviluppatori web di creare almeno due progetti usando la manipolazione DOM e uno con jQuery. In questo modo, sei coperto. Se sei certo, tuttavia, di voler lavorare come ingegnere front-end e concentrarti sull'esperienza utente, quindi imparare il DOM e impararlo bene è nel tuo interesse.

Devo imparare Node.js?

Problema: se desideri lavorare come sviluppatore web front-end, devi imparare HTML, CSS e JavaScript. Se desideri diventare uno sviluppatore full-stack, tuttavia, le tue scelte sono quasi infinite per cosa imparare come stack back-end. Molti sviluppatori web front-end che vogliono imparare uno stack completo sono tentati di apprendere Node.js perché è JavaScript back-end e conoscono già un po' di JavaScript ma potrebbero trascurare altre tecnologie di base che dovranno imparare per avere successo.

Soluzione: se vivi e prevedi di lavorare in una grande città come New York, Chicago o Los Angeles, l'apprendimento di node.js dopo aver appreso il front-end JavaScript è un percorso perfettamente accettabile per diventare uno sviluppatore web full-stack perché troverai attività che richiedono sviluppatori web che conoscono node.js. Se vivi in ​​una città più piccola, allora è meglio fare qualche ricerca per scoprire se ci sono tecnologie aggiuntive che dovresti considerare. Forse vivi in ​​una piccola città in cui ci sono molte banche che usano C# ASP.NET come soluzione back-end, o forse Java è molto più comune. 

Quando posso smettere di imparare e iniziare ad applicare ai lavori?

Problema: l'argomento JavaScript è, in una parola, infinito! È importante riconoscere che non sarai mai in grado di imparare tutto sul linguaggio. Molti aspiranti sviluppatori Web, tuttavia, non sono sicuri su quando dovrebbero iniziare ad applicare ai lavori.

Soluzione: se non si è certi di essere pronti a lavorare come sviluppatore Web, è possibile iniziare ad applicare i ruoli di sviluppatore Web dopo aver completato i seguenti passaggi:

  • Completa un corso full-stack.
  • Completa da due a tre progetti originali su larga scala per mostrare il tuo lavoro.
  • Se vuoi lavorare come sviluppatore full-stack, un ruolo che sta diventando sempre più richiesto, allora almeno due dei tuoi progetti dovrebbero avere un back-end funzionante e richiedere le autorizzazioni utente.
  • I tuoi progetti dovrebbero usare almeno un framework o una libreria che è richiesta nel tuo luogo di residenza, che sarà probabilmente React e / o Angular.
  • Prendi in considerazione di completare un corso sugli algoritmi che ti aiuterà con un colloquio tecnico: eesempio quelli di Andrei Neagoie.

Sì, continuo a raccomandare i corsi di Neagoie perché sono eccellenti! Tra le decine di corsi che ho pilotato, credo che Andrei Neagoie, Colt Steele e Jose Perilla siano tre dei migliori istruttori su Udemy.

Buona fortuna a te mentre intraprendi il tuo viaggio di apprendimento JavaScript! Se hai domande specifiche su quali corsi sono adatti a te, non esitare a contattarmi all'indirizzo info@spcnet.it o lascia un commento qui sotto.

END FEATURED POST
FEATURED POST

I migliori React Native Templates per il 2020

Come sviluppatore o imprenditore tecnologico, sai che creare un'app mobile bella e performante da zero è estremamente difficile e costoso - per non parlare dell'enorme quantità di tempo che impiega. Fortunatamente, recentemente sono emersi numerosi splendidi modelli React Native che consentono di risparmiare mesi di progettazione e sviluppo e migliaia di dollari.

Le app mobili sono estremamente complesse e il processo di sviluppo della creazione di un'app da zero è schiacciante: prototipazione, progettazione, scrittura di codice, revisione del codice, correzione di bug, miglioramento delle prestazioni, test e assunzione / licenziamento di persone. Non c'è da stupirsi che le aziende di sviluppo mobile e i liberi professionisti mobili stiano chiedendo decine di migliaia di dollari per costruire anche le app più semplici.

React Native è un punto di svolta per persone e aziende che stanno avviando nuovi progetti mobili. React Native consente agli sviluppatori di creare app mobili native più rapidamente in esecuzione su iOS e Android. Risparmia molto tempo di sviluppo e costi finanziari. Ma puoi andare ancora oltre in questo viaggio di spostamenti rapidi nel risparmio del denaro, sfruttando modelli React Native completamente funzionali.

I modelli React Native stanno aiutando sviluppatori e imprenditori a saltare la parte più difficile (e, francamente, la più noiosa) del ciclo di vita dello sviluppo, fornendo loro oltre l'80% del lavoro necessario. E sì, oltre l'80% del lavoro è condiviso su tutte le app mobili: pensa all'autenticazione e registrazione degli utenti, notifiche push, localizzazione e RTL, funzionalità di chat, comunicazione back-end, supporto in modalità oscura, dettagli dell'account, schermate delle impostazioni utente, navigazione, ecc.

Tutti questi aspetti sono condivisi su tutte le app mobili e ognuna di esse può essere estremamente complessa se eseguita correttamente. In questo pezzo, cerco i migliori modelli React Native del 2020 tra quelli attualmente disponibili sul mercato. Per creare l'elenco, impostiamo una barra di alta qualità osservando il design, la qualità del codice, le prestazioni dell'app e la completezza delle funzionalità. Integrazioni di back-end, assistenza clienti, documentazione e track record degli autori sono alcuni criteri importanti in base ai quali abbiamo creato l'elenco finale dei migliori modelli di React Native. Senza ulteriori indugi, diamo un'occhiata ai modelli di app React Native più incredibili e completi che possiamo trovare su questa cosa chiamata Web.

1. Tinder Clone React Native

Questo modello di app nativa di React è di gran lunga il clone di Tinder più completo disponibile sul mercato. Tutte le funzionalità illustrate nella pagina di presentazione sono completamente implementate, consentendo di lanciare un'app di appuntamenti a tutti gli effetti su iOS e Android nel giro di poche ore. Puoi letteralmente inviare la tua nuovissima app simile a Tinder su App Store e Google Play oggi. Dalla funzionalità di scorrimento, con consigli di geolocalizzazione e abbinamento, alle funzionalità di chat in tempo reale, questa app React Native ha tutto il necessario per iniziare.

Anche se sei interessato a implementare un'idea per app leggermente diversa, le funzionalità di questo modello ti forniranno comunque oltre l'80% del lavoro. La parte migliore? È completamente integrato con un back-end Firebase, quindi tutto è completamente funzionale end-to-end. Stimiamo che questo tema di React Native ti farà risparmiare circa sei mesi di progettazione e sviluppo di app rispetto che iniziare da zero. Il codice sorgente contiene più di 20.000 righe di codice e l'app ha più di 50 schermate di app completamente implementate.

Download link: React Native Dating App

2. React Native Social Networking

Ricordi in "The Social Network" come Mark Zuckerberg ha impiegato alcuni mesi per costruire la prima versione di TheFacebook? Bene, sono passati 15 anni da allora, e nel 2020, il lancio di un'app di social network per iOS e Android può essere fatto in meno di un giorno. E tutti possono farlo: non è più necessario essere un genio come Mark Zuckerberg.

Come? Bene, questo fantastico modello React Native consente a sviluppatori e imprenditori di avviare rapidamente le proprie app di social network, fornendo tutto il codice sorgente e le integrazioni back-end necessarie per tale app. Storie effimere, feed di notizie, reazioni simili a Facebook, amicizie: queste sono solo alcune delle fantastiche funzioni contenute in questo script di social network. Puoi risparmiare almeno sei mesi di duro lavoro e sviluppo, semplicemente acquistando questo modello nativo di React.

Download link: React Native Social Network

3. React Native per la cucina

Per quelli di voi che non hanno un budget per sviluppare un'app mobile, ci sono anche molti modelli gratuiti di React Native che possono aiutarvi a ottenere un vantaggio nel processo di sviluppo del prodotto. Questa app gratuita per ricette native di React è uno di quei prodotti open-source. Con un design moderno semplicistico, l'app contiene molte funzionalità che altrimenti richiederebbero un paio di settimane per svilupparsi da zero.

Le caratteristiche includono navigazione, ricette, ingredienti, ricerca, categorie e altro. Questo kit iniziale di React Native è anche un ottimo modo per imparare React Native, per coloro che stanno cercando di entrare nello sviluppo mobile. Imparare React Native è di gran lunga il modo più efficiente per studiare e assimilare un nuovo linguaggio di programmazione, specialmente con una base di codice di alta qualità, che possiede questo modello open source React Native.

Download link: Food App Template

4. Argon React Native

Se stai cercando un'ottima interfaccia utente completamente codificata in React Native, Argon è il punto di partenza perfetto. Questo modello gratuito React Native è stato creato con Galio ed Expo per aiutare gli sviluppatori a creare splendide applicazioni mobili.

Risparmiare un paio di giorni di lavoro e qualche centinaio di dollari è sempre un buon affare. Argon contiene un gran numero di componenti dell'interfaccia utente completamente implementati che è possibile accedere e utilizzare facilmente. Inoltre, devi amare l'incredibile combinazione di colori.

Download link: Argon React Native

5. Shopertino React Native

Shopertino React Native è uno dei modelli di app mobili e-commerce più completi in circolazione. Con un fantastico design moderno, l'utilizzo di questo codice sorgente dell'app per lo shopping è il modo più efficiente per lanciare un'app mobile nativa a pieno titolo per il tuo negozio di e-commerce. Sia che tu stia pensando di avviare una nuova attività di e-commerce o che stai cercando di estendere il tuo negozio web esistente all'App Store e a Google Play, questo modello React Native ha tutte le funzionalità di cui hai bisogno.

Con funzionalità complesse come Shopify e WooCommerce, integrazione automatica, carrello della spesa, flusso di checkout, pagamenti con Stripe e notifiche push, questa app di e-commerce React Native ti farà risparmiare almeno tre mesi di sviluppo e ti consentirà per stare al passo con la concorrenza muovendosi velocemente. Un'app mobile per un'azienda di e-commerce può aiutare aumentando il valore del marchio e aumenterà le vendite migliorando la fidelizzazione e la fidelizzazione dei clienti.

I clienti con un'app nativa installata ordinano 8 volte di più rispetto a quelli che non dispongono dell'app.

Download link: React Native Ecommerce Template

Conclusioni

Queste sono le mie selezioni per i modelli React Native più popolari del 2020. Trova quello che soddisfa meglio le tue esigenze e risparmia oltre l'80% dell'energia e lavora iniziando con un'app per la caldaia anziché reinventare la ruota.

I costi di sviluppo dell'app possono diminuire drasticamente se stai sfruttando uno di questi modelli e temi nativi di React. Potrebbe anche non essere necessario assumere designer o sviluppatori, quindi è possibile reindirizzare parte del budget in diverse aree, come marketing e crescita.

Concentrati su ciò che rende unico il tuo prodotto invece di lavorare per reinventare la ruota. Cercherò di mantenere questo elenco di temi il più aggiornato possibile. Saluti!

END FEATURED POST
FEATURED POST

Come creare un grafico previsionale sulla diffusione del Covid-19 con Linux, Bash e Python

All’inizio dell’emergenza sanitaria da Coronavirus (nCoV-19), durante i primi giorni di lockdown, mi sono dato subito da fare mettendo in piedi una semplice webapp www.coronavirus-italy.it, per il monitoraggio, tramite API nazionali e internazionali, della pandemia.

Poi arricchendola di alcune funzionalità più specifiche, una di queste: le previsioni sulla diffusione in Italia del virus, in base ai dati forniti giorno per giorno dalla Protezione Civile.

In questo articolo voglio condividere la mia esperienza per mettere in piedi un sistema previsionale automatico sul nostro server Linux.

Iniziamo con la preparazione dell’ambiente.

Nel nostro server Linux dobbiamo accertarci di avere installato Python3 e questi moduli necessari: scipy, venv, pandas, sklearn, numpy, matplotlib.

Ora possiamo iniziare con la creazione del file Python che genererà i grafici previsionali con i dati della Protezione Civile.

Teniamo presente che i nuovi dati vengono diffusi ogni giorno intorno alle 18.00 circa, e comunque entro le 18.30.

Per fare i calcoli previsionali tramite modello matematico logistico, mi sono affidato a questo progetto: https://github.com/marcello-dev/coronavirus-forecast, facendone le opportune modifiche che condivido qui.

Possiamo inserire questo codice all’interno di un nuovo file di testo che chiameremo covid-forecast.py

import pandas as pd
import numpy as np
from datetime import datetime, timedelta
from sklearn.metrics import mean_squared_error
from scipy.optimize import curve_fit
from scipy.optimize import fsolve
import matplotlib.pyplot as plt

url = "https://raw.githubusercontent.com/pcm-dpc/COVID-19/master/dati-andamento-nazionale/dpc-covid19-ita-andamento-nazionale.csv"
df = pd.read_csv(url)

df = df.loc[:, ['data', 'totale_casi']]

FMT = '%Y-%m-%dT%H:%M:%S'
date = df['data']
df['data'] = date.map(lambda x2: (datetime.strptime(x2, FMT) - datetime.strptime("2020-01-01T00:00:00", FMT)).days)

def logistic_model(x3, a3, b3, c3):
    return c3/(1+np.exp(-(x3-b3)/a3))

x = list(df.iloc[:, 0])
y = list(df.iloc[:, 1])

fit = curve_fit(logistic_model, x, y, p0=[2, 100, 20000])

a = fit[0][0]
b = fit[0][1]
c = fit[0][2]

first_january = datetime.strptime('2020/01/01', "%Y/%m/%d")
a = fit[0][0]
b = fit[0][1]
c = fit[0][2]

first_january = datetime.strptime('2020/01/01', "%Y/%m/%d")
infection_peak_date = first_january + timedelta(days=int(b))
print('{"status": "ok","previsioni": [{ "piccoContagio": "',datetime.strftime(infection_peak_date,"%d/%m/%Y"),'",')
errors = [np.sqrt(fit[1][i][i]) for i in [0, 1, 2]]
print('"totaleInfetti": "{}", "minInfetti": "{}", "maxInfetti": "{}",'.format(int(c), int(c-errors[2]),int(c+errors[2])))

sol = int(fsolve(lambda x : logistic_model(x, a, b, c) - int(c),b))

infection_end_date = first_january + timedelta(days=int(sol))
print('"fineContagio": "',datetime.strftime(infection_end_date,"%d/%m/%Y"),'",')

def add_real_data(df, label, color=None):
    x = df['data'].tolist()
    y = df['totale_casi'].tolist()
    plt.scatter(x, y, label="Dati reali (" + label + ")", c=color)

pred_x = list(range(max(x), sol))
plt.rcParams['figure.figsize'] = [7, 7]
plt.rc('font', size=14)
# Real data
add_real_data(df[-1:], "oggi")
add_real_data(df[-2:-1], "ieri")
add_real_data(df[:-2], "2 giorni fa")
# Predicted curve of today
plt.plot(x+pred_x, [logistic_model(i,fit[0][0],fit[0][1],fit[0][2]) for i in x+pred_x], label="Previsione dati oggi")

# Predicted curve of yesterday
x = list(df[:-1].iloc[:, 0])
y = list(df[:-1].iloc[:, 1])
pred_x = list(range(max(x), sol))
fit = curve_fit(logistic_model, x, y, p0=[2, 100, 20000])
plt.plot(x+pred_x, [logistic_model(i,fit[0][0],fit[0][1],fit[0][2]) for i in x+pred_x],
         label="Previsione dati ieri", dashes=[4, 4])

# Predicted curve of 2 days ago curve
x = list(df[:-2].iloc[:, 0])
y = list(df[:-2].iloc[:, 1])
pred_x = list(range(max(x), sol))
fit = curve_fit(logistic_model, x, y, p0=[2, 100, 20000])
plt.plot(x+pred_x, [logistic_model(i,fit[0][0],fit[0][1],fit[0][2]) for i in x+pred_x],
         label="Previsione dati 2 giorni fa",dashes=[8, 8])

today_date = datetime.today().strftime('%Y-%m-%d')
plt.title("Previsioni per casi accertati in Italia del " + today_date)

plt.legend()
plt.xlabel("Giorni da 1 gennaio 2020")
plt.ylabel("Numero totale persone infette")
plt.ylim((min(y)*0.9,c*1.1))

filename = 'plot-' + today_date + '.png'
plt.savefig('plots/'+filename, bbox_inches="tight")
y_pred_logistic = [logistic_model(i,fit[0][0],fit[0][1],fit[0][2]) for i in x]
print('"erroreModello": "', mean_squared_error(y,y_pred_logistic),'"}]}')

Creiamo allo stesso livello del nostro file Python una cartella che chiameremo plots/.

A questo punto, prima di procedere facciamo il test, per verificare che tutti gli import e le istruzioni Python vadano a buon fine, digitiamo questi 3 comandi uno dopo l’altro, il tutto si dovrebbe eseguire senza errori.

python3 -m venv venv

source venv/bin/activate

python3 main.py > plots/previsione.json

Tutta la parte di codice di generazione del file Json assieme al grafico previsionale è una modifica che ho implementato io e non troverete nel progetto originale, ad ogni modo la condivido in quanto ritenuta utile a future implementazioni di ogni genere, rimane pur sempre un JSON aggiornato quotidianamente contenente dei dati.

Possiamo ora procedere all’automatizzazione del tutto semplicemente creando uno script Bash che chiameremo covidscript:

#!/bin/bash
cd /home/Covid/coronavirus-forecast
python3 -m venv venv
source venv/bin/activate
python3 main.py > plots/previsione.json

Ovviamente ricordate di personalizzare l'indirizzo della cartella dove risiede il vostro applicativo Python per questo progetto, dichiarato nella seconda riga di questo script appena creato.

Se vogliamo inserire lo script in un Cron automatico ricordiamoci di non inserire alcuna estensione al file Bash e di renderlo eseguibile:

chmod +x covidscript

Poi effettuiamo un link simbolico dello script alla cartella di Cron:

ln -s /home/covid/covidscript /etc/cron.daily

A questo punto ogni giorno avremo sempre aggiornati il grafico previsionale e il file Json pronto per qualsiasi utilizzo.

Se vogliamo modificare l’orario dei Cron giornalieri possiamo inserire una riga all’interno del file /etc/crontab ricordandoci di inserire un orario non inferiore alle 18.30, perché altrimenti rischiamo ogni giorno di essere troppo in anticipo rispetto alla diffusione pubblica dei dati di quel giorno:

35 18   * * *   root    test -x /usr/sbin/anacron || ( cd / && run-parts --report /etc/cron.daily )
END FEATURED POST
FEATURED POST
Cover Image

Esiste console.log in JSX?

Guardando parecchi appunti, ho visto spesso provare questo: 

render() {
 return (
 <div>
 <h1>List of todos</h1>
 console.log(this.props.todos)
 </div>
 );
}

Ciò non stamperà l'elenco previsto nella console. Restituirà semplicemente la stringa console.log (this.props.todos) nel browser.

Diamo prima un'occhiata ad alcune soluzioni che sono molto semplici, quindi spiegheremo il motivo.

La soluzione più utilizzata:

Incorpora l'espressione nel tuo JSX:

render() {
 return (
 <div>
 <h1>List of todos</h1>
 { console.log(this.props.todos) }
 </div>
 );
}

Un'altra soluzione popolare:

Metti il ​​tuo console.logprima del return():

render() {
  console.log(this.props.todos);
  return (
    <div>
      <h1>List of todos</h1>
    </div>
  );
}

Una soluzione elegante:

Divertiti scrivendo e usando il tuo componente <ConsoleLog>:

const ConsoleLog = ({ children }) => {
 console.log(children);
 return false;
};

Quindi usalo:

render() {
 return (
 <div>
 <h1>List of todos</h1>
 <ConsoleLog>{ this.props.todos }</ConsoleLog>
 </div>
 );
}

Perchè è così?

Dobbiamo ricordare che JSX non è JavaScript, né HTML. È un'estensione di sintassi.

Solo alla fine, JSX viene compilato in JavaScript.

Ad esempio, se scriviamo il seguente JSX:

const element = (
 <h1 className="greeting">
 Hello, world!
 </h1>
);

Verrà compilato in:

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Rivediamo i parametri di React.createElement:

  • 'h1' : Questo è il nome del tag, come una stringa

Esaminiamo ora il console.log in errore che abbiamo provato a scrivere all'inizio di questo articolo:

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);

Questo verrebbe compilato in:

// quando viene passato più di 1 oggetto, viene convertito in un array React.createElement ( 
  'div', 
  {}, // non vengono passati oggetti di scena / 
  [ 
    React.createElement ( 
      'h1', 
      {}, // no props qui o 
      'List of todos', 
    ), 
    'console.log (this.props.todos)' 
  ] 
);

Guarda come console.logviene passato come stringa a createElementNon viene eseguito.

Ha senso, sopra abbiamo il titolo List of todosCome può il computer sapere quale testo deve essere eseguito e qual è qualcosa che vuoi rendere?

Risposta : considera entrambi come una stringa. Considera SEMPRE il testo come una stringa.

Quindi, se si desidera che venga eseguito, è necessario specificare a JSX di farlo. Incorporandolo come espressione con {}.

E il gioco è fatto! Ora sai dove, quando e come console.logpuò essere utilizzato all'interno di JSX!

END FEATURED POST
FEATURED POST
Cover Image

Come diventare un ottimo utente di Stack Overflow in cinque semplici passi

Gli sviluppatori di software non possono immaginare le loro vite senza Stack Overflow.
Lo usiamo quasi tutti i giorni! Ci piace. Ci risparmia tanto tempo che può essere dedicato a qualcosa di meglio che inventare la ruota ogni volta ci serva qualcosa.

Ciò che rende Stack Overflow così prezioso è il suo contenuto. Quasi tutto ciò che riesci a pensare è già lì. Hai un problema che non puoi risolvere da solo, lo cerchi su Google. Ed eccolo, il primo link è una domanda Stack Overflow con il codice che stavi cercando. Molto semplice. Questo flusso funziona come benissimo.
Non ci è viene dato tutto questo gratuitamente. Ogni piccola informazione utile è il risultato del lavoro di qualcuno. Qualcuno ha trascorso il proprio tempo privato a indagare su un problema e a scrivere i risultati in modo tale che più persone possano trarne beneficio. C’era una persona reale dietro, proprio come te e me.

Ci sono studi psicologici sulle persone che fanno parte di un grande gruppo. Di fronte a un problema, tendiamo inconsciamente ad aspettarci che ci debba essere qualcun altro “che lo gestirà”. Lavoriamo attivamente su compiti personali. Ma se il problema non riguarda direttamente noi, probabilmente lo delegheremo a “qualcun altro”.
Nel mondo reale, facciamo molto affidamento sui trasporti, la polizia e un sistema sanitario. Non c’è governo su Stack Overflow. Forse ci sono alcuni Batman e Superman, ma non possono fare tutto loro. Dovremmo tutti essere attivi per il bene di tutti.
Diventiamo una comunità che si prende cura dei suoi membri, di quelli che aggiungono valore e non dei consumatori passivi.

Ci sono molti modi per diventare un utente migliore di Stack Overflow. Inizia seguendo queste cinque pratiche quotidiane:

1. Non dimenticare di votare

Se sei sicuro che una risposta sia corretta, votala. Anche se non era la tua domanda o non ne hai bisogno. Mostra al mondo intero che è probabile che la risposta sia vera e attira più attenzioni su di essa.
Non votare mai (in alto o in basso) se hai dei dubbi su una certa risposta!

Diamo un’occhiata da un altro punto di vista. Sei la persona che ha pubblicato una risposta. Ci hai investito un bel po’ di tempo, sei stato utile, generoso e orgoglioso… E nessuno reagisce. Saresti imbarazzato.
Non è come dovrebbe essere. Dobbiamo riconoscere il contributo reciproco, che significa votare.

2. Scrivi commenti

Succede che le persone postano risposte sbagliate o domande stupide. Ma non lo fanno mai apposta. Ecco perché le persone non capiscono perché siano state downvotate. Vorrebbero chiedere ma non c’è nessuno a cui chiedere perché i voti sono anonimi. Questo sembra ingiusto e li rende insoddisfatti.
Questo non è il modo in cui dovremmo sentirci su Stack Overflow. È un posto pieno di amore e sostegno.
Ma non possiamo ignorare la disinformazione! Invece dovremmo scrivere un commento che spiega la nostra opinione. Molto probabilmente correggeranno la risposta o la cancelleranno.

3. Leggi regolarmente le domande più frequenti

È come il feed su Facebook, ma per i nerd. Passa attraverso le domande più frequenti e apri quelle che contengono i tag che ti interessano. Anche se non intendi rispondere.
Come professionista, migliorerai notevolmente. Scopri come si muovono i tuoi pari, come superano gli ostacoli e come ragionano.
A volte anche le domande mediocri hanno una risposta brillante. Sicuramente non potrai perdertela!

4. Non c’è vergogna nel chiedere

Anche se chiedi una domanda completamente stupida, la cosa peggiore che potrebbe accadere è che otterrai downvoti o ricevi commenti spiacevoli. Non perderai alcun punto di reputazione anche se elimini la domanda.
È anche possibile che la domanda non raccolga attenzioni perché è troppo ampia o troppo specifica. Questo non ti danneggia sicuramente. Eliminalo dopo pochi giorni se ti infastidisce che rimanga in memoria nel sistema pubblico.
La quantità di linguaggi e strumenti di programmazione è limitata. C’è una buona probabilità che tu non sia l’unica persona che ha riscontrato quel problema.
Creando una domanda, inizi a capire meglio il problema. Sembrano tutti travolgenti all’inizio e svaniscono quando li facciamo a pezzi. Potresti avere una risposta prima di pubblicare una domanda.
Allo stesso tempo, dovresti tenere presente che altri utenti apprezzano le tue domande ancora di più se fai ricerche prima di pubblicarle. Ci piacciono domande uniche e stimolanti e siamo infastiditi da quelle ripetitive e scontate.

5. Rispondi!

A differenza del resto, la risposta di solito richiede tempo. Questo è ciò che fanno i migliori cittadini, perché avvantaggia sia la comunità che se stessi.
Lasciatemelo dire in questo modo: nessuna risposta – nessun eccesso di stack. Nessuno aprirebbe questo sito se non ci fossero risposte. Senza dubbio, la comunità ha bisogno di risposte, in particolare quel povero ragazzo che sta chiedendo, ma perché la gente risponde a tutti?
Prima di tutto, è piacevole interpretare il ruolo di un esperto e aiutare gli altri. Inoltre, ottieni upvoti che determinano una crescita della tua reputazione. Questo enorme numero accanto al tuo nome e avatar parla da solo. Tutti vedono che sei un professionista.
E, ultimo ma non meno importante – È un ottimo motivo per imparare qualcosa di nuovo. Raramente conosci la risposta subito. Ti immergi nella domanda, crei un progetto che vada alla risoluzione, leggi la documentazione e, infine, scrivi una risposta. Quando viene pubblicato un problema, tutti pensano che tu abbia sempre saputo la risposta. Alleni il tuo muscolo cerebrale e prova a te stesso e agli altri che sei un esperto. Non è bello?
Grazie per aver letto questo nuovo contributo! Se l’argomento ti interessa scrivici nei commenti Cosa ne pensi di Stack Overflow?

END FEATURED POST
intopic.it