In this project, you'll build an image gallery using React and the Flickr API. After creating the project with create-react-app, you will build the gallery components, add to the supplied CSS and set up routing. For this project, you'll use the very popular and in-demand React library to create an image gallery app. With the help of this powerful "MVC" (Model, View, Controller) library, the app will be built in the style of modern single page applications to keep it fast, modular, and in sync with current web development trends. You'll learn about some of the best practices of working with React, like using JSX to write markup-like syntax directly in your JS files and managing state in a container component that passes data down to reusable stateless components. Additionally, you'll get practice working with React supportive tools like the Create React App and React Router modules. Using the powerful Create React App tool, you'll set up the initial project. Then you will: Use JavaScript and JSX to build out the gallery components in a modular fashion. Use React Router to set up routes for three default topic pages and a search page. Use the Fetch API or a tool like Axios to fetch data from the Flickr API and use it to display images in your app. Add logic to handle the search and various requirements of the project. Add to the supplied CSS to personalize the project. React has a bit of a learning curve and can feel difficult to work with at first, but with hard work, time and practice, it can be mastered by anyone. After building this project, you'll be able to start using React in all of your projects to demonstrate your skills with the powerful library to potential employers, which will make you a hot commodity in today's web development world. So really take your time, do a great job, and give this one your all.
JavaScriptMIT
node -v and npm -v to check if they are installed on your systemnode and npm are available create a config file with your FlickrAPI key in src/App/config.js:
export default "yourFlickrAPIkey";git clone and cd into itnpm install or yarnnpm start to start development environment ( browser opens automatically )