It also attaches onClick events to display emoji data in the browser. This code uses JSX syntax to map() over the emojis array and list them as list items. Tutorial-03-component/src/App.js import React from 'react' Ĭonst displayEmojiName = event => alert() Next, take out the template code created by Create React App, then replace the contents with new React code that displays a list of emojis: Once this is finished, change into the project directory: npx create-react-app tutorial-03-component.
Open a terminal, then run the following command: You will also modify the default project to create your base project by mapping over a list of emojis and adding a small amount of styling.įirst, create a new project. In this step, you’ll create a base for your project using Create React App. A good resource for HTML and CSS is the Mozilla Developer Network. You will also need a basic knowledge of JavaScript, which you can find in How To Code in JavaScript, along with a basic knowledge of HTML and CSS. You will be using JSX syntax, which you can learn about in our How To Create Elements with JSX tutorial. You can find instructions for installing an application with Create React App at How To Set Up a React Project with Create React App. You will need to be able to create apps with Create React App. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04. You will need a development environment running Node.js this tutorial was tested on Node.js version 10.20.1 and npm version 6.14.4. By the end of this tutorial, you’ll have made custom components using both JavaScript classes and JavaScript functions, and you’ll understand how to separate existing code into reusable pieces and how to store the components in a readable file structure. The emojis will be built using a custom component and will be called from inside another custom component. In this tutorial, you’ll create a list of emojis that will display their names on click. Components can also contain state information and display markdown.Īfter learning how to create components in React, you’ll be able to split complex applications into small pieces that are easier to build and maintain. Buttons, menus, and any other front-end page content can all be created as components. Often, they can be simple JavaScript functions and classes, but you use them as if they were customized HTML elements. Components are independent pieces of functionality that you can reuse in your application, and are the building blocks of all React applications. In this tutorial, you’ll learn to create custom components in React. The author selected Creative Commons to receive a donation as part of the Write for DOnations program.
0 kommentar(er)
