![]() In your main app folder, create a file called. To get your API key, click on your username in the top right corner, and then on "my API keys".Ĭreate an API key if it doesn't already exist. You also need an API key to call these APIs. These are API endpoints that you'll need to fetch the data. You'll see different options like Current Weather Data, Hourly 4 hour forecasts, 16 day forecasts, and others. To make our weather application work, we need OpenWeatherMap, a third-party API that'll let us fetch the weather data.Īfter you are done, click on the API option on the Navigation bar. Here, you can see all the packages you have so far. You can check your package.json file to keep track of all the installed packages. Install it using the following command: npm install moment -save We also need moment.js to format our time. Just copy and paste the following command in your index.js file: import 'semantic-ui-css/' Once it has been installed, open index.js and import the library. To install it, type the following command in the terminal: npm install semantic-ui-react semantic-ui-css To make this application more attractive, we need some external packages. App.js after cleanup How to Install the Packages We Need ![]() You will receive a blank screen on the output once you have done that. In your app.js file, clear everything inside the div tag. You'll see the default React template, like this: The default React Boilerplate Template App.js Once the packages are done, go into the project folder and type npm start. You'll see that the packages are being installed. To create our react application, type npx create-react-app in your terminal, or npx create-react-app my-weather-app in this case. This checks which version of Node you have. Once both of them are finished, open your terminal or command prompt and type node -v. Fortunately it comes with Node, so you don't need to download it separately. ![]() ![]() You can use it to install packages for your JavaScript apps. You'll also need npm, which is a package manager built on Node. It is mainly used to execute JavaScript code. To build our React application, we need a run-time environment called Node. Let's learn more about how all this works by building a weather application using React. One of the best things about React is that the components we create are encapsulated. React is a super-awesome front-end library that you can use to build user interfaces. ![]()
0 Comments
Leave a Reply. |