Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

The Ultimate React.js Guide Created by JS Mastery Visit jsmastery.pro for more

The Ultimate React.js Guide Created by JS Mastery Visit jsmastery.pro for more Learning JavaScript libraries and frameworks can be overwhelming. There are many libraries to choose from, and no proper step-by-step guides that’ll teach you how to use these libraries to their fullest potential. That’s why, in this guide, you’ll learn the most popular JavaScript library, used by hundreds of thousands of developers worldwide - . React.js This guide covers the complete React.js roadmap, JavaScript prerequisites, essential React.js concepts, and project ideas that you can build & deploy and put up on your portfolio and get a job. What’s in the guide? https://jsmastery.pro JavaScript Mastery Brought to you by JSM This guide will provide you with useful information and actionable steps, but if you truly want to dominate the competition and secure a high-paying job as a full-stack software developer, is the answer. jsmastery.pro Read until the end for more information and special discounts! < > header < =” ”> section id hero < > h1 < > h1 < > h2 </ > h2   Web Development   < > /h1 </ > h1 Start Learning Right Now // With your help on projects and watching your videos I was able to land a $110k/yr React job at a company in San Diego, CA! ― Jake Simon Full Stack Developer at Tragic Media 500k+ supporters Say to JSM Pro https://jsmastery.pro JavaScript Mastery React.js is a front-end JavaScript library for building user interfaces. It was developed by Facebook and is maintained by Facebook and the open-source community. React.js is a phenomenal library that is easy to understand, has excellent cross-platform support, has a fantastic community, and is one of the most loved libraries out there. There are also two great React.js competitors: , . These libraries and frameworks are mainly used to create fast and efficient Single Page Applications. Although these are great technologies, taking a quick look at Google trends, we can clearly see that React.js is still in the lead by far. Vue.js Angular Introduction to React.js https://jsmastery.pro JavaScript Mastery You might be wondering, what are the prerequisites to learn such a great JavaScript library? Before learning React, you should have a good understanding of these JavaScript topics: Do not jump straight into React.js without understanding the topics I've mentioned below. Basic Syntax ES6+ features Arrow functions Template literals There’s only one prerequisite and that is - . JavaScript JavaScript prerequisites https://jsmastery.pro JavaScript Mastery Array Methods Object property shorthand Destructuring Rest operator Spread operator Promises Async/Await syntax Import and export syntax JavaScript prerequisites https://jsmastery.pro JavaScript Mastery File & Folder structure Components JSX Props State Events Styling Conditional Rendering React.js Roadmap Basic things to learn in React.js https://jsmastery.pro JavaScript Mastery useState useEffect useRef useContext useReducer useMemo useCallback React.js Roadmap Learn about React.js Hooks - the essential hooks to learn: https://jsmastery.pro JavaScript Mastery React.js Roadmap Then learn some of the React.js UI Frameworks Material UI Ant Design Chakra UI React Bootstrap Rebass Blueprint Semantic UI React https://jsmastery.pro JavaScript Mastery React.js Roadmap Learn to use some of the most popular React.js packages React Router React Query Axios React Hook Form Styled Components Storybook Framer Motion https://jsmastery.pro JavaScript Mastery React.js Roadmap Learn how to manage state with state management tools Redux MobX Hookstate Recoil Akita https://jsmastery.pro JavaScript Mastery React.js Roadmap More things to learn after learning React.js fundamentals Next JS Gatsby TypeScript React Native Electron https://jsmastery.pro JavaScript Mastery File & Folder structure Static Site Generation Server Side Rendering Incremental Static Regeneration Dynamic Pages CSS / SASS Modules Lazy loading Modules API Routes React.js Roadmap Important things to learn in Next.js https://jsmastery.pro JavaScript Mastery React.js Roadmap Learn to test your React.js applications with some of these libraries/frameworks https://jsmastery.pro JavaScript Mastery React.js Roadmap Learn to deploy your React.js applications https://jsmastery.pro JavaScript Mastery Components React.js Concepts React JS is a component-based front-end library which means that all parts of a web application are divided into small components. A component is a small piece of the User interface. Every React.js application is a tree of components. Components let you split the UI into independent, reusable parts. So when you're building an application with React, you'll build independent and reusable components, and then you'll combine them to build a full fledged web application. https://jsmastery.pro JavaScript Mastery Components explanation Let's take an example to represent what are React.js components: This website is entirely built in React.js. So imagine we're building this website. How would we make it? filmpire.netlify.app First project of the JSM Pro Platform https://jsmastery.pro JavaScript Mastery Components explanation Firstly we'll split the User Interface into small components like Sidebar, Search bar, and Movies, including several single movie components with names and ratings. Sidebar Movies Single movie component Search bar https://jsmastery.pro JavaScript Mastery In React, there are two types of components - & Functional Components Class Component Class-based Component Components explanation https://jsmastery.pro JavaScript Mastery Functional Component Components explanation If you don't fully understand, how to use classes, what are the class methods, and what does 'extends' means, don’t you worry at all. Class based are not being used at all anymore and they were replaced by their simpler counterparts https://jsmastery.pro JavaScript Mastery Components explanation That's it! This is a React Component. You can see how easy it is. You might be thinking, why are we writing HTML when returning something. This tag syntax is neither a string nor HTML. It is called . JSX https://jsmastery.pro JavaScript Mastery JSX - JavaScript XML JSX is a syntax extension to JavaScript. It is used in React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React . JSX forms the core syntax of React.. "elements" https://jsmastery.pro JavaScript Mastery JSX - JavaScript XML There are a few differences between HTML & JSX, although generally it’s incredibly similar. Some of the differences are: Writing className instead of class, Because the class is a reserved keyword in JavaScript. Since we use JSX in React, the extension of JavaScript, we have to use 'className' instead of the class attribute. className class https://jsmastery.pro JavaScript Mastery JSX - JavaScript XML Same as class, there’s also one more reserved keyword of JavaScript that is used in HTML. That is the ‘for’ attribute used with the <label> element. So, to define attribute in JSX, you do it as for ‘htmlFor’ <label > =”” htmlfor <label > for=”” https://jsmastery.pro JavaScript Mastery JSX - JavaScript XML One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won't compile. You can use ‘React fragments’ instead of divs You can also use divs instead of React fragments, it’s not necessary to use a particular, but using ‘React fragments’ makes the code more readable. <> </> ... <div> </div> ... https://jsmastery.pro JavaScript Mastery JSX - JavaScript XML You can implement JavaScript directly in JSX. To use JavaScript expressions, we use curly brackets ... { } Whereas in HTML, you need a script tag or an external JavaScript file to implement JavaScript https://jsmastery.pro JavaScript Mastery What are Props? To make our components accept different data, we can use props. Props are arguments passed into React components. They are passed to components via HTML attributes. We use props in React to pass data from one component to another (from a parent component to child components), But you can't pass props from a child component to parent components. Data from props is read-only and cannot be modified by a component receiving it from outside. Props is just a shorter way of saying . properties https://jsmastery.pro JavaScript Mastery What is State? A State is a plain JavaScript object used by React to represent a piece of information about the component's current situation. It's managed in the component (just like any variable declared in a function). State data can be modified by its own component, but is private (cannot be accessed from outside) The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. https://jsmastery.pro JavaScript Mastery What is Events? An event is an action that could be triggered as a result of the user action or a system-generated event. For example, a mouse click, pressing a key, and other interactions are called events. React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string. Handling events with React elements is similar to handling events on DOM elements. There are just some syntax differences. https://jsmastery.pro JavaScript Mastery How to add Events? https://jsmastery.pro JavaScript Mastery What are React.js Hooks? Hooks are a new addition to React in version 16.8 that allows you to use state and other React features, like lifecycle methods. Using hooks makes your code cleaner. Hooks don't work inside classes — they let you use React without classes. Hooks let you always use uploads/Finance/ reactjs-guide.pdf