Focaldata use a combination of technology and expertise to remove the understanding gap between what organisations believe about people - consumers, voters, citizens - and reality

Focaldata

Data Management and Consolidation in the Integration of Corporate Information Systems

Why Build? As we already know the whole world is suffering from COVID-19 and the vaccinations are going in full swing everywhere. Finding a slot is getting tougher in our country India as we have a huge population to be vaccinated. Numerous times we have to go to to search for a slot and slots are always full. It is pretty time-consuming and irritating. Being a developer, I thought most of the time is usually spent by us in the terminal so why can't we have a basic terminal-based app to save time. So this post will help you in two ways CoWin site Learn how to create Node.js based CLI's Get real-time info about vaccination slots for your area. In case you are someone who likes to watch than read you can watch the same Let's begin our initial setup! – We are assuming you have installed Node.js and npm, If not you can install from Pre-requisite here So as a first step lets initialize our project using command npm init Enter the basic details as shown below. This will create package.json file in the folder cowinCLI. The next step is to create a bin folder that will have our index.js file containing our application. Open the index.js file and add the below-mentioned first line. This actually tells the interpreter that whatever code runs below this will be handled by the node. #! /usr/bin/env node If you remember while creating we have mentioned our entry point as index.js but actually, this file now exists in the bin folder. So we will correct that as well as we will add one more entry. The new entry which we will add is for the keyword we want to use to call our CLI. We want to use something like cowin. So we will add this entry. : { : } "bin" "cowin" "./bin/index.js" So your package.json will look something like this { : , : , : , : , : { : }, : , : , : { : , : , : , : , : , : }, : { : }
} "name" "vaccli" "version" "1.0.0" "description" "CLI vaccination slots" "main" "bin/index.js" "scripts" "test" "echo \"Error: no test specified\" && exit 1" "author" "Nabheet" "license" "ISC" "dependencies" "axios" "^0.21.1" "chalk" "^4.1.1" "commander" "^7.2.0" "inquirer" "^8.0.0" "node-notifier" "^9.0.1" "tty-table" "^4.1.3" "bin" "cowin" "./bin/index.js" So the basic structure is set. Now before we start adding the functionality we have not given a thought to how we will fetch the data? Let's first check that. Do we have an API to fetch covid vaccination slots data? Thank God for looking at site they have provided us with . 50% of work is done. Now, all we need to do is, consume this data and work as per our need. Let's now think about what our CLI will do. Co-Win OpenAPI What functions our CLI will perform? On looking closely at the for a district( In India we have a Country comprised of States and Union Territories which in turn consists of districts) we can see it needs some kind of district id. calendar slots api So looking at how do we get districts id we found another but that needs state id api How do we get state id's another 😊 API So our CLI shall do the following. Ability to get all states and id's Ability to get all district id's for a state id Ability to get slots by district id Ability to filter slots by ages as we have slots by 18-45 and 45 and above. Apart from this some beautification Desktop notification In order to achieve this, we will be using multiple modules lets install them first using the below-mentioned command npm npm install axios chalk commander inquirer node-notifier tty-table Packages to be installed Axios –for calling the different API's Chalk – for beautifying the console output Commander – giving the different options and command in CLI such as cowin states or cowin districts <state id>; Inquirer – for getting user input for entering the age filter Node-notifier – send desktop notification Tty-table – format our table output Let's begin by creating separate functions for them. Create a util folder under the cowinCLI project. Create files states.js, districts.js, config.js, and slots.js in util folder. Config.js is for the configuration related common data such as table header formatting which will be used by all functions exports.config = { : { : },
};
exports.options = { : , : , : , : , : , : , : ,
}; // Common configuration data to be used by all functions. headers "User-Agent" "Axios - console app" borderStyle "solid" borderColor "blue" headerAlign "center" align "left" color "white" truncate "..." width "90%" Let's first code our reusable States function in states.js If you look, we need to call the states for that we will use our already installed npm package . We are calling the API and once we got a response we are formatting the table data by using the tty-table package and writing the output to the console. So this function will return the formatted output of states and its id's. API axios axios = ( ); table = ( ); { config,options } = ( ); .exports = {
    axios
    .get( , config)
    .then( { header = [
        { : , : , : , : , : , : ,
        },
        { : , : , : , : , : , : ,
        },
      ]; out = table(header, response.data.states, options).render(); .table(out);
    })
    .catch( { .log(error);
    });
}; const require 'axios' const require "tty-table" const require './config' // function to return list of all states module ( ) function "https://cdn-api.co-vin.in/api/v2/admin/location/states" ( ) => response // table formatter let value "state_id" headerColor "cyan" alias "State ID" color "white" align "left" width 40 value "state_name" alias "State" headerColor "cyan" color "white" align "left" width 40 const console ( ) => error console Let's code our second reusable Districts function in districts.js For this also we will use a similar set up of axios and tty-table. The only thing to be noted is, in this function which we are exporting has an argument as stateid. axios = ( ); table = ( ); { config,options } = ( ); .exports = {
    axios
    .get( ,
      config
    )
    .then( { header = [
        { : , : , : , : , : , : ,
        },
        { : , : , : , : , : , : ,
        },
      ]; out = table(header, response.data.districts, options).render(); .table(out);
    })
    .catch( { .log(error);
    });
}; const require 'axios' const require "tty-table" const require './config' // Function which take stateid as input and return all the formatted districts module ( ) function stateid `https://cdn-api.co-vin.in/api/v2/admin/location/districts/ ` ${stateid} ( ) => response // Table header specific formatting let value "district_id" headerColor "cyan" alias "District ID" color "white" align "left" width 40 value "district_name" alias "District" headerColor "cyan" color "white" align "left" width 40 // Output the results. const console ( ) => error console Let's code our third reusable slots function in slots.js For this also we will use a similar set up of axios and tty-table. The only thing to be noted is in this function which we are exporting has an argument as districtid. In addition to it you can see we are using chalk and inquirer package. Chalk is used to format the headers above the table and inquirer is used for taking input from user when slots command is run. We have also used node-notifier which will send desktop notification as soon as it runs, just an example. You can modify this behavior to code your own custom logic. axios = ( ); table = ( ); chalk = ( ); notifier = ( ); inquirer = ( ); { config,options } = ( ); .exports = { inquirer
    .prompt([
      { : , : , : , : [
          { : , : ,
          },
          { : , : ,
          },
          { : , : ,
          },
        ],
      },
    ])
    .then( { date = (); todaysDate = ; .log(
        chalk.underline.bgRed.bold( )
      );
      
      axios
        .get( ,
          config
        )
        .then( { finalData = []; districtName;

          response.data.centers.forEach( {
            item.sessions.forEach( {
              districtName = item.district_name; (answers.choice == ) { data = { : item.name, : item.address, : session.date, : session.available_capacity, : session.min_age_limit,
                };
                finalData.push(data);
              } (
                answers.choice == &&
                session.min_age_limit == ) { data = { : item.name, : item.address, : session.date, : session.available_capacity, : session.min_age_limit,
                };
                finalData.push(data);
              } (
                answers.choice == &&
                session.min_age_limit == ) { data = { : item.name, : item.address, : session.date, : session.available_capacity, : session.min_age_limit,
                };
                finalData.push(data);
              }
            });
          }); .log(
            chalk.underline.bgGreen.bold( )
          ); (answers.choice) { : .log(chalk.underline.bgBlue.bold( )); ; : .log(chalk.underline.bgBlue.bold( )); ; : .log(chalk.underline.bgBlue.bold( )); ; : ;
          } header = [
            { : , : , : , : , : ,
            },
            { : , : , : , : , : ,
            },
            { : , : , : , : , : ,
            },
            { : , : , : , : , : ,
            },
            { : , : , : , : , : ,
            },
          ]; out = table(header, finalData, options).render(); .table(out);
          notifier.notify({ : , : , : , : ,
          });
        })
        .catch( { .log(error);
        });
    })
    .catch( { (error.isTtyError) { } { }
    });
}; const require 'axios' const require "tty-table" const require "chalk" const require "node-notifier" var require "inquirer" const require './config' // function to check slots. module ( ) function district //Input prompt for getting what age you want to check records. type "list" name "choice" message "Which Age group?" choices name "View All" value "" name "45 Plus" value "45" name "18 - 45 " value "18" ( ) => answers const new Date var ` - - ` ${date.getDate()} ${ (
        date.getMonth() + ).padStart( , )} String 1 2 "0" ${date.getFullYear()} console `Showing Slots from - ` ${todaysDate} `https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByDistrict?district_id= &date= ` ${district} ${todaysDate} ( ) => response let let ( ) => item ( ) => session // based on user age choice filter the data if "" let Center Address Date FreeSlots Age else if "18" "18" let Center Address Date FreeSlots Age else if "45" "45" let Center Address Date FreeSlots Age console `District - ` ${districtName} switch case "" console `All ages` break case "45" console `45+ Age` break case "18" console `18-45 Age` break default break // table formatting let value "Center" headerColor "cyan" color "white" align "left" width 40 value "Address" headerColor "cyan" color "white" align "left" width 40 value "Date" headerColor "cyan" color "white" align "left" width 15 value "FreeSlots" headerColor "cyan" color "white" align "left" width 20 value "Age" headerColor "cyan" color "white" align "left" width 20 const console title "Vaccination Slots Available" subtitle "Daily Maintenance" message "Immediately go and check Vaccination slots!" wait true ( ) => error console ( ) => error if // Prompt couldn't be rendered in the current environment else // Something else went wrong Now our all basic functions are in place but what is pending is the actual CLI😊 Let's start building that. Lets now build the CLI by updating index.js So far we have used all npm packages except commander it is the heart of our CLI. We will be using commander for making the subcommands as well as flag options. As can be seen, below we have used both command and option. Commands for getting states, districts, and slots and they have a callback function mentioned as our reusable functions under action. program = ( ); districts = ( ); states = ( ); slots = ( ); program.option( , );
