React-JS-Training-Syllabus-Basic-Advance.pdf
- 1. www.credosystemz.com React JS Course Syllabus JavaScript Course Syllabus ➢ Introduction ➢ What is JavaScript? ➢ JavaScript Features ➢ JavaScript Libraries ➢ Understanding HTML, CSS, JavaScript ➢ JavaScript Version ➢ ES5 ➢ ES6/ES2015 ➢ ES7/ES2016 ➢ ES8/ES2017 ➢ Data Types ➢ Number ➢ String ➢ Boolean ➢ Undefined ➢ Null ➢ Variable Mutation ➢ Basic Operator ➢ Operator Precedence ➢ Shorthand operator ➢ Problem statement ➢ Decision making statement-if else ➢ if else - example ➢ Comparing the problem statement solution ➢ Switch statement - example ➢ Boolean logic
- 2. www.credosystemz.com ➢ Boolean logic example ➢ Ternary operator ➢ Ternary operator example ➢ Tips ➢ Functions ➢ Function statement ➢ Function Statement Example ➢ What is Array ➢ Real world Problem Ecommerce ➢ Real world problem transport ➢ Space and the Complexity ➢ Built in function Complexity ➢ examples of Array ➢ Objects, When to use it ➢ Objects and Methods ➢ Loops and Iteration ➢ For Loop ➢ Continue and Break Statement ES6 JavaScript Course Syllabus ➢ History of JavaScript ➢ Features ➢ let & const and its example ➢ Arrow Functions ➢ Alternative ➢ Tips and Arrow Functions ➢ Exports and Imports ➢ Tips for exports and imports ➢ Classes
- 3. www.credosystemz.com ➢ Classes example ➢ Inheritance ➢ Spread and rest Parameter ➢ Destructing React JS Course Syllabus SECTION 1: WHAT IS REACT JS? ➢ React JS Introduction ➢ Advantages of React JS ➢ Work flow of React JS ➢ Scope of React JS SECTION 2: OVERVIEW OF JSX ➢ Introduction of Virtual DOM. ➢ Difference between JS and JSX. ➢ React Components overview ➢ Containers and components ➢ What is Child Components? ➢ What is Namespaced components? ➢ What are the JavaScript expressions available in JSX? SECTION 3: REACT JS ENVIRONMENT SETUPS ➢ Node setup ➢ How to use NPM? ➢ How to create package.json and purpose of it? ➢ ES6 Introduction and features.
- 4. www.credosystemz.com ➢ Webpack Overview ➢ Best IDE for React JS and How to write optimized code in React JS? ➢ React JS browser plugins overview. Real-time Practicals • NPM Installation by locally and Globally • Create a Basic App with React JS and other Supported NPM SECTION 4: A REAL-TIME APPLICATION BY USING REACT JS ➢ Create a React component with JSX template. ➢ How to create Nested Components? ➢ What is React JS render? ➢ React Props overview. ➢ Introduction of Props validation with data types. ➢ Flow of States, Initialize states and update states. Real-time Practicals • Create a Small React Module • Use All the states in in the created Application. SECTION 5: REACT JS FORMS AND UI ➢ Lists of Form components. ➢ Setup Controlled and Uncontrolled form components. ➢ Control Input elements. ➢ How to set default values on all formats of Input elements. ➢ React JS Form validations. ➢ How to write Styles? ➢ Animations overview
- 5. www.credosystemz.com Real-time Practicals • Create a React Form. • Client-side form validation. • Applying form components. • Submit and Rest the form. SECTION 6: REACT JS COMPONENT LIFE CYCLES OVERVIEW ➢ Initial Render ➢ Props Change ➢ Stage Change ➢ Component willMount ➢ Component didMount ➢ Component Unmount Real-time Practicals • Applying Different Lifecylces in the Application. • When to choose Appropriate lifecycles. SECTION 7: ROUTING IN REACT JS AND OTHER JS CONCEPTS ➢ Single Page Application Overview. ➢ How to configure React Router? ➢ History of Router ➢ How to Handle Conditional statement in JSX? ➢ IIFE in JSX for complex logic overview. Real-time Practicals • Create a Single Page Application. • Applying Routing. • Dynamically render the components based on the url.
- 6. www.credosystemz.com SECTION 8: EVENT HANDLING IN JSX ➢ onBlur, onKeyUp, onChange and other useful primary events in React JS. ➢ How to Sharing events between the components? Real-time Practicals • Communicate Data between components. • Applying all lists of events. SECTION 9: HOW TO WRITE STYLES IN REACT JS? ➢ CSS and inline styles in React JS overview. ➢ Introduction to styled components ➢ Real-time Practicals ➢ Styling the application using styled component ➢ How to use Animations in the Application. SECTION 10: REACT ROUTER WITH NAVIGATION ➢ How to Load the router library? ➢ Configure the React Router? ➢ How to Pass and receive parameters? ➢ Integration of React-cookie overview. SECTION 11: FLUX , REDUX OVERVIEW ➢ What is Flux Architecture? ➢ What are the Flux Components available? ➢ Stores. ➢ Dispatchers. ➢ View Controllers. ➢ Actions. ➢ Views.
- 7. www.credosystemz.com ➢ How Flux works? ➢ Flux and React works together. ➢ Introduction to One Store. ➢ Provider Component ➢ Actions. ➢ Reducers. ➢ sagas ➢ Dispatchers ➢ View Controllers ➢ Selector Real-time Practicals • Redux application Development with Real-time Project SECTION 12: UNIT TESTING OVERVIEW ➢ What are the necessary Tools required for Unit Testing? ➢ React Unit Testing overview ➢ Introduction to JEST. ➢ How to Test React Component? ➢ How to Test React Router? SECTION 13: INTEGRATION WITH OTHER LIBRARIES ➢ Gulp & Browserify ➢ React with jQuery ➢ React & AJAX SECTION 14:REACT SERVER INTEGRATION & DEPLOYMENT ➢ https
- 8. www.credosystemz.com ➢ httpster ➢ npm SECTION : 15 HOOKS ➢ Understanding Hooks ➢ The useState hook ➢ Side effects using the useEffect hook ➢ The useContext hook ➢ The useReducer hook ➢ Writing your own hook SECTION 16: CODE SPLITTING ➢ Code splitting & Suspense ➢ Route Based Code Splitting ➢ Lazy Loading SECTION 17: ISOMORPHIC REACT ➢ Server Side Rendering ➢ SSR with React - Setup & Server ➢ SSR with React - The Toolchain SECTION 18: TESTING COMPONENT ➢ Using Jest with Test Utils from React-DOM ➢ Using Jest with the React Testing Library ➢ Using Jest with Enzyme SECTION 19: EPILOGUE ➢ The React ecosystem SECTION 20: NEW FEATURES OF REACT 16
- 9. www.credosystemz.com ➢ Handling exceptions in components ➢ Error boundaries SECTION 21: WEBPACK PRIMER AND ISOMORPHIC REACT ➢ Webpack and its use ➢ Setting up and installing Webpack ➢ Working with the configuration file of Webpack ➢ Working with loaders ➢ Quick word on lazy loading, code splitting, and tree shaking ➢ Setting up a hot module replacement ➢ Server-side rendering (SSR) ➢ Working with renderToStaticMarkup and renderToString methods SECTION 22: FETCH DATA USING GRAPHQL ➢ What is GraphQL? ➢ Cons of Rest API ➢ Pros of GraphQL ➢ Frontend backend communication using GraphQL ➢ Type system ➢ GraphQL datatypes ➢ Modifiers ➢ Schemas ➢ GraphiQL tool ➢ Express framework ➢ NPM libraries to build server side of GraphQL ➢ Build a GraphQL API ➢ Apollo client ➢ NPM libraries to build client side of GraphQL ➢ How to setup Apollo client