This is a Google-Clone with API Google Search and this app responsive.
License: MIT License
This is a Google-Clone with API Google Search and this app responsive.
This project was bootstrapped with Create React App.
npm init
npm install
In the project directory, you can run:
Preparing the data layer
import React, { createContext, useContext, useReducer } from "react";
export const StateContext = createContext();
export const StateProvider = ({ reducer, initialState, children }) => (
<StateContext.Provider value={useReducer(reducer, initialState)}>
{children}
</StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);
save the keys.
export const API_KEY = "YOUR_API_KEY";
export default API_KEY;
useStateValue();
diambil dari
import { useStateValue } from "../StateProvider";
pemakaian:
const [{}, dispatch] = useStateValue();
{ } merupakan data state yang akan di manapulasi.
call term use useStateValue by StateProvider
use HOOKS.
const CONTEXT_KEY = "FROM GOOGLE programmable search";
function useGoogleSearch(term) {
const [data, setData] = useState(null);
useEffect(() => {
const fetchData = async () => {
fetch(
https://www.googleapis.com/customsearch/v1?key=${API_KEY}&cx=${CONTEXT_KEY}&q=${term}
)
.then((response) => response.json())
.then((result) => {
setData(result);
});
};
fetchData();
}, [term]);
return { data };
}
export default useGoogleSearch;
this is file for response testing.
copy from network/response api.
export default {
"kind": "customsearch#search",
"url": {
"type": "application/json",
"template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
},
"queries": {
"request": [
{
"title": "Google Custom Search - tesla",
"totalResults": "281000000",
"searchTerms": "tesla",
"count": 10,
"startIndex": 1,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "7e22dbe910027b42a"
}
],
"nextPage": [
{
"title": "Google Custom Search - tesla",
"totalResults": "281000000",
"searchTerms": "tesla",
"count": 10,
"startIndex": 11,
"inputEncoding": "utf8",
"outputEncoding": "utf8",
"safe": "off",
"cx": "7e22dbe910027b42a"
}
]
},
"context": {
"title": "Google"
},
"searchInformation": {
"searchTime": 0.803357,
"formattedSearchTime": "0.80",
"totalResults": "281000000",
"formattedTotalResults": "281,000,000"
},
"items": [
{
"kind": "customsearch#result",
"title": "Tesla: Electric Cars, Solar & Clean Energy",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e: Electric Cars, Solar & Clean Energy",
"link": "https://www.tesla.com/",
"displayLink": "www.tesla.com",
"snippet": "Tesla is accelerating the world's transition to sustainable energy with electric cars\n, solar and integrated renewable energy solutions for homes and businesses.",
"htmlSnippet": "\u003cb\u003eTesla\u003c/b\u003e is accelerating the world's transition to sustainable energy with electric cars\u003cbr\u003e\n, solar and integrated renewable energy solutions for homes and businesses.",
"cacheId": "rHYp-0etoiEJ",
"formattedUrl": "https://www.tesla.com/",
"htmlFormattedUrl": "https://www.\u003cb\u003etesla\u003c/b\u003e.com/",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRLwcVTUuHf_VXGFHZNRLAiU19-PuPsuWtM6Gcl5DYeYyD3DrhtMgd688Q",
"width": "311",
"height": "162"
}
],
"metatags": [
{
"msapplication-tilecolor": "#cc0000",
"og:image": "https://www.tesla.com/sites/default/files/drupal8/social/ModelY_Social.jpg",
"twitter:card": "summary_large_image",
"twitter:title": "Electric Cars, Solar & Clean Energy | Tesla",
"og:type": "website",
"theme-color": "#000000",
"og:site_name": "Tesla",
"og:image:url": "https://www.tesla.com/sites/default/files/drupal8/social/ModelY_Social.jpg",
"handheldfriendly": "true",
"twitter:url": "https://www.tesla.com/",
"og:title": "Electric Cars, Solar & Clean Energy | Tesla",
"msapplication-tileimage": "/themes/custom/tesla_frontend/assets/favicons/mstile-144x144.png",
"twitter:creator": "@tesla",
"og:description": "Tesla is accelerating the world's transition to sustainable energy with electric cars, solar and integrated renewable energy solutions for homes and businesses.",
"twitter:image": "https://www.tesla.com/sites/default/files/drupal8/social/ModelY_Social.jpg",
"og:image:secure_url": "https://www.tesla.com/sites/default/files/drupal8/social/ModelY_Social.jpg",
"twitter:site": "@tesla",
"apple-mobile-web-app-status-bar-style": "black",
"viewport": "width=device-width, initial-scale=1.0",
"twitter:description": "Tesla is accelerating the world's transition to sustainable energy with electric cars, solar and integrated renewable energy solutions for homes and businesses.",
"apple-mobile-web-app-capable": "yes",
"mobileoptimized": "width",
"og:url": "https://www.tesla.com/"
}
],
"cse_image": [
{
"src": "https://www.tesla.com/sites/default/files/drupal8/social/ModelY_Social.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Tesla Investor Relations",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e Investor Relations",
"link": "https://ir.tesla.com/",
"displayLink": "ir.tesla.com",
"snippet": "Tesla's mission is to accelerate the world's transition to sustainable energy. \nToday, Tesla builds not only all-electric vehicles but also infinitely scalable clean\n ...",
"htmlSnippet": "\u003cb\u003eTesla's\u003c/b\u003e mission is to accelerate the world's transition to sustainable energy. \u003cbr\u003e\nToday, \u003cb\u003eTesla\u003c/b\u003e builds not only all-electric vehicles but also infinitely scalable clean\u003cbr\u003e\n ...",
"cacheId": "DiUql1nUr6gJ",
"formattedUrl": "https://ir.tesla.com/",
"htmlFormattedUrl": "https://ir.\u003cb\u003etesla\u003c/b\u003e.com/",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRHsX6OvBdeNbFQyiCZAh0HYbbb8K9o6e4DNgBEbJpMTErPMpC2ndkruA",
"width": "433",
"height": "116"
}
],
"metatags": [
{
"og:image": "https://tesla-cdn.thron.com/delivery/public/image/tesla/tesla-cars-social/bvlatuR/std/0x0/tesla-cars-social",
"theme-color": "#000000",
"twitter:card": "summary_large_image",
"twitter:title": "Investor Relations | Tesla Investor Relations",
"og:site_name": "Investor Relations | Tesla Investor Relations",
"og:image:url": "https://tesla-cdn.thron.com/delivery/public/image/tesla/tesla-cars-social/bvlatuR/std/0x0/tesla-cars-social",
"handheldfriendly": "true",
"og:description": "Tesla's mission is to accelerate the world's transition to sustainable energy. Today, Tesla builds not only all-electric vehicles but also infinitely scalable clean energy generation and storage products.",
"twitter:image": "https://tesla-cdn.thron.com/delivery/public/image/tesla/tesla-cars-social/bvlatuR/std/0x0/tesla-cars-social",
"og:image:secure_url": "https://tesla-cdn.thron.com/delivery/public/image/tesla/tesla-cars-social/bvlatuR/std/0x0/tesla-cars-social",
"viewport": "width=device-width, initial-scale=1.0",
"twitter:description": "Tesla's mission is to accelerate the world's transition to sustainable energy. Today, Tesla builds not only all-electric vehicles but also infinitely scalable clean energy generation and storage products.",
"mobileoptimized": "width"
}
],
"cse_image": [
{
"src": "https://tesla-cdn.thron.com/delivery/public/image/tesla/home_hero/S1dbei4/std/0x0/home_hero"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Model 3 | Tesla",
"htmlTitle": "Model 3 | \u003cb\u003eTesla\u003c/b\u003e",
"link": "https://www.tesla.com/model3",
"displayLink": "www.tesla.com",
"snippet": "Model 3 is designed for electric-powered performance, with dual motor AWD, \nquick acceleration, long range and fast charging.",
"htmlSnippet": "Model 3 is designed for electric-powered performance, with dual motor AWD, \u003cbr\u003e\nquick acceleration, long range and fast charging.",
"cacheId": "N4-C0Xr0P-gJ",
"formattedUrl": "https://www.tesla.com/model3",
"htmlFormattedUrl": "https://www.\u003cb\u003etesla\u003c/b\u003e.com/model3",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcREcihpAvS2vbj0GfOAoWAHw26tYBp8bYm_SZd3g1ZlKmhLix9lLlGlJ46E",
"width": "284",
"height": "177"
}
],
"metatags": [
{
"msapplication-tilecolor": "#cc0000",
"og:image": "https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg",
"twitter:card": "summary",
"twitter:title": "Model 3 | Tesla",
"og:image:alt": "Model 3",
"theme-color": "#000000",
"og:site_name": "Tesla",
"og:image:url": "https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg",
"handheldfriendly": "true",
"twitter:url": "https://www.tesla.com/model3",
"og:title": "Model 3 | Tesla",
"msapplication-tileimage": "/themes/custom/tesla_frontend/assets/favicons/mstile-144x144.png",
"twitter:creator": "@Tesla",
"og:description": "Model 3 is designed for electric-powered performance, with dual motor AWD, quick acceleration, long range and fast charging.",
"twitter:image": "https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg",
"og:image:secure_url": "https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg",
"twitter:image:alt": "Model 3",
"apple-mobile-web-app-status-bar-style": "black",
"viewport": "width=device-width, initial-scale=1.0",
"twitter:description": "Model 3 is designed for electric-powered performance, with dual motor AWD, quick acceleration, long range and fast charging.",
"apple-mobile-web-app-capable": "yes",
"mobileoptimized": "width",
"og:url": "https://www.tesla.com/model3"
}
],
"cse_image": [
{
"src": "https://www.tesla.com/sites/default/files/model3-new/social/model-3-hero-social.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Tesla the Band | Official Website | American Made Rock 'n' Roll",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e the Band | Official Website | American Made Rock 'n' Roll",
"link": "https://teslatheband.com/",
"displayLink": "teslatheband.com",
"snippet": "The Official Website of the rock band Tesla, providing recent news, tour dates, \nmusic, history, and other ways for fans to interact.",
"htmlSnippet": "The Official Website of the rock band \u003cb\u003eTesla\u003c/b\u003e, providing recent news, tour dates, \u003cbr\u003e\nmusic, history, and other ways for fans to interact.",
"cacheId": "Pw3S9NsLmboJ",
"formattedUrl": "https://teslatheband.com/",
"htmlFormattedUrl": "https://\u003cb\u003etesla\u003c/b\u003etheband.com/",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQj0Cz3qQotoHoZOO9Jro6e2jrHOWKwrH87bJcUVCT9zc_DyxxFtqt7vzo",
"width": "310",
"height": "163"
}
],
"metatags": [
{
"og:image": "https://teslatheband.com/wp-content/uploads/2018/03/cropped-home-hero-1.jpg",
"og:image:width": "3840",
"og:type": "website",
"twitter:card": "summary_large_image",
"twitter:title": "Tesla the Band | Official Website | American Made Rock 'n' Roll",
"og:site_name": "TESLA BAND | Official Website",
"og:title": "Tesla the Band | Official Website | American Made Rock 'n' Roll",
"og:image:height": "2016",
"twitter:image:height": "2016",
"msapplication-tileimage": "/wp-content/uploads/2018/04/cropped-tesla-logo-1-270x270.png",
"og:description": "The Official Website of the rock band Tesla, providing recent news, tour dates, music, history, and other ways for fans to interact.",
"twitter:image": "https://teslatheband.com/wp-content/uploads/2018/03/cropped-home-hero-1.jpg",
"twitter:image:width": "3840",
"viewport": "width=device-width, initial-scale=1, shrink-to-fit=no",
"twitter:description": "The Official Website of the rock band Tesla, providing recent news, tour dates, music, history, and other ways for fans to interact.",
"og:locale": "en_US",
"og:url": "https://teslatheband.com/"
}
],
"cse_image": [
{
"src": "https://teslatheband.com/wp-content/uploads/2018/03/cropped-home-hero-1.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Model S | Tesla",
"htmlTitle": "Model S | \u003cb\u003eTesla\u003c/b\u003e",
"link": "https://www.tesla.com/models",
"displayLink": "www.tesla.com",
"snippet": "Tesla's all-electric powertrain delivers unparalleled performance in all weather \nconditions – with Dual Motor All-Wheel Drive, adaptive air suspension and ...",
"htmlSnippet": "\u003cb\u003eTesla's\u003c/b\u003e all-electric powertrain delivers unparalleled performance in all weather \u003cbr\u003e\nconditions – with Dual Motor All-Wheel Drive, adaptive air suspension and ...",
"cacheId": "Ei43u66-EP0J",
"formattedUrl": "https://www.tesla.com/models",
"htmlFormattedUrl": "https://www.\u003cb\u003etesla\u003c/b\u003e.com/models",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTT2Nd2NXY5NKgGlWHbNFy9_6h7tgjuyP5ToVx9rZY4ocFnOz5TgAP9MP4v",
"width": "284",
"height": "177"
}
],
"metatags": [
{
"msapplication-tilecolor": "#cc0000",
"og:image": "https://www.tesla.com/sites/default/files/modelsx-new/social/model-s-hero-social.jpg",
"twitter:card": "summary_large_image",
"twitter:title": "Model S | Tesla",
"theme-color": "#000000",
"og:site_name": "Tesla",
"og:image:url": "https://www.tesla.com/sites/default/files/modelsx-new/social/model-s-hero-social.jpg",
"handheldfriendly": "true",
"twitter:url": "https://www.tesla.com/models",
"og:title": "Model S",
"msapplication-tileimage": "/themes/custom/tesla_frontend/assets/favicons/mstile-144x144.png",
"twitter:creator": "@tesla",
"og:description": "Model S is built for speed and endurance, with ludicrous acceleration, unparalleled performance and a sleek aesthetic.",
"twitter:image": "https://www.tesla.com/sites/default/files/modelsx-new/social/model-s-hero-social.jpg",
"og:image:secure_url": "https://www.tesla.com/sites/default/files/modelsx-new/social/model-s-hero-social.jpg",
"twitter:site": "@tesla",
"apple-mobile-web-app-status-bar-style": "black",
"viewport": "width=device-width, initial-scale=1.0",
"twitter:description": "Model S is built for speed and endurance, with ludicrous acceleration, unparalleled performance and a sleek aesthetic.",
"apple-mobile-web-app-capable": "yes",
"mobileoptimized": "width",
"og:url": "https://www.tesla.com/models"
}
],
"cse_image": [
{
"src": "https://www.tesla.com/sites/default/files/modelsx-new/social/model-s-hero-social.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Tesla - Official Trailer I HD I IFC Films - YouTube",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e - Official Trailer I HD I IFC Films - YouTube",
"link": "https://www.youtube.com/watch?v=e4U-23TOKms",
"displayLink": "www.youtube.com",
"snippet": "Jul 10, 2020 ... The film tracks Tesla's uneasy interactions with his fellow inventor Thomas \nEdison (Kyle MacLachlan) and his patron George Westinghouse ...",
"htmlSnippet": "Jul 10, 2020 \u003cb\u003e...\u003c/b\u003e The film tracks \u003cb\u003eTesla's\u003c/b\u003e uneasy interactions with his fellow inventor Thomas \u003cbr\u003e\nEdison (Kyle MacLachlan) and his patron George Westinghouse ...",
"formattedUrl": "https://www.youtube.com/watch?v=e4U-23TOKms",
"htmlFormattedUrl": "https://www.youtube.com/watch?v=e4U-23TOKms",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWCJMSvBsld14E5aRdJfaFa1y6f3fRSZFi6HWeKmycmfymJeB5fh-qNXqi",
"width": "300",
"height": "168"
}
],
"imageobject": [
{
"width": "1280",
"url": "https://i.ytimg.com/vi/e4U-23TOKms/maxresdefault.jpg",
"height": "720"
}
],
"person": [
{
"name": "IFC Films",
"url": "http://www.youtube.com/user/IFCFilmsTube"
}
],
"metatags": [
{
"og:image": "https://i.ytimg.com/vi/e4U-23TOKms/maxresdefault.jpg",
"og:image:width": "1280",
"og:type": "video.other",
"og:site_name": "YouTube",
"al:ios:app_name": "YouTube",
"og:title": "Tesla - Official Trailer I HD I IFC Films",
"og:image:height": "720",
"al:android:package": "com.google.android.youtube",
"title": "Tesla - Official Trailer I HD I IFC Films",
"al:ios:url": "vnd.youtube://www.youtube.com/watch?v=e4U-23TOKms&feature=applinks",
"al:web:url": "https://www.youtube.com/watch?v=e4U-23TOKms&feature=applinks",
"og:video:secure_url": "https://www.youtube.com/embed/e4U-23TOKms",
"og:video:tag": "Tesla",
"og:description": "Opening in theaters and VOD August 21 Directed by: Michael Almereyda Starring: Ethan Hawke, Eve Hewson, Hannah Gross & Kyle MacLachlan Brilliant, visionary N...",
"og:video:width": "1280",
"al:ios:app_store_id": "544007664",
"al:android:url": "vnd.youtube://www.youtube.com/watch?v=e4U-23TOKms&feature=applinks",
"og:video:type": "text/html",
"og:video:height": "720",
"og:video:url": "https://www.youtube.com/embed/e4U-23TOKms",
"og:url": "https://www.youtube.com/watch?v=e4U-23TOKms",
"al:android:app_name": "YouTube"
}
],
"videoobject": [
{
"embedurl": "https://www.youtube.com/embed/e4U-23TOKms",
"playertype": "HTML5 Flash",
"isfamilyfriendly": "True",
"uploaddate": "2020-07-10",
"description": "Opening in theaters and VOD August 21 Directed by: Michael Almereyda Starring: Ethan Hawke, Eve Hewson, Hannah Gross & Kyle MacLachlan Brilliant, visionary N...",
"videoid": "e4U-23TOKms",
"url": "https://www.youtube.com/watch?v=e4U-23TOKms",
"duration": "PT2M33S",
"unlisted": "False",
"name": "Tesla - Official Trailer I HD I IFC Films",
"paid": "False",
"width": "1280",
"regionsallowed": "AD,AE,AF,AG,AI,AL,AM,AO,AQ,AR,AS,AT,AU,AW,AX,AZ,BA,BB,BD,BE,BF,BG,BH,BI,BJ,BL,BM,BN,BO,BQ,BR,BS,BT,BV,BW,BY,BZ,CA,CC,CD,CF,CG,CH,CI,CK,CL,CM,CN,CO,CR,CU,CV,CW,CX,CY,CZ,DE,DJ,DK,DM,DO,DZ,EC,EE,EG,EH...",
"genre": "Film & Animation",
"interactioncount": "675513",
"channelid": "UCOn923UnbV8H9zo_lO6ZCRw",
"datepublished": "2020-07-10",
"thumbnailurl": "https://i.ytimg.com/vi/e4U-23TOKms/maxresdefault.jpg",
"height": "720"
}
],
"cse_image": [
{
"src": "https://i.ytimg.com/vi/e4U-23TOKms/maxresdefault.jpg"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Tesla, Inc. - Wikipedia",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e, Inc. - Wikipedia",
"link": "https://en.wikipedia.org/wiki/Tesla,_Inc.",
"displayLink": "en.wikipedia.org",
"snippet": "Tesla, Inc. (formerly Tesla Motors, Inc.) is an American electric vehicle and clean \nenergy company based in Palo Alto, California. Tesla's current products include ...",
"htmlSnippet": "\u003cb\u003eTesla\u003c/b\u003e, Inc. (formerly \u003cb\u003eTesla\u003c/b\u003e Motors, Inc.) is an American electric vehicle and clean \u003cbr\u003e\nenergy company based in Palo Alto, California. \u003cb\u003eTesla's\u003c/b\u003e current products include ...",
"formattedUrl": "https://en.wikipedia.org/wiki/Tesla,_Inc.",
"htmlFormattedUrl": "https://en.wikipedia.org/wiki/\u003cb\u003eTesla\u003c/b\u003e,_Inc.",
"pagemap": {
"hcard": [
{
"url_text": "www.tesla.com",
"bday": "2003-07-01",
"fn": "Tesla, Inc.",
"nickname": "Tesla Motors, Inc. (2003–2017)",
"logo": "Tesla's headquarters in Palo Alto",
"category": "Public",
"url": "www.tesla.com"
}
],
"cse_thumbnail": [
{
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwtQ4SIVjsbrM1rg23xZvICpXrQqApgHnt2ZmM27jPhRfXhEEG7GSEacU",
"width": "198",
"height": "255"
}
],
"metatags": [
{
"referrer": "origin",
"og:image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png"
}
],
"cse_image": [
{
"src": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png"
}
]
}
},
{
"kind": "customsearch#result",
"title": "TSLA: Tesla Inc - Stock Price, Quote and News - CNBC",
"htmlTitle": "TSLA: \u003cb\u003eTesla\u003c/b\u003e Inc - Stock Price, Quote and News - CNBC",
"link": "https://www.cnbc.com/quotes/?symbol=TSLA",
"displayLink": "www.cnbc.com",
"snippet": "Tesla Inc. TSLA:NASDAQ. Real Time Quote | Last NASDAQ LS, VOL From CTA | \nUSD. Extended Hours. Last Yield | 4:03:54 PM EDT. 444.14 %. +1.99 (+0.45%) ...",
"htmlSnippet": "\u003cb\u003eTesla\u003c/b\u003e Inc. TSLA:NASDAQ. Real Time Quote | Last NASDAQ LS, VOL From CTA | \u003cbr\u003e\nUSD. Extended Hours. Last Yield | 4:03:54 PM EDT. 444.14 %. +1.99 (+0.45%) ...",
"cacheId": "RFrqVtHRbacJ",
"formattedUrl": "https://www.cnbc.com/quotes/?symbol=TSLA",
"htmlFormattedUrl": "https://www.cnbc.com/quotes/?symbol=TSLA",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeZNwGjuwj2R8mk-B_fNrrBEAZqzp1fStevzprMkycFjuNE2mZrtOIenaR",
"width": "310",
"height": "163"
}
],
"metatags": [
{
"og:image": "https://sc.cnbcfm.com/applications/cnbc.com/staticcontent/img/cnbc_logo.gif",
"apple-itunes-app": "app-id=398018310",
"twitter:card": "summary_large_image",
"og:site_name": "CNBC",
"twitter:url": "https://www.cnbc.com/quotes/",
"tp:preferredformats": "M3U,MPEG4",
"og:description": "TSLA:NASDAQ: Get Tesla Inc real-time stock quotes, news and financial information from CNBC.",
"twitter:creator": "@CNBC",
"parsely-metadata": "{\"nodeid\": \"101\",\"originalImage\": \"https://sc.cnbcfm.com/applications/cnbc.com/resources/img/editorial/2015/03/30/102546467-Most-Popular--Image-Placeholder-Large.jpg\"}",
"twitter:image": "https://sc.cnbcfm.com/applications/cnbc.com/staticcontent/img/cnbc_logo.gif",
"article:publisher": "https://www.facebook.com/CNBC",
"al:ios:app_store_id": "398018310",
"pagenodeid": "101",
"twitter:site": "@CNBC",
"tp:preferredruntimes": "universal",
"tp:initialize": "false",
"assettype": "franchise",
"og:type": "website",
"twitter:title": "Detailed Quote",
"al:ios:app_name": "CNBC Business News and Finance",
"author": "CNBC",
"og:title": "TSLA:449.39 7.24 (1.64%) - Stock Price, Quote and News - CNBC",
"article:author": "https://www.facebook.com/CNBC",
"referrer": "unsafe-url",
"viewport": "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,shrink-to-fit=no",
"og:url": "https://www.cnbc.com/quotes/?symbol=TSLA"
}
],
"webpage": [
{
"image": "https://sc.cnbcfm.com/applications/cnbc.com/staticcontent/img/cnbc_logo.gif",
"isfamilyfriendly": "true",
"keywords": "TSLA quote, Tesla Inc, STOCK markets, CNBC",
"inlanguage": "en-US",
"lastreviewed": "2017-11-13T14:04:56-0500",
"sourceorganization": "CNBC",
"description": "TSLA:NASDAQ: Get Tesla Inc real-time stock quotes, news and financial information from CNBC.",
"datecreated": "2016-08-23T11:54:02-0400",
"url": "https://www.cnbc.com/quotes/?symbol=TSLA",
"contentrating": "NR",
"datemodified": "2017-11-13T14:04:56-0500",
"maincontentofpage": "+ WATCHLIST Tesla Inc TSLA:NASDAQ Real Time Quote | Last NASDAQ LS, VOL From CTA | USD Extended Hours Last Yield | 4:03:54 PM EDT 444.14 % +1.99 (+0.45%) Change Last Yield Close | 4:00:00 PM...",
"name": "TSLA: Tesla Inc - Stock Price, Quote and News - CNBC"
}
],
"cse_image": [
{
"src": "https://sc.cnbcfm.com/applications/cnbc.com/staticcontent/img/cnbc_logo.gif"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Nikola Tesla - Wikipedia",
"htmlTitle": "Nikola \u003cb\u003eTesla\u003c/b\u003e - Wikipedia",
"link": "https://en.wikipedia.org/wiki/Nikola_Tesla",
"displayLink": "en.wikipedia.org",
"snippet": "Nikola Tesla was a Serbian-American inventor, electrical engineer, mechanical \nengineer, and futurist best known for his contributions to the design of the ...",
"htmlSnippet": "Nikola \u003cb\u003eTesla\u003c/b\u003e was a Serbian-American inventor, electrical engineer, mechanical \u003cbr\u003e\nengineer, and futurist best known for his contributions to the design of the ...",
"cacheId": "ffC4b7aiemYJ",
"formattedUrl": "https://en.wikipedia.org/wiki/Nikola_Tesla",
"htmlFormattedUrl": "https://en.wikipedia.org/wiki/Nikola_\u003cb\u003eTesla\u003c/b\u003e",
"pagemap": {
"hcard": [
{
"note": "Projects Alternating current high-voltage, high-frequency power experiments",
"bday": "1856-07-10",
"fn": "Nikola Tesla",
"nickname": "Никола Тесла",
"label": "Nikola Tesla Museum Belgrade, Serbia",
"category": "Austrian (1856–1891) American (1891–1943)"
}
],
"cse_thumbnail": [
{
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQWCFn1zDwTQIBRF9VDd9IfsyYKVtv2UGWDYFby88mPDxjm7AZ3P5uZLbk",
"width": "196",
"height": "257"
}
],
"metatags": [
{
"referrer": "origin",
"og:image": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/N.Tesla.JPG/1200px-N.Tesla.JPG"
}
],
"cse_image": [
{
"src": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/N.Tesla.JPG/1200px-N.Tesla.JPG"
}
]
}
},
{
"kind": "customsearch#result",
"title": "Tesla Short Shorts",
"htmlTitle": "\u003cb\u003eTesla\u003c/b\u003e Short Shorts",
"link": "https://shop.tesla.com/product/tesla-short-shorts",
"displayLink": "shop.tesla.com",
"snippet": "Celebrate summer with Tesla Short Shorts. Run like the wind or entertain like \nLiberace with our red satin and gold trim design. Relax poolside or lounge \nindoors ...",
"htmlSnippet": "Celebrate summer with \u003cb\u003eTesla\u003c/b\u003e Short Shorts. Run like the wind or entertain like \u003cbr\u003e\nLiberace with our red satin and gold trim design. Relax poolside or lounge \u003cbr\u003e\nindoors ...",
"cacheId": "W2vM-vU5b2YJ",
"formattedUrl": "https://shop.tesla.com/product/tesla-short-shorts",
"htmlFormattedUrl": "https://shop.\u003cb\u003etesla\u003c/b\u003e.com/product/\u003cb\u003etesla\u003c/b\u003e-short-shorts",
"pagemap": {
"cse_thumbnail": [
{
"src": "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTvmVpoKKexKNQ0ozCuGWzwL3JAXlEqtftGrmlmuBfuS2B9GZuDnThG3Yk",
"width": "224",
"height": "225"
}
],
"metatags": [
{
"msapplication-tilecolor": "#cc0000",
"og:image": "https://www.tesla.com/ns_videos/commerce/content/dam/tesla/LIFESTYLE/ACTIVEWEAR/shorts/8529140-00-A_0.jpg",
"og:type": "product",
"twitter:card": "summary_large_image",
"twitter:title": "Tesla Short Shorts",
"twitter:site:id": "13298072",
"og:title": "Tesla Short Shorts",
"msapplication-tileimage": "/images/icons/mstile-144x144.png?2",
"og:description": "Celebrate summer with Tesla Short Shorts. Run like the wind or entertain like Liberace with our red satin and gold trim design. Relax poolside or lounge indoors year-round with our limited-edition Tesla Short Shorts, featuring our signature Tesla logo in front with “S3XY” across the back. Enjoy exceptional comfort from the closing bell. See Size Chart for sizing and fit guidelines.",
"twitter:creator": "@teslamotors",
"twitter:image": "https://www.tesla.com/ns_videos/commerce/content/dam/tesla/LIFESTYLE/ACTIVEWEAR/shorts/8529140-00-A_0.jpg",
"twitter:site": "@teslamotors",
"twitter:creator:id": "13298072",
"viewport": "width=device-width, initial-scale=1",
"twitter:description": "Celebrate summer with Tesla Short Shorts. Run like the wind or entertain like Liberace with our red satin and gold trim design. Relax poolside or lounge indoors year-round with our limited-edition Tesla Short Shorts, featuring our signature Tesla logo in front with “S3XY” across the back. Enjoy exceptional comfort from the closing bell. See Size Chart for sizing and fit guidelines."
}
],
"cse_image": [
{
"src": "https://www.tesla.com/ns_videos/commerce/content/dam/tesla/LIFESTYLE/ACTIVEWEAR/shorts/8529140-00-A_0.jpg"
}
]
}
}
]
}
I am build this app with ReactJs and Use API Google for search content.
pemangilan:
import { actionTypes } from "../reducer";
pengunaan untuk actionTypes pemberi izin dan mengelola data akses di reducer dan akan dikirm ke StateProvider.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.