Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
React Overview and Setup Guide, Lecture notes of Web Design and Development
An in-depth overview of react, a popular javascript library used for building user interfaces. It covers the basics of react, including components, props, states, and setup and installation. The guide also explains how to create a simple react application using create react app, and discusses the role of babel and webpack in the process.
Typology: Lecture notes
2022/2023
1 / 42
Related documents
Partial preview of the text
Download React Overview and Setup Guide and more Lecture notes Web Design and Development in PDF only on Docsity! Web Programming React An Overview, Hello World, components, props, states Introduction • React was initially developed by Facebook, also used in whatsapp and instagram. • It was created by Jordan Walke • Software Engineer, Facebook • ReactJS was used by Facebook in its newsfeed section (in 2011), but it was released publically in the month of May 2013. • Today, most of the websites are built using MVC (model view controller) architecture. • In MVC architecture, React is the 'V' which stands for view. What is React? • React is a JavaScript library - one of the most popular ones, with over 160,000 (Jan 2022) stars on GitHub. • React is not a framework (unlike Angular). • Often paired with kibraries like Redux for state management and build tools so line b/w library and framework blurs. • React is an open-source project. • Makes frontend flexible and easy. Setup and Installation • There are a few ways to set up React, and we’ll talk about two to get a good idea of how it works. • Static HTML File • Create React App Static HTML File • This method is not recommended but familiar and easy to understand because we already used a library like jQuery, and because we are not familiar with Webpack, Babel, and Node.js. • We will start by creating a simple HTML page Index.html (Body) <body> <div id="root"></div> <script type="text/babel"> // React code </script> </body> </html> Three CDNs in head • React: • the React top level API • React DOM: • adds DOM-specific methods • Babel • a JavaScript compiler that lets us use ES6+ (ECMAScript) in old browsers Body in index.html • The entry point for our app will be the root div element, which is named by convention. • You'll also notice the text/babel script type, which is mandatory for using Babel. • Now, let's write our first code block of React. We're going to use ES6 classes to create a React component called App. Create React App • The method we previously just used of loading JavaScript libraries into a static HTML page and rendering the React and Babel on the fly is not very efficient, and is hard to maintain. • Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. Create React App • We need to set up a React Environment on our computer. • If we have NPM and Node.js installed, we can create a React application by first installing the create-react-app. • We will Install create-react-app by running this command in our terminal: • npm install -g create-react-app • Now we are ready to create our react app Create React App • Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack. • When you’re ready to deploy to production, running npm run build will create an optimized build of your app in the build folder. You can learn more about Create React App from its README and the User Guide. public and src • In /public, our important file is index.html, which is very similar to the static index.html file we made earlier - just a root div. • This time, no libraries or scripts are being loaded in. The /src directory will contain all our React code. • To see how the environment automatically compiles and updates your React code, find the /src/App.js. • And replace it with any other text. Once you save the file, you'll notice localhost:3000 compiles and refreshes with the new data. How React works? • 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. How React works? • Now that we have understood its working we could delete all files in src folder except index.js and index.html • If index.html is not in src folder we could find it in public folder. • Once we have found both files we could open them in notepad++ or any other editor. • We will remove all the existing data in those two files and update them with our own data. ES6 • ES6 stands for ECMAScript 6, commonly known as ECMAScript 2015 is a JavaScript standard • We need to learn the basics of ES6 first because react uses it. • Things we need to learn first are: • Classes • Arrow Functions • Variables (let, const, var) ES6 Classes • Previously we studied functions with keyword function but didn’t study class in JS. class Person { constructor(name) { this.name = name; } getName() { return 'Person: ' + this.name; } } person = new Person("Ebad"); document.write(person.getName()); Inheritance • class Student extends Person { constructor(name, type) { super(name); this.type = type; } show() { return this.getName() + ', is a ' + this.type; } } student = new Student("Ebad", "university student"); document.write(student.show()); Variables • Var name= “Ebad”; • var outside of a function, it belongs to the global scope. • var inside of a function, it belongs to that function. • var inside of a block: {}, i.e. a for loop, the variable is still available outside of that block. let • Let x =5; • let has a block scope: {}. • let is the block scoped version of var, and is limited to the block (or expression) where it is defined. • let inside of a block, i.e. a for loop, the variable is only available inside of that loop. const • const x =6.3; • const is a variable that once it has been created, its value can never change. • const has a block scope. React Components • Components are like functions that return HTML elements. • 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. • There are two types of it: • Class components • Function components Class Component • class Person extends React.Component { • render() { • return <h2>Hi, I am a Person!</h2>; • } • } • // component's name must start with an upper case letter. • ReactDOM.render(<Person />, document.getElementById('root')); Function Component • function Person() { • return <h2>Hi, I am also a Person!</h2>; • } • ReactDOM.render(<Person />, document.getElementById('root')); Export component in App.js • import React from 'react'; • import ReactDOM from 'react-dom'; • class Person extends React.Component { constructor() { super(); this.skin = {color: "brown"}; } render() { return <h2>I am a {this.skin.color} person!</h2>; }} • export default Person; Import component in index.js • import React from 'react'; • import ReactDOM from 'react-dom'; • import Person from './App.js'; • ReactDOM.render(<Person />, document.getElementById('root')); Props • Props are arguments passed into React components. • Props are passed to components via HTML attributes.
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved