INTRODUCTION TO REACT JAVASCRIPT FOR BEGINNERS.pptx
- 2. ReactJs • ReactJS is one of the most popular JavaScript front-end libraries • Has a strong foundation and a large community. • Building reusable UI components • It is an open-source, component-based front end library which is responsible only for the view layer of the application. • Applications run faster on ReactJs • The JavaScript virtual DOM is faster than the regular DOM • We can use ReactJS on the client and server-side as well as with other frames
- 3. ReactJs • A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code. • React components are the building blocks of a React application. • They are reusable, self-contained pieces of UI that can be combined to build complex interfaces.
- 4. ReactJs React Environment Setup • Pre-requisite for ReactJS • NodeJS • NPM – Node Package Manager • Npm allows developers to manage their dependencies. • Dependencies are basically libraries or packages that the project needs to function
- 5. Installing Node.js and npm • Visit Node.js official website. • Download the LTS (Long Term Support) version for stability. • Follow the installation instructions for your operating system. • Verify the Installation: • Open your terminal or command prompt and run: • node --version • npm --version
- 6. Creating a New React Application • The easiest way to create a new React application is by using create- react-app, • a command-line tool that sets up a new React project with a sensible default configuration. • Using npx: • npx comes with npm 5.2+ and higher. It allows you to run commands from packages without globally installing them.
- 7. Creating a New React Application • Create a directory folder on your desktop/location of your choice • Type npx create-react-app my-app • This command creates a new directory called my-app with a basic React project structure and installs all necessary dependencies. • Why npx? • npx comes with npm 5.2+ and higher. It allows you to run commands from packages without globally installing them.
- 8. Creating a New React Application • Once the project setup is complete, navigate into the project directory and start the development server: • To start the development server, type npm start • This command starts the development server and opens your new React application in the default web browser, typically at http://localhost:3000.
- 9. Creating a New React Application • Once the project setup is complete, navigate into the project directory and start the development server: • To start the development server, type npm start • This command starts the development server and opens your new React application in the default web browser, typically at http://localhost:3000.
- 10. Recommended Extensions for React Development: • ESLint: Provides linting capabilities to help you write error-free JavaScript and JSX. • Prettier: An opinionated code formatter that helps maintain consistent code style. • React Developer Tools: Allows you to inspect the React component hierarchy in the browser’s developer tools. • ESLint. • Prettier • React Developer Tools
- 11. Project Structure Overview • node_modules/: Contains all the dependencies installed via npm. • public/: Publicly accessible files, including the index.html file. • src/: Source files for your React application. • index.js: Entry point for the React application. • App.js: Main App component. • App.css: Styles for the App component. • .gitignore: Specifies which files and directories should be ignored by Git. • package.json: Lists project details and dependencies. • README.md: Contains information about the project.
- 12. React Features • JSX -JSX stands for JavaScript XML. • Components - ReactJS application is made up of multiple components, and each component has its own logic and controls. • One-way Data Binding - ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. • Virtual DOM-A virtual DOM object is a representation of the original DOM object. • Simplicity - ReactJS uses JSX file which makes the application simple and to code as well as understand. • Performance -This feature makes it much better than other frameworks out there today.
- 13. Advantages • Easy to learn and use. • Creating Dynamic Web Applications Becomes Easier • Reusable Components. • Performance Enhancement • The Support of Handy Tools • Known to be SEO Friendly • Scope for Testing the Codes
- 14. Disvantages • The high pace of development • Poor Documentation • View Part • JSX as a barrier
- 15. React Routing • Routing is simply the ability to move between different parts of an application when a user enters a URL or clicks an element :link, button, icon, image, etc. • Routing plays an important role in building responsive and user- friendly web applications. • React Router is a declarative, component-based, client and server-side routing library for React.
- 16. React Routing • Since the React framework doesn’t come with in-built routing, React Router is the most popular solution for adding routing to a React application. • To create a React application using create-react-app, go to your preferred CMD and type: • npx create-react-app “router-name”
- 17. Creating a react router application • To create a React application using create-react-app, go to your preferred CMD and type: • npx create-react-app “router-name” • Once the application has been successfully created, switch to the app directory • Run the command using npm start
- 18. Installing React Router • I mentioned earlier that React Router is an external library and not part of React itself.: • npm install react-router-dom • Now that the router package is installed, we may proceed with configuring the React Router library in our application.
- 19. Setting up React Router • To enable routing in our React application, we have to import the BrowserRouter module from react-router-dom inside the index.js file • then wrap the App.js component inside the BrowserRouter component.