You’ll go beyond simple React and learn how to integrate your apps with other prominent technologies like Firebase and Redux.īy the end of this, you’ll have mastered React for professional use and have completed numerous practice projects for your resume.Time flies in a jiffy when you keep scrolling through the never-ending reels and stories on Instagram, and to say it’s a bit of an addiction can be an understatement. This all-in-one learning material collection will teach you the fundamental skills front-end dev recruiters are looking for. To help you continue your hands-on React learning, Educative has created the React for Front-End Developers Path. If you get stuck, try uploading your project on Github for feedback from other developers! The React community is very active and will help you find your next steps. Here are some more functionalities you can add next to improve your developer skills:īack-end fetch integration with Graph QL or FirebaseĬreate tabs and account pages that pull previous postsĪdd an Instagram Messenger feature with emoji support While the page will look the same at localhost:3000, you now have an interesting app UI that can load unique posts!Ĭongratulations on finishing your Instagram UI! While not app store ready yet, this is a great starting point for a longer project for your professional portfolio. Import Header from './components/Header'
#INSTAFEED FOR REACT CODE#
Simply replace the code in your src/App.js file with the following code: We’re now ready to render our component and see how it looks.
#INSTAFEED FOR REACT UPDATE#
With the appropriate styling made, update your index.js file to reference the style sheet. You’ll need to include the URL for the logo in the src directory using this format: () webkit-transition: height 0.2s ease-in-out īackground-image imports an image from a URL. Open your CSS style sheet and paste the following:īorder-bottom: 1px solid rgba(0, 0, 0, 0.0975) To make it visually appealing, we’ll have to create a CSS style sheet in our Header component directory. This code creates the outline of all the content we’ll have in the component but does not include any styling. Now open the index.js file and paste the following code: We’ll then create and select a folder for the Header component within components using: mkdir Header & cd Headerįrom here, we’ll create our index.js file that lets us describe the content of the component using JSX, a JavaScript-enhanced version of HTML. The following command selects the src/ directory, creates a new folder within, and selects that new components folder: cd src We need to make the components folder in the src/ directory of our application to hold our Header component. We’ll start by creating and styling the Header component. Finish React UIs are made up of multiple of these web components that you can individually customize and reused in other pages or projects. We’ll use React Web Components to construct the app header, which will contain the Instagram logo and brand name, and the post component, which will contain the posted image, the username, and a caption.Īs a refresher, React has a library of pre-built components that include the basic structure for common app behaviors like headers or search bars. Now we can start customizing the template to look like the Instagram UI.
0 kommentar(er)
