React Introduction

happens to be the most popular JavaScript framework sourced from (2020). It is the best alternative to two other popular JavaScript frameworks, and . They all allow you to create fast apps in the browser. React Stack Overflow Developer Survey Angular Vue According to the : official React website React is a JavaScript library for building user interfaces In the definition above, the term is also called a component to React. A can be created for reuse in a single web app. It totally adheres to the ( ) principle. You only have to change the data in the components. These feature in JavaScript makes it easier to write shorter code for complex applications. user interface template-like component Don't Repeat Yourself DRY What are the components? A simple definition of components is: Components are independent and reusable bits of code They serve the same purpose as JavaScript functions but work in isolation and return ( ) via a render function. HTML index.html Components come in three types: Class components Function components Server Components We will see functional components usage here! The image below divided into components: shows part of the official React home page Let's take a look at the latter components (the bottom 3 components). It shows a component reusable in a web app. How to build components in React? Let's use to illustrate. Codepen In normal and , the code source of the bottom three components is shown below: HTML CSS HTML Declarative React makes it painless to create interactive UIs... Declarative views make your code more predictable... Component-Based Build encapsulated components that manage their... Since component logic is written in JavaScript... Learn Once, Write Anywhere We don't make assumptions about the rest of... React can also render on the server using... section div class 'component-1 component' h3 h3 p p p p div div class 'component-2 component' h3 h3 p p p p div div class 'component-3 component' h3 h3 p p p p div section CSS { : flex; : ; : ; : auto; : ; : auto; } { : ; : ; : } { : ; : sans-serif; : ; : ; : ; : ; : ; } { : ; : ; : ; : ; } { : ; : ; : ; : solid ; : none; } , { : sans-serif; } { : ; : ; }

@ (max-width: ) { { : ; : ; : ; } }

@ (max-width: ) { { : ; : ; : ; } } section display flex 0 1 30% -webkit-flex 0 1 30% margin 0 width 97% overflow-x .component margin-left 5px margin-right 5px padding 10px h3 font-size 1.25rem font-family margin-bottom 20px color #6d6d6d padding-top 0 font-weight 300 line-height 1.3 p margin-top 0 font-size 1.0625rem line-height 1.7 max-width 42rem a background #bbeffdad background-color #bbeffdad color #1a1a1a border-bottom 1px #00000033 text-decoration h3 p font-family a :hover background #bbeffd background-color #bbeffd media 779px .component min-width 50% margin-left 0 margin-right 0 media 600px .component min-width 80% margin-left 0 margin-right 0 Template-like Component In the example shown below, a template-like component, is created: Adcomponent A react component in its most basic form is just a function (functional component). React supports ES6+ syntax, like the . fat arrow function Components with more than one React element are placed in a parent element. The parent element here is the element JSX {props.adParagraph1} "component-1 component" {props.adHeading} h3 h3 /p> {props.adParagraph2} div Place all hierarchy React elements in parenthesis to return them to the ( ) successfully. DOM Document Object Model ( {props.adHeading} {props.adParagraph1}

{props.adParagraph2}

); return div className "component-1 component" div The purpose of the template-like functional component is to pass data: The React functional component element, allows attributes. The attribute values are passed to the template-like component through the attribute name to change components data. Select each React functional component element with an . For example, . id selector document.querySelector("#ad1") In and , the code source of the bottom three components is shown below: HTML JSX HTML section div class 'component-1 component' div id 'ad1' div div div class 'component-2 component' div id 'ad2' div div div class 'component-3 component' div id 'ad3' div div section JSX ReactDOM.render( , document.querySelector("#ad2") );

ReactDOM.render( , document.querySelector("#ad3") ); , document.querySelector("#ad1") );

ReactDOM.render( Adcomponent adHeading "Declarative" adParagraph1 "React makes it painless to create interactive UIs..." adParagraph2 "Declarative views make your code more predictable..." The overall code is shown below: JSX Adcomponent = { ( {props.adHeading} {props.adParagraph1}

{props.adParagraph2}

); };

ReactDOM.render( , document.querySelector("#ad2") );

ReactDOM.render( , document.querySelector("#ad3") ); const => props return div className "component-1 component" div , document.querySelector("#ad1") );

ReactDOM.render( Adcomponent adHeading "Declarative" adParagraph1 "React makes it painless to create interactive UIs..." adParagraph2 "Declarative views make your code more predictable..." We write even lesser code with and files when components are mounted in a root element, . HTML JSX HTML div id 'root' div JSX Adcomponent = { ( {props.adHeading} {props.adParagraph1}

{props.adParagraph2}

); }; app = ( );

const rootNode = document.querySelector("#root"); ReactDOM.render(app, rootNode); const => props return div className "component-1 component" div const section The shows we can render components once in an application. above code snippet TerminologyJSX JSX stands for JavaScript XML. allows us to write HTML-like in Babel (JavaScript) JSX It is a custom made available by React, but behind the scene is compiled to JavaScript. is just a featured in React. HTML JSX syntactical sugar ReactDOM ReactDOM is a package that provides ( ) specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. DOM Document Object Model provides the developers with API methods, properties, objects, etc. For example, the .render() method on the ReactDOM object. ReactDOM Props Props are arguments passed into React components. Props are passed to components via attributes. HTML It makes changes in a possible when components or an app is rendered to the screen. state Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript that can be run by older JavaScript engines Babel It takes care of and ( and JavaScript). That is, writes code that works across all browsers. CSS auto-prefix browser compatibility CSS It is a popular tool for using the newest features of the JavaScript programming language (ECMAScript 2015+). After the installation of React, via any package manager like ( ), there are lots of packages and dependencies you will find in the files. For example, comes with other packages. Node Package Manager NPM .json webpack Webpack Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource (asset) Click the Babel file button then click View Compiled button to see how React compiles JSX (Custom HTML ) to JavaScript behind the scene Happy Coding!!! Support Me at patreon Also published at https://dev.to/bello/what-is-reactjs-g6n