Chapter 1: Introduction & Event Page Activity

<aside> 💻 For this chapter, I'll give you muna a short introduction of what ReactJS is and how powerful it is for a software programmer. More on papakilala lang talaga dito and short activity to give a feel of using ReactJS on your computers! Padayon, future web dev ♥!

</aside>

<aside> 📢 If you still don't know HTML/CSS/JS, check Web Dev Roadmap to learn all these first to understand ReactJS concepts : https://bit.ly/StarterKitforDevelopers

</aside>

💻 GitHub Link of the project: https://github.com/marcusandrev/DSC-PLM-ReactJS-Study-Notes-01

🚀 If you have any questions or need a one-on-one with me, feel free to message me: https://www.facebook.com/marcusandre.villanueva/

📌 Link of this Notion page: https://bit.ly/ReactStudyNotes01

🤔 What is ReactJS?

• a JavaScript library used in web development to build user interfaces incredibly easy and really intuitively—basically the UI portion of a website—by cutting each page into pieces called components.

• Uses JSX

  • syntax extension used in ReactJS

  //common syntax of tags in JS
  
  <div> </div>
  <img> </img>
  
  <div class="div1"></div>
  <img src="../images/logo.png"></img>
  
  //syntax in JSX
  
  <div />
  <img />
  
  <div className="div1" />
  <img src="../images/logo.png" />
  

• In a website created by ReactJS, everything you see is made up of different components (E.g. header, body, footer, etc.) which are like building blocks.

  • it's like building a Lego structure 🏗
    • You just remove a component (Lego) then replace it and it will work immediately. With this, you can easily make small incremental changes

      • Visual Examples:

        <aside> 📢 <Navbar /> and <Hero /> are components

        </aside>

        • Navbar component then Hero Component

          

        • Adding another Navbar component

          

          • see how easy it is to add multiple components! Like a Lego brick

      • Putting Hero Component then Navbar Component

        

  ---

📝 Things to download before using ReactJS and doing the activity:

• VS Code (https://code.visualstudio.com/Download)

• VS Code Extension ES7 React/Redux/React-Native/JS snippets

  • This will make your life totally easy as a programmer

  

• Node.js

  • You can download it here: https://nodejs.org/en/
  • Download the recommended for most users and follow the steps when installing

• Knowledge in HTML, CSS & JS

  • Check Web Dev Roadmap to learn all these: https://bit.ly/StarterKitforDevelopers

💪 Let's create your first React Web App!