React is Javascript library for building fast and interactive user interfaces. It was developed at Facebook in 2011 and it’s the most popular Javascript library for building user interfaces. If you see in the Google trends, React is dominating the space of libraries and frameworks for building user interfaces. The other two players are Angular and Vue. So, if you want to expand your job opportunities as front-end developer, you should have React in your resume.
At the heart of all React applications are components, a component is essentially a piece of user interface. So, when building applications with React, we build a bunch of independent, isolated and reusable components and then compose them to build complex user interfaces. Every React application has at least one component, which we refer to as the root component. This component represents the entire application and contains other child components. So, every React application is essentially a tree of components.
Here is an example, let’s imagine we want to build an application like Facebook, so we can split the page into components like navbar, profile, trends and feed. You can build each components in isolation and compose them to build the whole user interfaces.
We have designed a basic guideline to get started with React. Once you have finished this, you will have taken a step towards becoming a skillful front-end developer in React and can build some best startup website design. Are you ready to dive? Then let’s get started.
1. Introduction JS frameworks & Libraries
1.1. What are the frameworks and Libraries?
1.2. What is the difference between a traditional Website and a SPA?
1.3. Why should we learn the frameworks?
1.4. Which frameworks should we learn?
2. Introduction to ReactJS
2.1. How Reactjs works?
2.2. How to set up the environment?
2.3. Folder structure and hello world in Reactjs
2.4. What is JSX?
2.5. How to use JSX?
2.6. Rendering Elements
2.7. Fragments
3. Components in ReactJS
3.1. What is the component?
3.2. Types of React components
3.3. Specifying Children
3.4. Embedding expressions and setting attributes
3.5. Rendering lists
3.6. Conditional rendering
4. State & Props in ReactJS
4.1. What are the state and props?
4.2. Why do we need the state?
4.3. How to update the state?
4.4. How to pass props?
4.5. Props vs State
4.6. Lifting the state up
4.7. Destructuring arguments
5. Composing Components in ReactJS
5.1. Introduction
5.2. Composing components
5.3. Passing data to components
5.4. Passing Children
5.5. Render props
5.6. Type Checking with PropTypes
5.7. Understand the default props
6. Handling Events in ReactJS
6.1. What is the event?
6.2. Binding event handlers
6.3. Raising and handling events
7. Life cycle phases in ReactJS
7.1. Mounting phase
7.2. Updating phase
7.3. Unmounting phase
8. Client Storage
8.1. Introduction
8.2. Building a form
8.3. Controlled and uncontrolled Elements
8.4. Handling multiple inputs
8.5. Handling form submission
8.6. Validation
8.7. Building signup and login form
9. Introduction to Hooks in ReactJS
9.1. Introduction
9.2. useState hook
9.3. useEffect hook
9.4. useRef hook
9.5. useLayoutEffect hook
9.6. useCallback hook
9.7. useMemo hook
10. Introduction to Router
10.1. Introduction
10.2. Setup
10.3. Adding Routing
10.4. Switch
10.5. Link
10.6. Route props
10.7. Passing Props
10.8. Route Parameters
10.9. Optional Parameters
10.10. Query String Parameters
10.11. Redirect
10.12. Programmatic Navigation
11. Introduction to Redux
11.1. Introduction
11.2. Why do we need redux?
11.3. Understanding the core concepts of Redux
11.4. CreateStore
11.5. CombineStore
11.6. ApplyMiddleware
11.7. BindActionCreators
11.8. Compose
