{"id":721,"date":"2024-01-29T09:15:00","date_gmt":"2024-01-29T09:15:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=721"},"modified":"2024-02-05T11:02:14","modified_gmt":"2024-02-05T11:02:14","slug":"import-in-react-js","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/import-in-react-js\/","title":{"rendered":"Import in React.js"},"content":{"rendered":"\n<p>In React.js, the <code>import<\/code> statement is used to bring functionalities from other modules into the current module. It&#8217;s a key part of modular JavaScript development and allows you to organize your code into separate files and reuse functionalities across different parts of your application.<\/p>\n\n\n\n<p>There are several ways to use <code>import<\/code> in React.js:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Default Imports:<\/strong><br>You can import the default export from a module using the <code>import<\/code> keyword followed by the name you want to assign to the default export. Example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   import MyComponent from '.\/MyComponent';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li><strong>Named Imports:<\/strong><br>You can import specific named exports from a module using the <code>{}<\/code> syntax. Example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   import { MyComponent1, MyComponent2 } from '.\/MyComponent';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li><strong>Combining Default and Named Imports:<\/strong><br>You can also import both default and named exports from the same module. Example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   import MyDefaultComponent, { MyComponent1, MyComponent2 } from '.\/MyComponent';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li><strong>Importing All Named Exports as an Object:<\/strong><br>You can import all named exports from a module as properties of an object using the <code>* as<\/code> syntax. Example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   import * as MyComponents from '.\/MyComponent';<\/code><\/pre>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\">\n<li><strong>Importing Stylesheets:<\/strong><br>You can import CSS or SCSS stylesheets into your components using the <code>import<\/code> statement. This allows you to apply styles defined in external stylesheets to your React components. Example:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   import '.\/styles.css';<\/code><\/pre>\n\n\n\n<p>These are some of the common ways you can use the <code>import<\/code> statement in React.js to bring in functionalities, components, or stylesheets from other modules into your application. It&#8217;s an essential part of building modular, reusable, and maintainable React applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React.js, the import statement is used to bring functionalities from other modules into the current module. It&#8217;s a key<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-721","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"predecessor-version":[{"id":722,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/721\/revisions\/722"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}