Core React Concepts

npx create-react-app myapp

cd myapp

npm start

npm run

build npm install

1. Learn the Fundamentals of HTML, CSS, and JavaScript

Your core concepts should be strong before you jump to this library. If you’re an experienced developer then you just need to revise the concepts.

• Variables, objects, arrays, functions, and classes.
• Common array methods such as .map(), .filter(), .reduce()
• ES6 features such as arrow function, let, const. Learn about ‘this’ keyword, call, apply, and bind method.
• Concepts of Asynchronous JavaScript such as promises, callback, Async/Await.
• Learn how DOM (document object model) works. How to create, select, and update the HTML elements and their attributes.

2. Fundamentals of NodeJS, Import, and Export Keyword

Being a React developer you will run a lot of NPM scripts/commands, so once the fundamentals (HTML, CSS, and JavaScript) are clear to you, understand the fundamentals of NodeJS

3. Learn React Fundamental

• You will be using JSX syntax in ReactJS. Syntax of JSX is somewhere similar to HTML but keep in mind that it is different from plain HTML.
• Learn to render the JSX elements. Show and hide elements depending on the conditions.
• Learn the concept of State in ReactJS? How does it work? Basically, the state holds the synchronous variable, and changing the value of the state will be reflected in the whole application wherever it is used. Learn how to store and update the data in State.
• In React, you will be using props. We know that this might be a new word for you. Basically, props are just like the arguments passed to the function or method. Know when to use it and how to use it. You will be using props as an input argument to the HTML tags.
• Functional component, class component, and the difference between both of these.
• Just like in JavaScript, you will handle events in React. Learn how to handle some common events such as onClick, onChange, and onSubmit

After the understanding of ReactJS build some basic projects to understand the concepts in a much better way.

• Simple todo-app
• Simple calculator app
• Build a shopping cart

4. React Router

• How to use <Route />, <Switch /> and <BrowserRouter /> components.
• How to do navigation using the <Link />component and using the useHistory() hook.
• Creating dynamic routes using the path prop i.e. <Route path=”/posts/:post-slug” component={Post} /> and getting the path values using the useParams() hook.
• How <Redirect /> works in React Router

5. React Hooks

• useState: Most of the time in your React app you will be using this concept to store and manage the data.
• useEffect: You will be using this concept in actions like HTTP requests and working with the Browser API.
• useRef: This will be used to reference JSX elements.
• useContext: This property of React Hooks will be used to access data from React Context to share data among components easily (instead of passing props)
• useReducer: This concept in React hooks will be used to store and manage data across multiple components

6. Learn to Work With the APIs in React Apps

Mainly there are two ways to work with the data from the backend. The most common and standard way is using the REST APIs. The other and the newer one is GraphQL API. In your work, you will encounter problems where you will have to work with both of the APIs. Learn how to work with both kinds of APIs using React.

7. Styling in React

In development most of the time, we use plain CSS to give styling to our application. But in React mostly developers use the Component library for easier styling. There are many component libraries available to use but the most popular one in React is Material UI.

You can also use the utility class library to style your element. The popular utility class library is React-Bootstrap, Tailwind CSS, and Ant Design. Being a developer you will encounter both of these. So it’s good to be familiar with both types of libraries.

9. Redux

In your React application, you will have to manage the states. Once your application will start growing it will become a complex application and you will have to manage the states across components. Redux which a powerful JavaScript library solves this problem and helps in maintaining the state of the application. In Redux, you store all your states in a single source.

Finally

We discussed the main concept that you should learn in React. Once you will start working on some React project, you will encounter many problems, and depending on the issues you will have to search for an efficient solution in React