Introduction To RactJS PDF

INTRODUCTION TO RACTJS By: Chan Huah Yong What is React? React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components. ReactJS Describing UI React is a JavaScript library for rendering user interf...

INTRODUCTION TO RACTJS By: Chan Huah Yong What is React? React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components. ReactJS Describing UI React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable components. From web sites to phone apps, everything on the screen can be broken down into components. You can create, customize, and conditionally display React components. REACTJS JavaScript framework for writing the web applications Fast response from running in browser Less opinionated: only specifies rendering view and handling user interactions Uses Model-View-Controller pattern View constructed from Components using pattern Optional, but commonly used HTML templating Minimal server-side support dictated Focus on supporting for programming in the large and single page applications Modules, reusable components, testing, etc. How does React Work? React creates a VIRTUAL DOM in memory. Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React only changes what needs to be changed! React finds out what changes have been made, and changes only what needs to be changed. React.JS History Current version of React.JS is V18.0.0 (April 2022). Initial Release to the Public (V0.3.0) was in July 2013. React.JS was first used in 2011 for Facebook's Newsfeed feature. Facebook Software Engineer, Jordan Walke, created it. Current version of create-react-app is v5.0.1 (April 2022). create-react-app includes built tools such as webpack, Babel, and ESLint React Getting Started To use React in production, you need npm which is included with Node.js. To get an overview of what React is, you can write React code directly in HTML. But in order to use React in production, you need npm and Node.js installed. Setting up a React Environment If you have npx and Node.js installed, you can create a React application by using create-react- app. If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app. To uninstall, run this command: npm uninstall -g create-react-app. Run this command to create a React application named my-react-app: npx create-react-app my-react-app Run the React Application Now you are ready to run your first real React application! Run this command to move to the my-react-app directory: cd my-react-app Run this command to run the React application my-react-app: npm start A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar. ReactJS Web Application Page import React from 'react'; import ReactDOM from 'react-dom/client'; function Hello(props) { return Hello World!; } const container = document.getElementById("root"); const root = ReactDOM.createRoot(container); root.render(); React JSX JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. Example 1 with JSX: const myElement = I Love JSX!; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement); Example 2 Without JSX: const myElement = React.createElement('h1', {}, 'I do not use JSX!'); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement); References and tutorial guides: https://www.w3schools.com/REACT/default.asp https://react.dev/learn Homework Complete the tutorials as much as possible from the references. Watch other resources from youtube. Search key words: “reactjs tutorial for beginners” Consult chatgpt. This is important for you to able to do your assignment 2.