This content originally appeared on DEV Community and was authored by Devendra Sri
Initiatives & Projects. They are adored by all. Especially those that help us solidify the fundamentals and learn something new. Dogecoin has been trending over the last week, so why not create something related to it?
In this project, we will create a simple Dogecoin price ticker, which will be a web app that will fetch the lowest price of the day, the highest price of the day, and the most recently traded price via an API and will be updated every 10 seconds. You will learn how to set up a React project, build components, props, state, and the most commonly used React hooks such as l24 and h24.
Ticker API:
https://api.buyucoin.com/ticker/v1.0/liveData?symbol=USDT-BTC
Developing a React Project
The first step is to create a React project for ourselves. We'll use Create React App for this, which will allow us to focus on our code rather than worrying about setting up the build tools. You'll need NodeJS v8.10 or higher, as well as NPM version 5.6 or higher.
Open your terminal and type the following command in the directory of your choice:
npx is a package runner included with npm. The preceding command may take 5-10 minutes to complete, so grab a cup of coffee and unwind!
Let's move on to the project directory now. You could use the file explorer or the following terminal command to accomplish this: dogecoin ticker cd Now, open the project folder in your preferred text editor, and we'll begin with the initial setup in the following section. Run npm start in the project folder on your terminal to start the development server.
Initial Configuration
After we start our development server with npm start, navigate to localhost:3000 in your browser and you'll see something like this.
This is the default homepage generated by Create React App. Since we don't require anything similar, let's begin by deleting unnecessary files and configuring the project to meet our needs.
Our index.html file, which will be rendered by our browser, is located in the public folder. Open it up and begin by removing any unwanted comments and changing the webpage's title. You can also change the description meta tag and add your own. When you're finished, your index.html.
You can also changed the favicon and logo images, which you can download here, to add a more personal touch to our website.
Let's go to the src folder now. Most of the files here, such as App.test.js, logo.svg, reportWebVitals.js, and setupTests.js, can be removed. You may have noticed that when you save, our development server throws an error indicating that it failed to compile. We need to fix the imports as well because we deleted the above files. Check out this commit to see the details of the additions and deletions.
We replaced all of the existing content generated by Create React App with a div containing a h1 with the text 'Dogecoin Ticker.' I've also changed the function to an arrow function, but this isn't required. This function returns some JSX that React renders. It is referred to as a component because it can be used in multiple places throughout our project.
This content originally appeared on DEV Community and was authored by Devendra Sri
Devendra Sri | Sciencx (2021-06-05T10:15:01+00:00) Create Your Dogecoin Market Ticker in React. Retrieved from https://www.scien.cx/2021/06/05/create-your-dogecoin-market-ticker-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.