https://github.com/afsify/reactjs
Refine your React.js skills with my dedicated GitHub repository, offering a collection of workouts and practice exercises. Enhancing your proficiency through hands on exercises.
https://github.com/afsify/reactjs
front-end notes reactjs
Last synced: 5 months ago
JSON representation
Refine your React.js skills with my dedicated GitHub repository, offering a collection of workouts and practice exercises. Enhancing your proficiency through hands on exercises.
- Host: GitHub
- URL: https://github.com/afsify/reactjs
- Owner: afsify
- Created: 2024-01-25T18:06:32.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-11-07T14:51:04.000Z (over 1 year ago)
- Last Synced: 2025-07-30T06:45:50.696Z (11 months ago)
- Topics: front-end, notes, reactjs
- Homepage:
- Size: 181 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React.js
React.js is a popular JavaScript library for building user interfaces, particularly for single-page applications where you want to maintain a seamless user experience without frequent page reloads. React allows developers to create reusable UI components, manage the state of applications efficiently, and utilize a virtual DOM for performance optimization.
## Key Concepts
### Components
Components are the building blocks of a React application. Each component is a JavaScript function or class that optionally accepts inputs (called "props") and returns a React element that describes how a section of the UI should appear.
```jsx
import React from 'react';
function Welcome(props) {
return
Hello, {props.name}
;
}
```
### JSX
JSX is a syntax extension for JavaScript that looks similar to XML or HTML. It allows you to write HTML-like code within JavaScript, which React then transforms into JavaScript objects.
```jsx
const element =
Hello, world!
;
```
### State and Lifecycle
State is similar to props, but it is private and fully controlled by the component. Lifecycle methods are special methods that get called at different stages of a component's life.
```jsx
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
);
}
}
```
### Props
Props are inputs to components. They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes.
```jsx
function Welcome(props) {
return
Hello, {props.name}
;
}
```
### Conditional Rendering
You can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
```jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return
Welcome back!
;
}
return Please sign up.
;
}
```
### Handling Events
Handling events in React elements is very similar to handling events on DOM elements. There are some syntax differences, like camelCase naming and passing a function as the event handler.
```jsx
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
Click me
);
}
```
### Forms
Forms in React are similar to HTML forms. However, React provides more control over the form elements and data, using state to manage the form's input values.
```jsx
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
Name:
);
}
}
```
## Best Practices for React Coding
### Use Functional Components and Hooks
Functional components are simpler and more concise than class components. Use hooks like useState and useEffect to manage state and lifecycle methods in functional components.
```jsx
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return (
You clicked {count} times
setCount(count + 1)}>
Click me
);
}
```
### Lift State Up
To manage shared state between components, lift the state up to the nearest common ancestor component.
### Use PropTypes for Type Checking
Use PropTypes to catch bugs by ensuring that components receive props of the correct type.
```jsx
import PropTypes from 'prop-types';
function Welcome(props) {
return
Hello, {props.name}
;
}
Welcome.propTypes = {
name: PropTypes.string.isRequired
};
```
### Use Keys in Lists
When rendering lists of elements, provide a unique key for each element to help React identify which items have changed.
```jsx
const listItems = numbers.map((number) =>
{number}
);
```
### Optimize Performance with React.memo
Use React.memo to optimize functional components by memoizing the rendered output.
```jsx
const MyComponent = React.memo(function MyComponent(props) {
/* render using props */
});
```
## Clone the Repository
In the terminal, use the following command:
```bash
git clone https://github.com/afsify/reactjs.git
```