program
  .command( )
  .description( )
  .action(states);
program
  .command( )
  .description( )
  .action(districts);

program
  .command( )
  .description( )
  .action(slots);

program.parse(); #! /usr/bin/env node const require "commander" // import all functions const require '../util/districts' const require '../util/states' const require '../util/slots' // adding different cli options,commands and passing callback functions in actions "-a, --available" "Output If slots available" "states" "Get all State Codes and descriptions." "district <stateid>" "Get all district of a State" "slots <districtid>" "Get slots for the district" Final touches So we have everything ready all we need to do is now run the below command which will install our package globally. npm install -g . Output cowin states cowin districts 12 cowin slots 187 You can refer to the source code Previously published at https://blogs.sap.com/2021/05/15/lets-build-node.js-based-cli-track-real-time-covid-19-vaccination-slots-in-india/?update=updated

Building A Node.js Based CLI For Real-Time COVID-19 Vaccination Tracking

I recently built an app utilising data from the WHO (World Health Organisation), the WikiQuotes API, Recharts, lots of CSS and JS, and, of course, passion for the subject. This will show you how to do it minutely. Intro: Before beginning a project there is one thing you must know, and that is what exactly you are passionate about. I’ll leave that fundamental conundrum to you. Personally, I love to dwell on life on Earth and the folks on it with all the disparate forces within their lives. I decided to do this: Ten data sets containing data expressing something intense about life. Ten charts to create a user experience with the data. Ten quotes correlating with the data, from the WikiQuotes . API This is what the app looks like in the end: Quick viewing of the app This guide will be separated as so: Creating the app with Create App React Manipulation of data to create charts with Recharts Utilising the WikiQuotes API to scrape quotes Dynamically changing pages and passing props Deploying on Github Pages You can definitely do this. this is possibly, probably, maybe an exaggeration Creating a React App npm install -g create-react-app Then this: create-react-app name_of_app_you're_creating This creates a directory with the file structure within it Go into this new directory or npm start yarn start Pop! You have the file structure all set up! Take a peak at it: my-app/  README.md  node_modules/  package.json  public/    index.html    favicon.ico  src/    App.css    App.js    App.test.js    index.css    index.js    logo.svg node-modules? Contains countless lines of code written by some smart folks to do all sorts of heavy lifting for you so you can simply focus on the easy-to-conceptualise part of writing code (functions that do relatable things and visual aspects) public? Here is the HTML file that will be rendered on the page, the starting point of your app, visually. , that’s that little image on your tab. It is referenced in the favicon.ico manifest.json The is mainly used for metadata manifest.json src This is where just about everything you write will be located See the and the . Both do the same thing. I thought of it this way. What will I want to occur visually globally throughout the app? Put that into the . All else put into the . It’s a small app. index.css App.css index.css App.css The , this creates ‘workers’ that do tasks to improve a users experience with a website as well as improving the functioning of the site as a whole. registerServiceWorker.js The is linking the to everything you are to write. index.js index.html The juicy part, the , is your app. This is the dwelling place. The place where everything comes together. Personally, I deleted everything in the return statement except the as I did not want a header. App.js div Notice the data folder I have there. Go find some data, personally I used: and clicked around until I found data of interest. After the JSON is downloaded, move the files to the data folder. WHO data Now, onto the actual writing of code. How many individual pages will you have? Well, you should create a component for each one. The beginning of my plan was this. Ten files of data to create ten charts. So I will show how to create the charts. First, create a new folder to hold these components that you will create and simultaneously create the files associated. Manipulation of data and creation of charts I’ll show you how to create this chart: I did mention expressing something intense about life Link to data if curious: Data Set With data originally structured as so: { "dimension": [many_irrelevant_objects],"fact": [ {  
               "dims": {  
                           "COUNTRY": "Afganhistan",  
                           "YEAR": "2010",  
                           "GHO": "Knowledge about sexual      
                           transmission of AIDS",  
                           "SEX": "Female"  
                       },  
               "Value": "8.8"

},  
          ...many\_more\_objects of same format  
       \] } For my chart I want the data to end up looking like this: [{"year": "1993","Burkina Faso": 16,"Ghana": 0,"Kenya": 0},...,{"year": "2010","Burkina Faso": 80.4,"Ghana": 75.05,...}] Formatting the data Notice how the initial format has the odd field which is unneeded, all that is needed is within ‘s and . So, here I am grabbing those values and setting them to an individual object. “dimension” "fact" "dims" "Value" const initialReformat = (data) => {let temp = {}return data.fact.map(row => {temp = row.Valuerow = row.dimsrow.Value = tempreturn row})} I now have this: [{COUNTRY: 'Afghanistan',YEAR: '2010',GHO: 'Knowledge about sexual transmission of AIDS',SEX: 'Female',Value: '8.8'},...] Next, I created an object, set each year to a key whose value is to be an array of every piece of data with a YEAR value correlating. const sortDataByYear = data => {var sortByYear = {}data.forEach( row => {if (!sortByYear[row.YEAR]) {sortByYear[row.YEAR] = [];sortByYear[row.YEAR].push(row);} else {sortByYear[row.YEAR].push(row);}})return sortByYear} Quite simple, check if year does not exist, if so, create a new array and push that data into it. Otherwise, push the data into the year array that has already been created. And I end up with this object: {1992:[ { COUNTRY: 'Malawi',YEAR: '1992',GHO: 'Knowledge about sexual transmission of AIDS',SEX: 'Male',Value: '0.0' },...],1993: [...],...} Now, the last function to get the necessitated data structure for the chart: const finalData = []for (const year in sortByYear) {finalData.push({ year })sortByYear[year].forEach(obj => {if (parseFloat(finalData[i][obj.COUNTRY]) > 0) {finalData[i][obj.COUNTRY] = (finalData[i][obj.COUNTRY] + parseFloat(obj.Value)) / 2}else finalData[i][obj.COUNTRY] =parseFloat(obj.Value).toFixed(2)})i++} First, I made a brand new array to store the final data. Then, I created a new object for each year and set that year as one of the objects key/value pairs ( ). Lastly, I looped through the array corresponding with the year from the previous functions returned object: . finalData.push({ year }) sortByYear Inside this array, I have two layers to check: Has the country been set as a key for the object in the final data array? If it has not, it means that I am seeing a different sex (gender), so I should average this number with the previous, . (finalData[i][obj.COUNTRY] + parseFloat(obj.Value)) / 2 is used so the next year is in the next index of the array. i We are at the point. Though, a quick description of the creation of a react component will happen next. Then the visual presentation. arranged Taking a look at the rendering of a React Component import React, { Component } from 'react' Create a class and a constructor class HIVKnowledge extends Component {constructor(props) {super(props)this.state = {data: [],quote: ""}}... 3. Import the data and when the “component mounts”, set the state of the data. const HIVKnowledgeData = require('../data/diseases-hiv-knowledge.json'); ...where I left off above componentDidMount() {const data = []data = initialReformat(HIVKnowledgeData)this.setState({ data })} runs when the page is “mounted” or ready to load and whatever is put here affects the initial rendering. componentDidMount 4. Final data management prior to rendering the page: render() {let sortByYear = [],finalData = [],i = 0if (this.state.data.length > 0) {sortByYear = sortDataByYear(this.state.data)...then run the last data function on sortByYear} Check if the length is greater than zero, as does not occur immediately. So, at the first check of this if statement the data will be an empty array, which is not at all what we want to be inputted into our graph. componentDidMount The creation of the chart and the rendering of the page npm install recharts What to import from recharts: import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; What to put into your index.html right above the tag (also change that if you want the tab to say something other then React App) <title> <link rel="stylesheet" href=" "><script src=" " integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="crossorigin="anonymous"></script><script src=" "></script> https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css https://code.jquery.com/jquery-2.1.3.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js What to put in your render’s return statement: return (<div className="chart bar HIV"><h6>Knowlege about sexual transmission of AIDS (AverageBoth Sexes)</h6><ResponsiveContainer width='100%' height={300}><LineChartcx="50%"cy="50%"outerRadius="80%"data={finalData}><XAxis dataKey="year" /><YAxis /><CartesianGrid strokeDasharray="3 3" /><Tooltip /><LineconnectNulls={true}type="monotone"dataKey="Zambia"stroke="black"/>...rest of lines and closing tags This is what will render on the page. This is JSX. The className is React’s way to set class. Otherwise, the is as one expects and notice how the graph is quite HTML’y as well. Notice, a defining factor of JSX components is the camelCase. <h6> As for the chart: The responsive container does exactly what one expects, gets larger and smaller based upon the screen size. are not random numbers. This is a secret recipe to get a centered location for the chart. width cx cy outerRadius is how the data is inputted into the chart. data={finalData} is what sets the years as the… x-axis, very complex. <XAxis datakey=”year” /> creates a lovely user interaction when hovering over data. <Tooltip /> is each line with the color, country (key in the array), and will do just that, if the next year is a distance away, the line will connect. Helpful with this data as many countries skip many years between studies. <Line … /> connectNulls Export the component at end of file export default HIVKnowledge Import the component in App.js import HIVKnowledge from ‘./poem-1-data/HIVKnowledge’ Render the chart component Put inside the within the return statement of the render method. <HIVKnowledge /> div You should now see the the chart on the page. Hopefully not Utilising the WikiQuotes API to render quotes 1. I used this module readily available on github: https://github.com/natetyler/wikiquotes-api Copy and paste it into a file in your app. I used a file called . WikiQuote.js 2. Import jQuery at the top of this file: import * as $ from ‘jquery’ 3. Export the module: export const WikiquoteApi = ... 4. Create the necessary error callback: export const error = (err) => {console.error(err)} 5. Import into the chart component: import { WikiquoteApi, error } from ‘../WikiQuote.js’ 6a. Create the callback function within the so that the variable is set when this is called: success componentDidMount quote const success = (wikiData) => {quote = `"${wikiData.quote}"`} 6b. Create a function that waits for the WikiQuote function to finish (this is an asynchronous challenge), repeatedly calling itself until that occurs, setting state immediately. Put this also in the checkQuoteLength componentDidMount const checkQuoteLength = () => {if (quote.length > 0) {this.setState({ quote, data })} else {setTimeout(checkQuoteLength, 100)}} 6c. Invoke : checkQuoteLength checkQuoteLength() 6d. Call the : WikiquoteApi.getRandomQuote(title_to_search_in_wikiquotes, success, error) componentDidMount () {let quote = "", data = []const success = (wikiData) => {quote = `"${wikiData.quote}"`}const checkQuoteLength = () => {if (quote.length > 0) {this.setState({ quote, data })} else {setTimeout(checkQuoteLength, 100)}}WikiquoteApi.getRandomQuote("HIV/AIDS", success, error)data = initialReformat(HIVKnowledgeData)checkQuoteLength()} 7. Render the Quote: return (<div className="chart bar HIV"><h6>Knowlege about sexual transmission of AIDS (AverageBoth Sexes)</h6><p>{this.state.quote}</p><ResponsiveContainer width='100%' height={300}>... Voila! Now the quote exists on the webpage. Now you can do all sorts of stuff with this in apps But you only have a single page with one chart, create more charts at this time before moving on if you are planning to. Next, what will be shown is how to go from one page to the next in a simple way. Dynamically changing pages and passing props Creating some buttons: I used to make my life easier. CSS Button Generator Creating a buttons component, for a left and a right button: Make a file called that will contain the HTML for the buttons. Buttons Create a class component (same as previously done) with two initial states, and . leftButtonDisable: true rightButtonDisable: false In the return create the buttons: <div className="buttons"><button className="btn" value="left" disabled={this.state.leftButtonDisable} onClick={this.handleClick}>◀</button><button className="btn" value="right" disabled={this.state.rightButtonDisable} onClick={this.handleClick}>▶</button></div> 3. Create the class method: handleClick handleClick(event) {let value = 0if (event.target.value === "left") {value--this.props.onPageChange(value)} else {value++this.props.onPageChange(value)}} Set value to zero, and if it is left then decrement it, otherwise increment it. And pass that value into… . Will go over this next. this.props.onPageChange 4. Export the component Within the App.js: import Buttons from ‘./Buttons’ Create a currentPage state and set it to zero: currentPage: 0 2. Create an class method and set the context to allow the corresponding page to render onPageChange this constructor (props) {...this.onPageChange = this.onPageChange.bind(this)} onPageChange(value) {const currentPage = this.state.currentPage + valuethis.setState({ currentPage })} 3. Put the Buttons component in the render and pass and as props to the component onPageChange currentPage Buttons <ButtonscurrentPage={this.state.currentPage}onPageChange={this.onPageChange}/> Back to the Buttons Component Use the life cycle method to know when to disable buttons componentWillRecieveProps componentWillReceiveProps(nextProps) {let currentPage = nextProps.currentPageif (currentPage === 0) {this.setState({leftButtonDisable: true})}else if (currentPage === 9) {this.setState({rightButtonDisable: true})} else {this.setState({leftButtonDisable: false,rightButtonDisable: false})}} This runs whenever the props that is passing down to changes, in this case, changes. When changes runs and is an object with key/values of the props being passed down as the incoming value. This allows you to alter the state at this instance, and in turn alter the component being viewed visually on the page. App.js buttons.js currentPage currentPage componentWillReceiveProps nextProps Ah buttons, wonderful buttons Rendering different pages based upon **currentPage** Create a render page class method in App.js renderPage(curPage) {switch (curPage) {case 0:return <HIVKnowledge />case 1:return <LifeExpectancy />...default:return console.error("Something is wrong with your buttons")}} 2. call this function in the statement of the class method return render <div className="App">{this.renderPage(this.state.currentPage)}<Buttons currentPage={this.state.currentPage} onPageChange={this.onPageChange} /></div> And now, possibly, hopefully you know how to create a multi-page react app. If yes, you must feel this way Deploying the App to Github Pages Info is thanks to . this Medium Article Go to your and add two new fields as so: package.json {..."private": true, //below this add:"homepage": "scripts": {"eject": "react-scripts-eject", //below this add:"deploy: "npm run build&&gh-pages -d build"...} "https://github_username.github.io/repository_name",       ... 2. Then do this: . Push your code to master. npm install --save-dev gh-pages 3. which will create a bundle of all the code in your application (after running it, look in your file system and you will see a folder containing all of the code in a tightly woven, unreadable format). npm run build build 4. is the last step in the terminal npm run deploy 5. Go onto your GitHub account. Go to the applications page, then to settings, scroll down until you reach the GitHub Pages, click the Source dropdown and find then wait a moment and you are… gh-pages branch Deployed! In the future, if you edit some code or something similar be sure to run then for your deployed app to be affected! npm run build npm run deploy buenisimo In Closing No matter your skill level in React, I aimed to make sure this article held nuances that anyone can learn from. This was written directly after completing the aforementioned project so the troubles, the tribulations are fresh on my mind (in relation to the person I am this moment, while I am typing these words, that are reference). Still there are countless resources in React, and this was only a few of a giant assortment of resources. If you read this but know there is something else you want to do, check this repo out: . awesome-react-components Here’s a quote by Marcel Proust: “Every reader finds himself. The writer’s work is merely a kind of optical instrument that makes it possible for the reader to discern what, without this book, he would perhaps never have seen in himself.” Let’s hope that React is a tool that helps you write code that does the same. There is a corresponding CSS article… here And this is the repo: Quote and a Chart And thank’s Doug and Kyle for the proofreading! All the best in your journey, I am regularly creating content so follow me if you learned a thing or two, and those clap thingies are surely welcome. Comments too.

Focaldata

focaldata.com

-- employees

Since n.d.

COMPANY RANKING

FOCALDATA

EVERGREEN INDEX #3900

Focaldata WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

Focaldata

focaldata.com

-- employees

Since n.d.

COMPANY RANKING

FOCALDATA

EVERGREEN INDEX #3900

RELATED COMPANIESRANK

STORIES ABOUT FOCALDATA

Focaldata WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!