独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Google Clone using ReactJS with Styled Components

In this project we are going to create a google clone using ReactJS. Here, we will be using Styled components to style the project. We will also be using Context API, to transfer data between two pages.

First we will create a new project for the google clone from the terminal, using create-react-app.

As with any other React project, we will remove some of the boiler-plate code files.

After that we will make our index.js much more cleaner as below.

We will remove everything from App.css file and make all margin to 0.

Now, remove the boiler plate code from App.js file and add a test file. Also, starting the react app with npm start will show, it on localhost:3000.

We are going to use Material UI version 4 in our project. So, we need to install the mentioned package in our project.

We also need to install material ui icons in our project. We are installing both through the integrated terminal.

Also, we have created a structure in our project. Here, inside a components folder, we have created a Home.js file.

In the Home.js file, we have put the below code.

Now, we will show the Home component from App.js file.

Back to Home.js file, we will show two icons from material ui and also an image.

Now, in localhost we will see everything without styles.

We are going to use Styled components in our project. So, we need to first install it using below command.

Next, in the Home.js file, we will put the styles with the styled component.

Now, we have replaced all of the divs with respective styled components in Home.js file. Notice that we have also added a Search component in our file.

Now, our localhost will be more styled.

Now, in the Search.js file we have done the initial imports. After that we have added styles for SearchInput.

We will also add styles for SearchButton in our Search.js file.

Finally inside the Search component in our Search.js file, we will use the styled components, along with material ui icons.

Now, our localhost is looking perfect and as Google home page.

Next, we will install React Router version 5 in our project. We have also created two routes in App.js file. One for Home and other for Search results.

Now, we will create a new SearchPage.js file and add the below code in it. Here, we are also calling the Search component with a hide prop.

Back in the Search.js file, we are getting the new props and also updated the code to show the button, only if the props are not passed.

Back in SearchPage.js file we will add material ui icons imports.

After calling the Search component in SearchPage.js file, we have added code to show different options.

We need to remove margin-top styles in Search.js file, to fix issues.

Now, in the Home.js file we will add a margin-bottom for images.

Now, in SearchPage.js file we will start adding styled components. Here, added styles for SearchPageHeader and SearchPageOptions.

Next, we will add some more styles for Options and SearchPageOption in SearchPage.js file.

Now, we will change all the divs to Styled components in SearchPage.js file.

Now, our search component is showing perfectly in localhost.

We will create new styled components in SearchPage.js file. These are to show the results.

Now, we will add the styles for the same in SearchPage.js file.

Now, our static content will be shown perfectly in localhost.

In the Search.js file we will use useHistory() from react router dom. Here, we have also added an onSumit handler calling the function search.

Inside the function search(), we are console logging the input. After that we are going to the SearchPage component.

Now, we will search anything in the home page and click on the Google Search button.

After that we will go to the /search route and also the console log will be shown.

We are going to use Context API in our project to easily move data from one component to another.

So, create a types.js file in the src folder and add the below content in it.

Next, we will create a reducer.js in the src folder and add the below content in it. Here, we are importing the tpes and after that we have a initialState and inside the reducer we are updaing the term.

Now, we need to create a SearchProvider.js file inside the src folder. Here, we have to use the createContext and use the Provider.

Here, we are using the useReducer hook and also exporting the useStateValue containing the context.

Now, in the index.js file we will wrap the App componen with SearchProvider and will pass the initialState and reducer.

Now, we will dispatch the tpe and input from Search.js file from the search function.

Now, in SearchPage.js file we wil be able to get the term using useStateValue().

Now, again when we search something, we will get it from SearchPage.js file.

It will open a pop-up like below.

Select any project and then click on NEXT button.

It will reveal the API Keys, which we need to note down.

Now, we need to give the search engine, the website. After that verify the credentials and click on Create button.

Now, we will get the Search engine ID. We also need to check the Search the entire web selected.

Now, create an .env file in the root directory and put the API Key and Search engine id in it.

Now, we will use this hook in our SearchPage.js file. We are just console logging the data now.

Now, on searching anything in localhost, we will get data back from google.

Now, we will update the hard-coded data with variables from the API call in SearchPage.js file.

Now, we will get the perfect result in localhost.

Add a comment

What is your view?

Send

Related posts:

PCA and LASSO Regression on ETF Data

Our goal in this exercise is to apply the Principal Component Analysis (PCA) model to identify the amount of variation shown by the components of the dataset, as well as running a Regression against…

Bible Signs Announcing the End of the World! The apocalypse will come in the most unexpected way possible

Christians around the world know that there are certain prophecies in the Bible that foretell the Apocalypse! What are the signs of the end of the world? Some believers believe that the Apocalypse is…

Why Avoiding White Lies Will Save You Pain and Give You Freedom

It was a shock. At first, I said I didn’t do it. My parents were not like the rest of the Turkish parents; they weren’t overly strict or controlling. I had no reason to lie to them. But then I…