Hi guys, I wish you a happy and healthy weekend. Today I will introduce components in reactjs. Don’t let you wait long, let’s start with the article. This article will have 2 parts, part 1 will talk about definitions, components types and simple examples.
1. What is JSX?
- In ReactJS, JSX still stands for JavaScript XML. Is an extension of JavaScript, used to create and manage user interface elements in web applications. It allows you to write HTML-like code in JavaScript to create UI elements, instead of having to create them using JavaScript functions.
- For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">App</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> menuItems <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">'Hamburger'</span> <span class="token punctuation">,</span> price <span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">2</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">'Cheeseburger'</span> <span class="token punctuation">,</span> price <span class="token operator">:</span> <span class="token number">12</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">'Fries'</span> <span class="token punctuation">,</span> price <span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> name <span class="token operator">:</span> <span class="token string">'Onion Rings'</span> <span class="token punctuation">,</span> price <span class="token operator">:</span> <span class="token number">7</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> orderItems <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">handleOrder</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">menuItem</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> orderItem <span class="token operator">=</span> orderItems <span class="token punctuation">.</span> <span class="token function">find</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">item</span> <span class="token punctuation">)</span> <span class="token operator">=></span> item <span class="token punctuation">.</span> id <span class="token operator">===</span> menuItem <span class="token punctuation">.</span> id <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> orderItem <span class="token punctuation">)</span> <span class="token punctuation">{</span> orderItem <span class="token punctuation">.</span> quantity <span class="token operator">++</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> orderItems <span class="token punctuation">.</span> <span class="token function">push</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token operator">...</span> menuItem <span class="token punctuation">,</span> quantity <span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> Menu <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> ul <span class="token operator">></span> <span class="token punctuation">{</span> menuItems <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">menuItem</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span> li key <span class="token operator">=</span> <span class="token punctuation">{</span> menuItem <span class="token punctuation">.</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> <span class="token punctuation">{</span> menuItem <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> $ <span class="token punctuation">{</span> menuItem <span class="token punctuation">.</span> price <span class="token punctuation">.</span> <span class="token function">toFixed</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">handleOrder</span> <span class="token punctuation">(</span> menuItem <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator">></span> Order <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> li <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> ul <span class="token operator">></span> <span class="token operator"><</span> h2 <span class="token operator">></span> Order <span class="token operator"><</span> <span class="token operator">/</span> h2 <span class="token operator">></span> <span class="token operator"><</span> ul <span class="token operator">></span> <span class="token punctuation">{</span> orderItems <span class="token punctuation">.</span> <span class="token function">map</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">orderItem</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token operator"><</span> li key <span class="token operator">=</span> <span class="token punctuation">{</span> orderItem <span class="token punctuation">.</span> id <span class="token punctuation">}</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> <span class="token punctuation">{</span> orderItem <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> $ <span class="token punctuation">{</span> <span class="token punctuation">(</span> orderItem <span class="token punctuation">.</span> price <span class="token operator">*</span> orderItem <span class="token punctuation">.</span> quantity <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toFixed</span> <span class="token punctuation">(</span> <span class="token number">2</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> <span class="token punctuation">{</span> orderItem <span class="token punctuation">.</span> quantity <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> li <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> ul <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> App <span class="token punctuation">;</span> |
- With JSX, you can create UI elements using HTML tags just like in regular web pages, but using JavaScript expressions to create dynamic content. JSX also allows you to use HTML attributes, JavaScript expressions, and events like onClick and onSubmit to create interactive UI elements.
2. Components in Reactjs
- Component is a JavaScript object used to create user interface components. It helps to separate an application into smaller pieces that are easy to manage and reuse.
- Components are created to help separate an application into smaller, manageable and reusable parts. They can be used to create UI elements like buttons, menus, charts, forms, tables, etc.
- For example, in the image above, we can divide a web page into smaller components and these components are organized in a tree structure. We can reuse these components on different pages if needed.
3. Types of components in reactjs
- Functional Components (also known as Stateless Components): Are components written in the form of functions, no state and no lifecycle method of its own.
- For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">MyComponent</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> Hello <span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> name <span class="token punctuation">}</span> <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> <span class="token punctuation">{</span> props <span class="token punctuation">.</span> message <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> MyComponent <span class="token punctuation">;</span> |
- Class Components (also known as Stateful Components) : Are components written in the form of classes, have state and have its own lifecycle methods.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token parameter">props</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span> <span class="token punctuation">(</span> props <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token operator">=</span> <span class="token punctuation">{</span> count <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token parameter">prevState</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> count <span class="token operator">:</span> prevState <span class="token punctuation">.</span> count <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> Count <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> count <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> button onClick <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> handleClick <span class="token punctuation">}</span> <span class="token operator">></span> Increment <span class="token operator"><</span> <span class="token operator">/</span> button <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">default</span> MyComponent <span class="token punctuation">;</span> |
- Presentational Components: Are components that are only responsible for displaying data, without business logic. They are often referred to as “dumb components”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Greeting</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">{</span> name <span class="token punctuation">}</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span> div <span class="token operator">></span> <span class="token operator"><</span> h1 <span class="token operator">></span> Hello <span class="token punctuation">,</span> <span class="token punctuation">{</span> name <span class="token punctuation">}</span> <span class="token operator">!</span> <span class="token operator"><</span> <span class="token operator">/</span> h1 <span class="token operator">></span> <span class="token operator"><</span> p <span class="token operator">></span> Welcome to my website <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> p <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Greeting <span class="token punctuation">;</span> |
- Container Components: Are components responsible for handling business logic, accessing data and passing it down to Presentational Components. They are often referred to as “smart components”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-redux'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> fetchTodos <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../actions'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> TodoList <span class="token keyword">from</span> <span class="token string">'../components/TodoList'</span> <span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">TodoListContainer</span> <span class="token keyword">extends</span> <span class="token class-name">React <span class="token punctuation">.</span> Component</span> <span class="token punctuation">{</span> <span class="token function">componentDidMount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">.</span> <span class="token function">fetchTodos</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">{</span> todos <span class="token punctuation">,</span> isLoading <span class="token punctuation">,</span> error <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> props <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token operator"><</span> TodoList todos <span class="token operator">=</span> <span class="token punctuation">{</span> todos <span class="token punctuation">}</span> isLoading <span class="token operator">=</span> <span class="token punctuation">{</span> isLoading <span class="token punctuation">}</span> error <span class="token operator">=</span> <span class="token punctuation">{</span> error <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token parameter">state</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> todos <span class="token operator">:</span> state <span class="token punctuation">.</span> todos <span class="token punctuation">.</span> data <span class="token punctuation">,</span> isLoading <span class="token operator">:</span> state <span class="token punctuation">.</span> todos <span class="token punctuation">.</span> isLoading <span class="token punctuation">,</span> error <span class="token operator">:</span> state <span class="token punctuation">.</span> todos <span class="token punctuation">.</span> error <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span> <span class="token punctuation">(</span> mapStateToProps <span class="token punctuation">,</span> <span class="token punctuation">{</span> fetchTodos <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">(</span> TodoListContainer <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
- Above I list some common components and examples of how to use them.
4. Summary
- Through this article, hopefully everyone has an overview of components in reactjs. Part 2 I will go into more practice.
- Thank you to everyone who viewed the article. Have a nice weekend everyone. If you have questions about the parts of this article, you can inbox via facebook: https://www.facebook.com/FriendsCode-108096425243996 I will answer questions within my understanding. Thanks everyone!
- Or contact me via my personal facebook: https://www.facebook.com/Flamesofwars/