3. React Basics - SarthakJha/IECSE-Web-Summer-21 GitHub Wiki

React is a Javascript library that is used to build user interfaces. It simplifies the way in which we make our user interface by allowing us to break it into smaller, reusable pieces called components. Another useful feature of React is that it allows us to easily write Javascript within traditional HTML markup by using a syntax called JSX. Have a look at their page

Here is a video that explains the importance of react.

We'll be using a tool called create-react-app to set up our React App locally.

npx create-react-app my-summer-project
cd my-summer-project
npm start

• If you want to read more head over here
• At this point, you should be able to see your app running at http://localhost:3000.
• Have a look at the folder structure here. This video will also explain the same.

• React's documentation is the best resource out there.
• ReactJS Crash Course
• Complete React Playlist This playlist covers all the basics of react. Watch videos 1-16, which will cover all the basics. It will come in handy when you need to learn about one of the specific concepts.

Components let us break our app into reusable chunks which makes it easier to keep our code cleaner. They are of two types:

• Function Components

function SayHello() {
  return <h1>Hello!</h1>;
}

//Or an equivalent ES6 Arrow Function
const SayHello = () => <h1>Hello!</h1>;

• Class components

class SayHello extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

In these examples, all three components would give us the same intended result. The different features of using function vs class components will become evident as we progress.

Props (properties) are the input data that is passed into a component from its parent component. Props are read-only. They allow us to reuse the same component with different input data.

function SayHello(props) {
  return <h1>Hello {props.name}!</h1>;
}

/*
<SayHello name="Tory"/> would display "Hello Tory!" on our page.
*/

Read more on Components and Props

A component can maintain some internal state or data. Whenever this state changes, the markup will be updated by re-invoking the render() method in a class component. In the example below, if the value of name is changed, our component would update to show the new value.

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "Prince" };
  }
  render() {
    return <span>Hello {this.state.name}!</span>;
  }
}

• State
• setState()

Your page could have several places where a user interacts with it. For example, submitting a form once a user enters their email and password and presses the Submit button. The components need to be able to handle these particular events. Read more

Make sure you learn and understand all the concepts below.

• JSX
• Components
• Props
• State
• Lifecycle Methods (22,23,24)
• Event Handling
• Conditional Rendering
• Functional vs Class components
• useState
• useEffect

• Clone the repo and head over to the demo folder
• Run npm install to install all the dependencies
• Run npm start to run the demo
• Read and understand every file in src
• Play around and experiment