React Overview and Setup Guide, Lecture notes of Web Design and Development

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.

Most important terms in React

• Components
• (^) Props
• States
• Babel
• Webpack
• JSX

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.

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

Basic HTML page

• We will load three CDNs in the head of our simple index html:
  • React
  • React DOM
  • Babel (compiler, backward compatibility)
• We will also create some html elements:
  • A div (with an id root)
  • Script tag

Index.html (Body)

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

App Class

class App extends React.Component { render() { return Hello world! } }

Rendering the App class

• Finally, we're going to use the React DOM render() method to render the App class we created into the root div in our HTML. - ReactDOM.render(, document.getElementById('root'))

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.

Examing the files generated

• If we look into the project structure, you'll see a /public and /src directory, along with the regular node_modules, .gitignore, README.md, and package.json.

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.