Complete ReactJS Training in 10 Hours [2024] | Master React.js with Edureka | Live Course

Welcome to Edureka’s ReactJS full course in 10 hours! In this tutorial, we will cover everything you need to know about React.js, from the basics to more advanced topics. By the end of this course, you will have a solid understanding of React and be able to build your own React applications.

Before we get started, let’s cover some basics. React.js is a JavaScript library for building user interfaces. It was created by Facebook and is now maintained by a community of developers. React allows you to create reusable components that can be composed together to build complex UIs.

Here is an overview of what we will cover in this course:

1. Introduction to React.js
2. Setting up a React project
3. Components and props
4. State and lifecycle
5. Handling events
6. Conditional rendering
7. Lists and keys
8. Forms
9. Styling in React
10. React hooks
11. Routing with React Router
12. Redux state management
13. React Context API
14. Next.js
15. Testing in React

Now, let’s dive into each topic in more detail.

1. Introduction to React.js
   React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose rich UIs from small and isolated pieces of code called "components". React uses a virtual DOM to keep track of changes and only updates the actual DOM when necessary, which makes it fast and efficient.

2. Setting up a React project
   To set up a React project, you can use create-react-app, which is a command-line tool that generates a new React project with all the necessary configurations. Simply run the following command in your terminal:

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

This will create a new React project called "my-app" and start the development server. You can now open your browser and navigate to http://localhost:3000 to see your React application running.

1. Components and props
   React components are reusable pieces of code that encapsulate a part of the UI. Components can have properties called props, which are used to pass data from a parent component to a child component. Props are read-only and cannot be modified by the child component.

To create a new component in React, you can define a function or a class that returns JSX code. Here is an example of a functional component in React:

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

In this example, the Greeting component takes a prop called "name" and displays a greeting message with the given name.

1. State and lifecycle
   In React, components can have internal state that changes over time. State is managed using the useState hook in functional components or the setState method in class components. When state changes, React automatically re-renders the component to reflect the new state.

Lifecycle methods allow you to run code at different points in a component’s lifecycle, such as when it is mounted, updated, or unmounted. However, with the introduction of hooks in React, most lifecycle methods are now deprecated in favor of useEffect hook.

1. Handling events
   React allows you to handle user input and interactions using event handlers. Event handlers are defined as functions and can be attached to HTML elements using event attributes such as onClick, onChange, etc. Here is an example of handling a click event in React:

function handleClick() {
  alert('Button clicked!');
}

<button onClick={handleClick}>Click me</button>

1. Conditional rendering
   Conditional rendering allows you to display different content based on a condition. In React, you can use if statements, ternary operators, or logical operators to conditionally render components. Here is an example of conditional rendering in React:

function Message({isLoggedIn}) {
  if (isLoggedIn) {
    return <p>Welcome back!</p>;
  } else {
    return <p>Please log in.</p>;
  }
}

1. Lists and keys
   Lists are a common way to display multiple items in React. You can use the map method to iterate over an array and render a component for each item. When rendering lists in React, it’s important to provide a unique key prop to each list item to help React identify which items have changed.

function List({items}) {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

1. Forms
   Forms allow users to input data into a web application. In React, you can create controlled components by storing form data in state and updating it with onChange handlers. Controlled components give you more control over the form data and make it easier to validate and submit the form.

function Form() {
  const [value, setValue] = useState('');

  function handleChange(event) {
    setValue(event.target.value);
  }

  function handleSubmit(event) {
    alert('You submitted: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

1. Styling in React
   You can style React components using CSS classes, inline styles, or CSS-in-JS solutions like styled-components. React supports all CSS features, including media queries, animations, and pseudo-classes. To apply styles to a component in React, you can use the className prop or the style prop.

function StyledButton() {
  return <button className="btn">Click me</button>;
}

<style>
  .btn {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

1. React hooks
   Hooks are a new feature introduced in React 16.8 that allow you to use state and other React features in functional components. Some commonly used hooks include useState, useEffect, useContext, and useRef. Hooks enable you to write more concise and reusable code in React without using class components.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

1. Routing with React Router
   React Router is a popular library for adding routing to React applications. It allows you to define routes with different components that are rendered based on the URL. React Router provides a declarative API for routing in React and supports features like nested routes, route parameters, and redirects.

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

1. Redux state management
   Redux is a predictable state container for JavaScript applications. It helps you manage the state of your application in a centralized store and allows you to update the state using actions and reducers. Redux works well with React and provides tools like useSelector and useDispatch to interact with the Redux store.

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
}

1. React Context API
   The React Context API allows you to pass data through the component tree without having to pass props down manually at every level. It provides a way to share data globally in your application, such as theme settings, user authentication, or language preferences. Context is especially useful for sharing state between components that are not directly related.

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value={'dark'}>
      <Header />
      <Content />
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = useContext(ThemeContext);

  return <h1 style={{ color: theme === 'dark' ? 'white' : 'black' }}>Hello, world!</h1>;
}

1. Next.js
   Next.js is a popular framework built on top of React that simplifies building server-side rendered and statically generated React applications. It provides features like automatic code splitting, server-side rendering, and static exporting. Next.js is great for building SEO-friendly and fast-loading React applications.

2. Testing in React
   Testing is an important part of developing React applications. React provides tools like Jest and React Testing Library to write unit tests, integration tests, and end-to-end tests for your components and logic. Testing ensures that your application behaves as expected and helps catch bugs early in the development process.

In this tutorial, we covered a wide range of topics related to React.js, from basic concepts like components and props to more advanced topics like hooks, routing, and state management. React is a powerful library for building user interfaces, and knowing how to use it effectively can help you create robust and scalable web applications.

I hope this tutorial has been helpful in getting you started with React.js. If you have any questions or need further clarification on any topic, feel free to ask in the comments section. Happy coding!