![]() ![]() In this hello world React code example the ReactDOM.render() (i.e. # Example 1: Simple "Hello, World" code Add the following "Hello, World" sample React script to your index.jsx file:.Create a new file called index.jsx: /themes/react_example_theme/js/src/index.jsx.Create a js/src/ directory in your theme for your JavaScript if you haven't already, e.g.To test that everything is working we can create a "Hello, World" React component. We'll add some customizations in a moment. Initially, things won't look any different as all we've done is create a sub-theme of Bartik. Then press the Install and set as default link for the React Example Theme theme. You could also opt to do these same steps in an existing theme, or as part of a custom module.Įnable the theme by navigating to Appearance ( admin/appearance) in Manage administration menu. Setup a new themeįor this example we'll create a new theme and add our JavaScript to the theme. ![]() This will allow you to include 3rd-party packages from npm, scale your application to many files and components, enable live editing in development mode, and help optimize things for speed and compatibility. We think that in most cases you'll want to set up a build toolchain for your React (and other JavaScript). Our example code demonstrates how to do it if you really want to know. However, we couldn't come up with any real-world scenarios in which you would do this to add React to a Drupal module or theme. It's possible to add the React library via a plain tag in your HTML, like you might have included jQuery in the past.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |