Aya Mostafa

A JavaScript library for building user interfaces.
User interfaces are what the user views in the browser. Those user interfaces are composed of components. Any web page has multiple components like next image:-

Instead of building the whole page as one block, every block represents a specific section in the website so that makes building websites easily managed and maintained.  So the question is what are the components?
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render function.
 

Let’s start creating the first component :)
profile component which represents different names

1. First, embed React and React-dom libraries that will be responsible for transforming and rendering all react components, react syntax uses the next generation of js so we’ll also need to import a babel library that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 

   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script       crossorigin       src="https://unpkg.com/react@17/umd/react.production.min.js" ></script>     <script       crossorigin       src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" ></script>

2. Create a div that will be a profile block that represent name and job of any user

   <div id="profile"></div>

3. Inside script tag create our profile component in javascript

   <script type="text/babel">       function Profile(props) { //function component which accepts props as an argument and returns a React element         return (           <div>             <h4>{props.name}</h4>             <p>{props.job}</p>           </div>         );       }       ReactDOM.render(         <Profile name="aya" job="front-end developer" />, // you can replace name and job values with yours ????         document.querySelector("#profile")       );     </script>

4. Now, refresh the browser, supposed to see your name and job ????
5. Now, what if i want to send two different names to my profile component. How can we do that?

   In js:- // call the profile component twice, every time will send different name like that:-   ReactDOM.render(         <Profile name="aya" job="front-end engineer" />,         document.querySelector("#profile1")       );       ReactDOM.render(         <Profile name="omar" job="doctor" />,         document.querySelector("#profile2")       );

   In html:- // specify where every component will be rendered like that:- <div id="profile1"></div> <div id="profile2"></div>

6. we can optimize our js code instead of calling render function twice, we can define variable that hold values of those profiles and send it to render function once like that:-

   In js:- First comment the previous 2 calls of render function and start adding the next lines var profiles = (<div>           <Profile name="aya" job="front-end engineer" />           <Profile name="omar" job="doctor" />         </div>); ReactDOM.render(profiles, document.querySelector("#profiles")); // note that #profiles is the id of html div that will render the components

   In html:- comment the previous 2 different ids and add one div with profiles id.

*Note:-You can check the lesson code from my learn-react repository as we start learning react step by step, I created branch for every lesson
Repository link:-
https://gitlab.com/ayamostafa/learn-react.git You can find this lesson at branch started 
 

Conclusion
Now, after developing our first piece of code in react, we notice that react helps us to build highly scalable logic and reusable components that make dealing with dynamic views easier than using vanilla js. 

Download Article