Understanding React Using Your Angular Knowledge After about six years of working in different web apps with Angular (My first app was with Angular.js), I finally had the opportunity to add to my professional portfolio a couple of React apps. Adapting my brain to the “ ” to do things required me a significant amount of time. In this post, I’ll cover some of my experiences switching from to . React Style Angular React This article but a guide to switching between these tools with less effort. You have to understand that having in-depth knowledge of both frameworks is a must. is not a React vs. Angular comparison My first Advise I highly recommend stopping trying to solve problems in React using the Angular approach :D Happy coding! Before starting, let’s talk the same language To refresh your Angular vocabulary, please take a quick look at the official documentation . here The most used terms are: React The tools that allow us to work using the last features of JavaScript. Compilers: Most of the time refers to Webpack. These tools map the files to work in development and create the production bundle using JavaScript optimization techniques, including support of legacy browsers. Bundlers: The library manager for our apps. Before the package-lock.json appears, people prefer to use Yarn. These days, There is not a big difference to pick between NPM or Yarn. Package managers: The React template system. Go here for a or go to the official documentation to find a . JSX: basic introduction complete tutorial This transforms: <a href="https://medium.com/media/e59384b8e8402f57c812135804335a8f/href">https://medium.com/media/e59384b8e8402f57c812135804335a8f/href</a> In to this: <a href="https://medium.com/media/f6558f67a89a87a81e504ccc86427295/href">https://medium.com/media/f6558f67a89a87a81e504ccc86427295/href</a> Code that represents what you want to see in the screen. const element = . Elements: <h1>Hello, world </h1> 6. Functions/Classes with the behavior of each Element. Components: <a href="https://medium.com/media/7aaab99ec5dbf0bbde7f0809763bf6ac/href">https://medium.com/media/7aaab99ec5dbf0bbde7f0809763bf6ac/href</a> 7. The @inputs of component. The represent the communication channel from the parent to the children. props: React props 8. Reserved who contains the content between the opening and closing tags: < >{/* props.children */}</ >. props.children: prop myHair myHair 9. Variables managed by the Component that could trigger UI updates. state: 10. Functions executed by the Components. The Events could be associeted with HTML Events. Events: React Getting started Angular is a JavaScript framework created by Google. It includes a complete ecosystem that allows you to create dynamic web apps. It consists of a module and , a way to , an , a , and so on. That’s why we’re allowed to create apps without thinking on . Most of the Angular developers start creating their apps using the command line included in the Angular ecosystem. template system manage forms HTTP library route system extra packages interface tool React is a JavaScript library which allows us to create web components. When creating dynamic web apps, React needs to interact with different libraries. The most typical setup includes integration with a way to , an , a , and so. There is no right answer about which library combo is the best. Most of the React developers start with “ ” or “ ”. I recommended start with the and pick the starter kit according to each project’s needs. manage forms HTTP library route system Create React App React Slingshot official documentation The code structure has a clear code structure. You have the template, the styles, and the JavaScript file. Each file has its domain and preserved the native langue. The template uses HTML, the styles use CSS/SCSS/SASS, and the JavaScript file uses Typescript. This structure allows Backend developers to generate users interfaces with code that is familiar for theirs. Angular In , the scenario is different. Some developers feel like they are the Kings because they have total control of the project. It means the developer can use like Angular does or go with a file that includes the template, the styles, and the behavior. React separate files single JavaScript Enough theory, Let’s see some real code One of the recommendations to begin getting pro with new technology is to start with the official documentation. On this section, I’ll follow the same approach but a bit different. Let’s build together the “ ” using . Getting Started with Angular: Your First App React Create a new project In the same way as the official documentation, I prepare a StackBlitz repo. Go and fork the project to start. here With the initial configuration, the app should looks like: Starter state for React tutorial The styles problem In Angular, each time we generate components, a new valid HTML element is created. The React world is all about functions returning JSX, and it won’t create any extra element to wrap the component. In this tutorial, we are using the Angular started kits, this we need to ensure the app will work with the React implementation. If we go to the , there is a CSS rule pointing to the app-top-bar, that selector won’t exist in React. To quickly fix it, let’s add a div with a class to identify that element, instead of creating a new tag selector like this: style.css Go to TopBar.js Ensure the parent element to be <div >. className="app-top-bar" Go to style.css, replace with . app-top-bar .app-top-bar Remove the router-outlet + * selector and add the padding to the .container. At this point, the app should look like: Iterating over the list In React, there are no specific directives to iterate in JSX. . To render the products in the ProductList component, do the following steps: Everything is JavaScript then we iterate using JavaScript Go to ProductList.js Add the following code below : <h2>Products</h2> <a href="https://medium.com/media/c8d53ba2d2150fbba294ffc8a83da4e1/href">https://medium.com/media/c8d53ba2d2150fbba294ffc8a83da4e1/href</a> With those changes in place, the app should look like: Products names Remember, everything in React is JavaScript. The information about products is present in the products variable. Therefore, we can use the operator map to generate the required . What is this? JSX code Notice the anchor element add the property title using curly braces. It allows JSX to execute a JavaScript expression. In this example, we are generating the title using the literal string. Conditional rendering To conditional render an element in React, we should use one of the following options: 1) An if else statement, 2) A ternary conditional or 3) Use the short-circuit evaluation technique. Go to ProductList.js For the short-circuit evaluation, add the following code below the closing tag. </h3> <a href="https://medium.com/media/6fd144a64da94a2ccbb0281466d5d550/href">https://medium.com/media/6fd144a64da94a2ccbb0281466d5d550/href</a> 3. For the ternary conditional use: <a href="https://medium.com/media/2db9176c19c7b0c5ca3006a4d5725efb/href">https://medium.com/media/2db9176c19c7b0c5ca3006a4d5725efb/href</a> 4. For the if-else statement, add the following lines <a href="https://medium.com/media/96a05ad42c6f21dfb61580c0e1e9f4ef/href">https://medium.com/media/96a05ad42c6f21dfb61580c0e1e9f4ef/href</a> The app should look like: App with description and conditional rendering HTML event listener With JSX, developers will have access to the HTML events directly in the element. To execute the function share() after clicking a the Button, do the following: Go to ProductList.js Bellow the Product description element, add the following <a href="https://medium.com/media/a5eb39379b6251f63f9343917098c6aa/href">https://medium.com/media/a5eb39379b6251f63f9343917098c6aa/href</a> After click in the Button, the app looks like this: Creating a Component The component system in React consists of functions that return the required JSX code. of the function are received by the component, and is the statement. To generate a new React element, do the following: The params the props the template JSX returned Add a new file: ProductAlerts.js Inside , add the following code: ProductAlerts.js <a href="https://medium.com/media/bda27289b8c44d108b52da917f2765b2/href">https://medium.com/media/bda27289b8c44d108b52da917f2765b2/href</a> 3. Go to ProductList.js 4. Import the component import ProductAlerts from ‘./ProductAlerts’; 5. Add the following code below the button closing tag <ProductAlerts product={product} /> The app should look like: App with children notification component What is this? We are generating a new React component. A React component is a JavaScript file that imports React and exports a function which returns JSX code. In the ProductList file, we are providing the prop product. It allows us to use that variable inside the ProductsAlerts through the params of the function. The React “output” Let’s start this section saying that . The communication between components occurs in one way. However, it is possible to execute a method of the parent providing a reference of the function to the child. output concept of Angular doesn’t exist in React Go to ProductList.js Add the following code below the share() function. <a href="https://medium.com/media/6c28d0a61e66533ccede2c8f1d5bb09a/href">https://medium.com/media/6c28d0a61e66533ccede2c8f1d5bb09a/href</a> 3. Add a new to the ProductAlert component and pass the reference of the onNotify function. prop <ProductAlerts product={product} notify={onNotify} /> 4. Go to ProductAlerts.js 5. Add the new prop name to the params const ProductAlerts = ({ product, notify }) => { 6. Attach the click event, providing the prop received into the onClick prop of the Button. <button onClick={notify}>Notify Me</button> Now, if you click in the notify button the app should looks like: Notification system message What is it? In JavaScript, when we reassign a function into a variable, we are not creating a new instance of the function but a reference. Hence, if we execute notify() inside the ProductAlerts component, the onNotify function is executed. The project’s code The Angular solution to this tutorial can be found : here <a href="https://medium.com/media/9fcf4f90a1d4619164a027d5e9500b2b/href">https://medium.com/media/9fcf4f90a1d4619164a027d5e9500b2b/href</a> The React solution to this tutorial can be found : here <a href="https://medium.com/media/fe187306d5ef5a094d8971672075a41d/href">https://medium.com/media/fe187306d5ef5a094d8971672075a41d/href</a> What’s next? In the following post, I’ll be creating the following sections of the “ ” tutorial using React. I hope you find this useful to understand the concepts behind React as an Angular developer. Getting Started with Angular: Your First App Thanks for reading, please support me sharing this article or following me on and or . Medium Twitter LinkedIn <a href="https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href">https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href</a>
