Every React concept explained in 12 minutes
If you want to learn about React in a quick and concise manner, this is the tutorial for you. In this tutorial, we will go over every major concept in React and explain them in detail using HTML tags.
-
What is React?
React is a JavaScript library for building user interfaces. It allows you to create reusable components that update dynamically based on the data and user interactions. React uses a virtual DOM to efficiently update only the parts of the UI that have changed. - JSX
JSX is an extension of JavaScript that allows you to write HTML-like syntax within your JavaScript code. It makes it easier to write UI components in React by allowing you to mix HTML and JavaScript seamlessly.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>In the above code snippet, we are using JSX to create a simple React element and render it to the DOM using ReactDOM.
- Components
Components are the building blocks of a React application. They are independent and reusable pieces of UI that can be composed together to create complex interfaces. Components can have their own state and props, which determine how they render and behave.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const Welcome = (props) => <h1>Hello, {props.name}!</h1>;
ReactDOM.render(<Welcome name="World" />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a functional component called Welcome that takes a prop called name and renders a greeting message. We then render this component with the prop "World" passed in.
- State
State is a data structure that represents the current state of a component. It allows you to store and update data within a component, which triggers re-rendering when the state changes. State is mutable and local to a component.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<h1>Count: {this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
ReactDOM.render(<Counter />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a class component called Counter that maintains a count state. We update the count state using a method called increment, which is triggered by a button click.
- Props
Props are read-only data that are passed from a parent component to a child component. They allow you to customize and configure a component’s behavior and appearance. Props are immutable and are used to communicate between components.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const Greeting = (props) => <h1>Hello, {props.name}!</h1>;
const App = () => <Greeting name="World" />;
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a parent component called App that renders a child component called Greeting with a prop named "name". The prop "World" is passed from the parent component to the child component.
- Lifecycle methods
Lifecycle methods are special methods that are called at specific points in a component’s lifecycle. They allow you to perform actions like setting up and cleaning up resources, handling side effects, and updating the UI. Lifecycle methods include componentDidMount, componentDidUpdate, componentWillUnmount, and more.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return <h1>Seconds: {this.state.seconds}</h1>;
}
}
ReactDOM.render(<Timer />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a Timer component that sets up an interval to update the state every second in the componentDidMount method. We clean up the interval in the componentWillUnmount method to prevent memory leaks.
- Events
React uses synthetic events to handle user interactions like clicks, mouse movements, and keyboard input. Event handlers are functions that are called when an event occurs. You can attach event handlers to DOM elements using the onClick, onChange, and other event attributes.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Button extends React.Component {
handleClick = () => {
alert('Button clicked!');
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
ReactDOM.render(<Button />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a Button component that displays a button element. We attach an event handler called handleClick to the button’s onClick event, which displays an alert when the button is clicked.
- Forms
React provides a convenient way to handle form inputs using Controlled Components. Controlled components are form elements whose value is controlled by React state. When the user interacts with a form input, the value is stored in the component’s state, and changes are reflected in the UI.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Form extends React.Component {
constructor(props) {
super(props);
this.state = { name: '' };
}
handleChange = (event) => {
this.setState({ name: event.target.value });
}
handleSubmit = (event) => {
alert('Hello, ' + this.state.name + '!');
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>Name:</label>
<input type="text" value={this.state.name} onChange={this.handleChange} />
<button type="submit">Submit</button>
</form>
);
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have a Form component that handles a text input using Controlled Components. The value of the input is stored in the component’s state, and changes are reflected in real-time.
- Lists and keys
React provides a way to render lists of data using the map method. You can dynamically render a list of items based on an array of data. When rendering lists, it’s important to use a unique key for each item to help React efficiently update the UI.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const names = ['Alice', 'Bob', 'Carol'];
const List = () => (
<ul>
{names.map((name, index) => (
<li key={index}>{name}</li>
))}
</ul>
);
ReactDOM.render(<List />, document.getElementById('root'));
</script>
</body>
</html>In this example, we have an array of names that we render in a list using the map method. We assign a unique key to each list item to help React optimize rendering performance.
- Conditional rendering
React allows you to conditionally render components based on a condition. You can use if statements, ternary operators, and logical operators to determine whether to render a component or not.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const isLoggedIn = true;
const Greeting = () => {
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in</h1>;
}
}
ReactDOM.render(<Greeting />, document.getElementById('root'));
</script>
</body>
</html>In this example, we conditionally render a Greeting component based on the isLoggedIn variable.
- Styling components
React allows you to style components using CSS-in-JS libraries like styled-components, emotion, or inline styles. You can create styled components, define custom styles, and apply them to React components.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
<style>
.button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const Button = styled.button`
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
`;
ReactDOM.render(<Button>Click me</Button>, document.getElementById('root'));
</script>
</body>
</html>In this example, we define custom styling for a button component using styled-components.
- Context
React provides a way to pass data through the component tree without having to pass props down manually at every level. Context allows you to create global state that can be accessed by any component in the tree.
<!DOCTYPE html>
<html>
<head>
<title>React Tutorial</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const ThemeContext = React.createContext('light');
const Header = () => (
<ThemeContext.Consumer>
{theme => <h1 style={{ color: theme }}>Hello, World!</h1>}
</ThemeContext.Consumer>
);
ReactDOM.render(
<ThemeContext.Provider value="dark">
<Header />
</ThemeContext.Provider>,
document.getElementById('root')
);
</script>
</body>
</html>In this example, we create a ThemeContext that is passed to the Header component using a Provider. The Header component consumes the theme from the context and styles the text color accordingly.
In conclusion, React is a powerful library for building interactive user interfaces. By understanding these key concepts, you can create rich, dynamic applications that respond to user interactions and data changes. I hope this tutorial has helped you grasp the basics of React in just 12 minutes!
Concise and worth every second❤❤❤❤
One of the finest React JS video explanation . Deserves a million views!!
when fireship turns on light mode
I’ll probably come back here to refresh cause the video is sooo goooddd!!
I’m impressed. You were able to explain a lot of concepts in under 12 minutes. I would definitely recommend this video to someone just getting started with React. 👏
Isn’t this the @code bootcamp video and you just stole it?
Great thanks
In this video @5.50 timestamp, isn't it should be setLikes instead of setClicks in the useState example?
5:48 you call setClick tho reference Error aaga
OMG Come Baaaaaack, Don't Stoooooowp
Good video!!!!!!
thanks man really helpful
Can you do a Nextjs video like this please?
You deserve a hug and some sort of reward like a medal or a cake.
Thank you so much for posting this, I made the mistake of starting with ReactNative, so circling back to React is now easier thanks to you!
Cheers!
new angular now?
It is correct use react and several libs like, react-routing and else on a large project without next.js? Or it is better to use next.js and forget about dependecy zoo? Thanks for answer
can you provide slide of this video ??
You really must understand a topic deeply to be able to explain it so succinctly.
3:55 – Should have used a photo of Dom Torreto (Vin Diesel)
Now I can write react as skill in my resume
that is the best explanation of react's stuffs